openlayers划线、标记点

参考代码1：https://blog.csdn.net/zy13608089849/article/details/70815887
参考代码2：http://t.csdn.cn/35iol

实现结果：

只有线段：
只有标记点：

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><link rel="stylesheet" href="./ol/ol.css"><style>.map-class {height: 100rem;width: 100%;}</style><!-- 加载OpenLayers 类库 --><script src="./ol/ol.js"></script><title>天地图划线</title>
</head><body><!-- <img src="./img/arrow.png"> --><div id="map-id" class="map-class"></div><script type="text/javascript">var center = [103, 45] //中心经纬度var view = new ol.View({center: ol.proj.fromLonLat(center),  //默认使用EPSG:3857地图坐标系，引入输出一般使用EPSG:4326实际坐标系，需要转换zoom: 5,minZoom: 1,maxZoom: 17})//新建map容器var map = new ol.Map({target: 'map-id',  // 绑定 DIV 元素// 添加图层layers: [// 设置图层的数据源//   矢量底图new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk='})}),//   矢量标记new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk='})}),],// 设置视图窗口view: view});//划线准备：//准备新图层用来加入标注的点和线,标记数据集var source = new ol.source.Vector();//标记层var layer = new ol.layer.Vector({source: new ol.source.Vector()});//定义标注点坐标//散列点数组var coordinate = new Array();//散列点var coordinate1 = [104.1005229950, 30.6743128087];var coordinate2 = [103.9271879196, 30.7462617980];var coordinate3 = [103.6227035522, 30.9932085864];var coordinate4 = [103.5752069950, 31.4663367378];var coordinate5 = [103.4307861328, 30.1941019446];var coordinate6 = [106.4500522614, 29.5811456252];var coordinate7 = [106.5885615349, 29.5679608922];var coordinate8 = [107.7666950226, 29.4161988273];var coordinate9 = [118.1862562895, 24.4891501310];var coordinate10 = [118.1982564926, 24.4947641146];coordinate.push(coordinate1);coordinate.push(coordinate2);coordinate.push(coordinate3);coordinate.push(coordinate4);coordinate.push(coordinate5);coordinate.push(coordinate6);coordinate.push(coordinate7);coordinate.push(coordinate8);coordinate.push(coordinate9);coordinate.push(coordinate10);var geometry = new ol.geom.LineString([ol.proj.transform([114,27], 'EPSG:4326', 'EPSG:3857'),ol.proj.transform([125.151421, 42.920414], 'EPSG:4326', 'EPSG:3857'),]);for (var i = 0; i < coordinate.length; i++) {// 将点加入geometry中存储几何信息；坐标系转换，保证map中坐标系一致geometry.appendCoordinate(ol.proj.transform(coordinate[i], 'EPSG:4326', 'EPSG:3857'));// 创建一个Feature，并设置好在地图上的位置var anchor = new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform(coordinate[i], 'EPSG:4326', 'EPSG:3857'))});// 设置样式，在样式中就可以设置图标anchor.setStyle(new ol.style.Style({image: new ol.style.Circle({radius: 10,stroke: new ol.style.Stroke({color: '#fff'}),fill: new ol.style.Fill({color: '#3399CC'})})}));// 添加到之前的创建的layer中去layer.getSource().addFeature(anchor);}var feature = new ol.Feature({geometry: geometry});source.addFeature(feature);//标记点集var vector = new ol.layer.Vector({source: source,style: styleFunction});//获取样式var styleFunction = function (feature) {var geometry = feature.getGeometry();//线段样式var styles = [new ol.style.Style({fill: new ol.style.Fill({color: '#0044CC'}),stroke: new ol.style.Stroke({lineDash: [1, 3, 5],width: 2,color: [255, 0, 0, 1]})})];//箭头样式geometry.forEachSegment(function (start, end) {var arrowLonLat = [(end[0] + start[0]) / 2, (end[1] + start[1]) / 2];var dx = end[0] - start[0];var dy = end[1] - start[1];var rotation = Math.atan2(dy, dx);styles.push(new ol.style.Style({geometry: new ol.geom.Point(arrowLonLat),image: new ol.style.Icon({src: "./image/arrow.png",anchor: [0.75, 0.5],rotateWithView: true,rotation: -rotation})}));});return styles;};// map.addLayer(vector) // 线段map.addLayer(layer)  // 标记点</script>
</body></html>

划线流程

定义轨迹路线：new ol.geom.LineString

var geometry = new ol.geom.LineString([], 'XYZM');

给轨迹定义相应样式：

   var styles = [new ol.style.Style({fill: new ol.style.Fill({color: '#0044CC'}),stroke: new ol.style.Stroke({lineDash: [1, 3, 5],width: 2,color: [255, 0, 0, 1]})})];

新建矢量图层

layer = new ol.layer.Vector({source: new ol.source.Vector({features: [gemoetry,...,...],}), style: styleFunction;});

将矢量图层添加到map中
```
map.addLayer(layer)
```

或者在地图初始化中加入：

map = new ol.Map({target:layers:[layer,....]
})

openlayers划线、标记点相关推荐

matlab画图入门篇--各种基本图形绘制的函数与实例【转载】
MATLAB画图入门篇--各种基本图形绘制的函数与实例一．二维图形(Two dimensional plotting) 1. 基本绘图函数(Basic plotting function):Plo ...
Matlab绘图基本控制命令
图形的控制与表现 (Figure control and representation) MATLAB提供的用于图形控制的函数和命令: axis: 人工选择坐标轴尺寸. clf:清图形 ...
matlab 控制命令,Matlab绘图基本控制命令
图形的控制与表现 (Figurecontrol and representation) MATLAB提供的用于图形控制的函数和命令: axis: 人工选择坐标轴尺寸. clf:清图形窗口. ginpu ...
matlab基础总结与图像处理应用(上)
Q: how to improve my coding force level A: 我会找个教程/文档例子,把代码逐行敲一遍,感觉就像是我自己写的一样,一旦完成,我会从头重写一遍,添加注释,并根据自 ...
matlab设置线条颜色宽度线型
matlab设置线条颜色宽度线型 2010-11-02 14:03 多组变量绘图:plot(x1, y1, 选项1, x2, y2, 选项2, --) 上面的plot格式中,选项是指为了区分多条画出曲 ...
matlab二维三维图形绘制和坐标轴范围设置
matlab二维绘图一．二维图形(Two dimensional plotting) 1. 基本绘图函数(Basic plotting function):Plot, semilogx, se ...
Matlab坐标轴标注和特殊字体
坐标轴标注: 1. 控制坐标轴尺度长度:set(gca,'XLim',[-pi/2 pi]) 2. 定制自己想标注的刻度: (1)set(gca,'XTick',[-pi/2:pi/4:pi]) ...
matlab 控制命令,[转载]Matlab绘图基本控制命令
图形的控制与表现 (Figure control and representation) MATLAB提供的用于图形控制的函数和命令: axis: 人工选择坐标轴尺寸. clf:清图形窗口. ginp ...
matlab绘图命令汇总
MATLAB绘图虽说非常简单,但是众多命令不好记忆,每次用到都要到网上查找也非常麻烦,找到一个比较全的汇总,以后用到的时候直接来这里就行了. a=linspace(1,2,10) plot(a,'-- ...

openlayers划线、标记点

实现结果：

划线流程

openlayers划线、标记点相关推荐

最新文章

热门文章