基于 Openlayers 实现的地图常用功能工具集合
Posted 非科班Java出身GISer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于 Openlayers 实现的地图常用功能工具集合相关的知识，希望对你有一定的参考价值。
基于 Openlayers 实现的地图常用功能工具集合
在项目开发中，经常会需要使用一些坐标做测试，或者手动标绘点线面，或者坐标转换等。
使用代码当然是可以做到的，但是有时候懒得启相关项目，或者需要手写代码来实现，效率不高。
笔者在使用 Openlayers 过程中，积累一些工具，并且将使用频率较高的做了一个工具集，部署在云服务器，很方便。
这里将服务器工具对外开放，提供给需要的广大 GISer 使用，后期会将项目开源！
需要注意的是，之前在网上也见到过类似工具，但是功能不太合适，而本工具的优势是为地图开发人员提供专业功能！
另外：工具完全是前端实现，不走后台，保护使用者隐私！
PS：工具尚在不断补充完善中！
本文包括地图工具介绍、使用示例两部分。
地图工具介绍
地图工具地址：http://openlayers.vip/maptool/
地图工具普通功能主要使用原生 Openlayers 实现，地图分析功能使用 Turf 实现。
目前已完成的功能包括：
随机数据：框选范围，生成点线面随机数据，可以直接复制使用。
标绘数据：选择点线面，在地图上标绘数据，可以直接复制使用；也可以通过搜索地名进行定位后操作。
投影数据转换、火星百度坐标转换、GPS 坐标转换：输入 WKT、GeoJson 格式数据，选择投影坐标，转换之后可以复制使用。
平滑曲线、曲面，缓冲，抽稀：输入 WKT、GeoJson 格式数据，完成分析之后可以复制使用。
使用示例
使用也比较方便，这里举两个使用示例：标绘数据和缓冲分析。
1. 标绘数据
首先，输入天安门广场，点击查询定位，地图定位至天安门广场。
然后选择面状标绘类型，在地图标绘。
可以选择生成数据格式，即 WKT 或者 GeoJson 格式，复制使用即可。
2. 缓冲分析
首先，将 WKT 或者 GeoJson 格式数据添加到输入框，已面状数据为例。
然后输入缓冲半径，点击缓冲分析即可生成数据，选择切换 WKT 或者 GeoJson 数据类型，复制使用即可。
最后，地图工具在持续新增、更新、完善中…
以下是地图工具所有地址，由于天地图的原因，请尽量使用 http 而不是 https：
http://openlayers.vip/maptool/
http://openlayers.vip/map-tool/
http://openlayers.vip/map-tools/
http://openlayers.vip/mapTool/
http://openlayers.vip/mapTools/
在地图上基于OpenLayers实现点/线/面静态的绘制显示
在做GIS相关的工作过程中，是离不开矢量的数据的。矢量作为最基础的数据形式，一般通用在各个项目中。在导航软件开发或者应用中，点/线/面的标记，标绘，显示等都是不可缺少的。本文主要是来介绍在地图上基于OpenLayers实现点/线/面静态的绘制显示方法。
1、准备
本文的实现是在前文的框架基础上，继续添加点线面样式和显示函数。具体的准备内容包括ol库文件，瓦片地图服务等。参考：基于OpenLayers实现导航地图上(起/终)点的交互式图标显示的准备内容，和地图瓦片数据的多种利用形式以及瓦片数据的浏览显示的地图创建与后端服务启动。
2、创建矢量图层
在地图上增加点/线/面，则需要在地图之上增加一个矢量图层。
//创建矢量图层
var vecSource = new ol.source.Vector();
var vecLayer = new ol.layer.Vector(
source: vecSource
);
vecSource.clear();
map.addLayer(vecLayer);//添加到map里面注意：如果点线面公用一个图层，如果项目中有清除的功能，那么会使所有已存在的矢量均被清除。为此，根据项目需要，可创建多个矢量图层分别去控制point、line、polygon的要素，即可分别作用显示和清除。
3、点/线/面样式
样式的处理一般有两种方式：1、固定写法，放在之前，用时直接调用；2、不固定写法，在绘制的时候再写，可处理细节。
3.1、固定写法例子
//点样式
var pointStyle = new ol.style.Style(
image:new ol.style.Circle(
radius:5,//半径
fill:new ol.style.Fill(
color:'red'
), //填充颜色
stroke: new ol.style.Stroke(
color: 'green',
width: 1
)//外环颜色和粗细
)
)
//线样式
var lineStyle = new ol.style.Style(
stroke: new ol.style.Stroke(
color: 'blue',
width: 3
)
)
//面样式
var polygonStyle = new ol.style.Style(
text:new ol.style.Text(
testAlign:'center',
text:"区域",
font:'bold 20px 微软雅黑',
fill:new ol.style.Fill(
color:'#19339e'
)
),
fill: new ol.style.Fill(
color: '#0055ff'
),
stroke: new ol.style.Stroke(
color: '#ffcc33',
width: 3
)
)上面写的例子可以看出，写死后，直接调用，样式基本就固定了。细微细节想要变化不太好处理了。
3.2、不固定写法例子
直接在对点线面绘制遍历过程逐一添加样式，可以增加细节上的优化。
//点样式
var pointStyle = new ol.style.Style(
text:new ol.style.Text(
testAlign:'left',
text:i+" ", ///可变化
font:'bold 15px 微软雅黑',
fill:new ol.style.Fill(
color:'yellow'
)
),
image:new ol.style.Circle(
radius:r,//半径
fill:new ol.style.Fill(
color:c1
), //填充颜色
stroke: new ol.style.Stroke(
color: c2,
width: w
)//渐变颜色和大小
)
);
点样式放在每个点要素的绘制过程中，可以对每个点要素进行标注等等，而固定写法则没法做到序号标注。
var pFeature = new ol.Feature(geoPoint);
//pFeature.setStyle(pointStyle);
pFeature.setStyle(new ol.style.Style(
text:new ol.style.Text(
testAlign:'left',
text:i+" ",
font:'bold 20px 微软雅黑',
fill:new ol.style.Fill(
color:'red'
)
),
));线样式中则可以对每个节点进行标注，处理显示。
var polygonStyle = new ol.style.Style(
text:new ol.style.Text(
testAlign:'center',
text:"区域"+i,
font:'bold 20px 微软雅黑',
fill:new ol.style.Fill(
color:'black'
)
),
fill: new ol.style.Fill(
color: '#0055ff'
),
stroke: new ol.style.Stroke(
color: '#ffcc33',
width: 3
)
);面样式放在每个面要素的绘制过程中进行渲染，可以获得想要的标注等样式。
4、显示效果
为显示效果模拟的数据：
var vectorlist = "point":[[113.76101 , 23.52712],[113.73627 , 23.51769],[113.76506 , 23.51675],[113.74415 , 23.49535],[113.74415 , 23.49995],[113.75082 , 23.49976],[113.319 , 23.140],[113.319 , 23.109],[113.3386 , 23.1238]],"line":[[113.3386 , 23.1238],[113.4506 , 23.2675],[113.5415 , 23.49535],[113.74415 , 23.49995]],"polygon":["[[113.319 , 23.140],[113.319 , 23.109],[113.3386 , 23.1238]]","[[113.76101 , 23.52712],[113.73627 , 23.51769],[113.74415 , 23.49995],[113.76506 , 23.51675]]"]4.1、点显示
代码：
function drawPoint(PointList)
vecSource.clear();
var points = PointList.point;//使用过程中需要修改为被请求服务中的字段
for(var i=0;i<points.length;i++)
var point = new ol.geom.Point(ol.proj.fromLonLat(points[i]));
var feature = new ol.Feature(point);
var pointStyle = new ol.style.Style(
text:new ol.style.Text(
testAlign:'left',
text:i+" ",
font:'bold 15px 微软雅黑',
fill:new ol.style.Fill(
color:'yellow'
)
),
image:new ol.style.Circle(
radius:5,//半径
fill:new ol.style.Fill(
color:'red'
), //填充颜色
stroke: new ol.style.Stroke(
color: 'blue',
width: 1
)//渐变颜色和大小
)
);
feature.setStyle(pointStyle);
vecSource.addFeature(feature);
那么直接调用：
drawPoint(vectorlist);得到效果有：
4.2、线显示
代码：
function drawLine(LineList)
vecSource.clear();
var lines = LineList.line;
var line = new ol.geom.LineString();
for(var i = 0;i < lines.length;i++)
// var pPoint = ol.proj.transform([lines[i][0]*1,lines[i][1]*1], 'EPSG:4326', 'EPSG:3857');
// line.appendCoordinate(pPoint);
// var geoPoint = new ol.geom.Point([pPoint[0]*1,pPoint[1]*1]);
line.appendCoordinate(ol.proj.fromLonLat(lines[i]));
//标记每一个节点
var geoPoint = new ol.geom.Point([ol.proj.fromLonLat(lines[i])[0]*1,ol.proj.fromLonLat(lines[i])[1]*1]);
var pFeature = new ol.Feature(geoPoint);
//pFeature.setStyle(pointStyle);
pFeature.setStyle(new ol.style.Style(
text:new ol.style.Text(
testAlign:'left',
text:i+" ",
font:'bold 20px 微软雅黑',
fill:new ol.style.Fill(
color:'red'
)
),
));
vecSource.addFeature(pFeature);
var feature = new ol.Feature(line);
feature.setStyle(lineStyle);
vecSource.addFeature(feature);
效果：
4.3、面显示
代码：
function drawPolygon(PloygonList)
vecSource.clear();
var ploys = PloygonList.polygon;
for(var i=0;i < ploys.length;i++)
var ploy = ploys[i];
var json = JSON.parse(ploy);
var polygon = new ol.geom.Polygon([json]);
polygon.applyTransform(ol.proj.getTransform('EPSG:4326', 'EPSG:3857'));
var feature = new ol.Feature(polygon);
var polygonStyle = new ol.style.Style(
text:new ol.style.Text(
testAlign:'center',
text:"区域"+i,
font:'bold 20px 微软雅黑',
fill:new ol.style.Fill(
color:'black'
)
),
fill: new ol.style.Fill(
color: '#0055ff'
),
stroke: new ol.style.Stroke(
color: '#ffcc33',
width: 3
)
);
feature.setStyle(polygonStyle);
vecSource.addFeature(feature);
效果：
5、结束
由于个人喜好因素，矢量数据表现形式可能存在无数样式。所以往往大家有喜欢定制化的。那么在细节之处传入喜好的参数，就能够得到自己想要的样式了。所以有时候则需要将函数改动的更为灵活，这里静态显示其实也体现不出这种形式的好处，如若改为交互式的情形，那么所有配置参数将都可让用户自己设置。
这里仅用点显示函数做例子，其他的都类似：
function drawPoint(PointList,c1,c2,r,w)
vecSource.clear();
var points = PointList.point;//使用过程中需要修改为被请求服务中的字段
for(var i=0;i<points.length;i++)
var point = new ol.geom.Point(ol.proj.fromLonLat(points[i]));
var feature = new ol.Feature(point);
var pointStyle = new ol.style.Style(
text:new ol.style.Text(
testAlign:'left',
text:i+" ",
font:'bold 15px 微软雅黑',
fill:new ol.style.Fill(
color:'yellow'
)
),
image:new ol.style.Circle(
radius:r,//半径
fill:new ol.style.Fill(
color:c1
), //填充颜色
stroke: new ol.style.Stroke(
color: c2,
width: w
)//渐变颜色和大小
)
);
feature.setStyle(pointStyle);
vecSource.addFeature(feature);
这里就可以将，点要素的半径、填充颜色、渐变色和大小都定制化选择了。
以上是关于基于 Openlayers 实现的地图常用功能工具集合的主要内容，如果未能解决你的问题，请参考以下文章
在地图上基于OpenLayers实现点/线/面静态的绘制显示
openlayers6实现webgl点图层渲染效果(附源码下载)