openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记

上一篇已经讲了，怎么加载瓦片地图。

这篇就看看怎么简单的渲染矢量点线面数据。

最简单的，绘制点线面注记。

效果长这样：

新建一个文件FeatureOL.HTML。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>openlayer渲染矢量要素</title><link rel="stylesheet" href="ol/ol.css"><script src="ol/ol.js"></script><script src="jquery-1.7.2.js"></script><style type="text/css">#map,html,body {height: 100%;width: 100%;}.content {width: 100px;}</style>
</head><body>
<div id="map"></div>
</body>
<script type="text/javascript">//页面var view = new ol.View({// 设置中心点坐标，因为加载的腾讯瓦片地图的坐标系是墨卡托投影坐标系（'EPSG:3857'），所以要对经纬度坐标点进行投影，ol.proj.transform既是openlayer自带的坐标系转换函数，支持WGS84和墨卡托投影的互换。center: ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'),// 比例尺级数为9zoom: 9});var layers = [// 加载腾讯瓦片底图new ol.layer.Tile({source: new ol.source.XYZ({url: "http://rt{0-3}.map.gtimg.com/realtimerender?z={z}&x={x}&y={-y}&type=vector&style=0"})})       ];//地图var map = new ol.Map({target: 'map',//指向divlayers: layers,view: view});//设置风格，点线面注记var style=new ol.style.Style({image: new ol.style.Circle({fill: new ol.style.Fill({color: 'rgba(192, 192, 192, 0.5)'}),stroke: new ol.style.Stroke({color: 'rgba(192, 0, 0, 1)',width: 2}),radius: 10,}),stroke: new ol.style.Stroke({color: 'rgba(192, 0, 0, 1)',width: 2}),fill: new ol.style.Fill({color: 'rgba(192, 192, 192, 0.5)'}),text: new ol.style.Text({font: '20px Microsoft YaHei',text:  '测试注记',offsetX: 20,offsetY: 20,fill: new ol.style.Fill({color: 'rgba(192, 0, 0, 1)'}),stroke: new ol.style.Stroke({color: 'rgba(255, 255, 255, 1)', width: 1}),})})// 新建点var point = new ol.Feature(new ol.geom.Point(ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')));// 新建线var line = new ol.Feature(new ol.geom.LineString([ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857')]));// 新建面var polygon = new ol.Feature(new ol.geom.Polygon([[ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857'), ol.proj.transform([116.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([117.400146,41.250184], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([116.400146,40.250184], 'EPSG:4326', 'EPSG:3857')]]));// 创建矢量资源var source=new ol.source.Vector({features: [point,line,polygon]});// 创建矢量图层var layer=new ol.layer.Vector({source:source,style:style});// 将图层添加至地图map.addLayer(layer);</script>
<style type="text/css">* {margin: 0px;padding: 0px;}#map {width: 100%;height: 100%;}
</style>
</html>

一般来说，地图要素的注记与几何属性是不分离的，所以注记需要提取要素中的属性字段。

本文只是简单示例渲染矢量要素，注记的动态展示，会在后面渲染查询geojson要素的时候介绍。

openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记相关推荐

无限滚动加载最佳实践
无限滚动加载最佳实践无限滚动(Infinite scrolling),有时候被称为无尽滚动(endless scrolling),这种技术允许用户在大量内容上滚动,眼中看不到结束的地方.这种技术很简 ...
ol xyz 加载天地图_OpenLayer学习之加载天地图
一.OpenLayers 3 中有一个对应的数据源(ol.source)类 – ol.source.TileImage,但是天地图的切片方式和google地图的切片的方式一样, OpenLayer定义 ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...
ol xyz 加载天地图_Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
美团金融扫码付静态资源加载优化实践
原文链接:https://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651747208&idx=1&sn=b9fc54300 ...
【译】无限滚动加载最佳实践
本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/673 原文:https://uxplanet.org/infinite-scrolling-best-p ...
php spl自动加载类,php – SPL自动加载最佳实践
在我在服务器端的include_path中,我在'/usr/share / pear /'中引用了一个pear目录.在我的应用程序中,我包含来自公共库的文件,位于'/usr/share / pear ...
Android基于Glide(4.6.1)加载gif实践
1.Glide是什么? Glide是一个面向Android的快速高效的开源媒体管理和图像加载框架,它将媒体解码.内存和磁盘缓存以及资源池封装到一个简单易用的接口中: Glide支持获取.解码和显示视频 ...
vue openlayer 实现加载底图
vue页面 Demo1 <template><div id="mapDiv" class="map"><button class= ...

openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记

openlayer xyz加载_webGIS实践：3_1_openlayer展绘点线面注记相关推荐

最新文章

热门文章