SupermapiClientforOpenLayers实现沿路画面功能

作者:yangjl

实现沿路画面的功能主要方法是利用iServer网络分析服务中的最佳路径分析GIS功能。因本次主要是以实现路画面功能为谈论重点&＃xff0c;感兴趣的同学可以在前文博客中查找如何在iDesktop制作网络数据集以及iServer中如何发布网络分析服务。

实现原理&＃xff1a;

1. 利用鼠标左键进行绘制点&＃xff0c;再通过最佳路径分析功能得出每个点到前一个点的最近线路&＃xff0c;并记录分析出线路的NodeFeature。
2. 利用双击事件结束绘制&＃xff0c;并分析出最后一条线路&＃xff0c;记录NodeFeature。
3. 通过NodeFeature构造出几何面对象。

开发准备&＃xff1a;

沿路画面功能的呈现与实现&＃xff0c;需要iServer发布网络分析服务以及SuperMap iClient for OpenLayers

1. iServer发布网络分析服务&＃xff0c;具体可参考iServer在线帮助文档 地址&＃xff1a;http://support.supermap.com.cn/DataWarehouse/WebDocHelp/iServer/index.htm.
2. SuperMap iClient for OpenLayers产品开发指南 地址&＃xff1a;
   http://iclient.supermap.io/web/introduction/openlayersDevelop.html.

基于iClient for OpenLayers实现沿路画面&＃xff1a;

为代码简洁实现利用CDN在线引入OpenLayers文件&＃xff0c;进行单网页的开发。
具体步骤如下&＃xff1a;

1. 引入js库

<link href&＃61;"https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" rel&＃61;"stylesheet" />
<link href&＃61;&＃39;http://iclient.supermap.io/dist/openlayers/iclient9-openlayers.min.css&＃39; rel&＃61;&＃39;stylesheet&＃39; />
<script type&＃61;"text/Javascript" src&＃61;"https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script type&＃61;"text/Javascript" src&＃61;"http://iclient.supermap.io/dist/openlayers/iclient9-openlayers.min.js"></script>

2. 加载地图

//加载地图new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {var mapJSONObj &＃61; serviceResult.result;map &＃61; new ol.Map({target: &＃39;map&＃39;,controls: ol.control.defaults({attributionOptions: {collapsed: false}}).extend([new ol.supermap.control.Logo()]),view: new ol.View({center: [5105, -3375],zoom: 1,projection: projection,origin: [48.4, -55.58]})});var layer &＃61; new ol.layer.Tile({source: new ol.source.TileSuperMapRest(ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj))});map.addLayer(layer);});

3. 添加交互控件&＃xff0c;绘制点图形

//创建交互控件画点&＃xff0c;同时通过count变量监听点击的次数&＃xff0c;以此改变鼠标hover的test内容样式draw &＃61; new ol.interaction.Draw({source: vector_source,type: "Point",snapTolerance: 20,style:function(e){if(count&＃61;&＃61;0){return new ol.style.Style({text:new ol.style.Text({text:""})})}else if(count&＃61;&＃61;1){return new ol.style.Style({text:new ol.style.Text({text:"点击左建继续画区",padding:[3,3,3,3],backgroundFill:new ol.style.Fill({color:"rgba(87, 86, 86,0.45)"}),textAlign:"left",font:"bold 12px red"})})}else {return new ol.style.Style({text:new ol.style.Text({text:"点击确定地点&＃xff0c;双击结束",backgroundFill:new ol.style.Fill({color:"rgba(87, 86, 86,0.45)"}),textAlign:"left",padding:[3,3,3,3],font:"bold 12px red"})})}}});map.addInteraction(draw); //向地图添加交互控件map.on("dblclick",dblick); //注册地图鼠标双击事件draw.on("drawstart",function(){count&＃61;count&＃43;1; //点击一次增加count数});

4. 获取绘制点的几何对象存入pointlist数组并进行最近路径分析

draw.on("drawend",function(e){//获取绘制点的几何对象&＃xff0c;并存入数组pointlist.push(new ol.geom.Point(e.feature.getGeometry().A));if(pointlist.length>1){console.log(pointlist[pointlist.length-2],pointlist[pointlist.length-1],"1");create_road(pointlist[pointlist.length-2],pointlist[pointlist.length-1]) //分析每个点到前一个点的最近线路}})

5. 最佳路径分析的实现方法的定义&＃xff0c;同时将每次分析出来的路径的nodefeature存入到数组中供构造面对象时使用

//设置最佳路径分析参数信息var resultSetting &＃61; new SuperMap.TransportationAnalystResultSetting({returnEdgeFeatures: true,returnEdgeGeometry: true,returnEdgeIDs: true,returnNodeFeatures: true,returnNodeGeometry: true,returnNodeIDs: true,returnPathGuides: true,returnRoutes: true});var analystParameter &＃61; new SuperMap.TransportationAnalystParameter({resultSetting: resultSetting,weightFieldName: "SmLength"});var findPathParameter &＃61; new SuperMap.FindPathParameters({isAnalyzeById: false,nodes: [one,two], //传入绘制点node参数hasLeastEdgeCount: false,parameter: analystParameter});new ol.supermap.NetworkAnalystService(serviceUrl).findPath(findPathParameter, function (serviceResult) {//分析出线路并在前端进行渲染显示console.log(serviceResult.result,"serviceResult.result");line_source&＃61;new ol.source.Vector({wrapX: false});var line_layer &＃61; new ol.layer.Vector({source: line_source});map.addLayer(line_layer)//将分析出来组成线路的NodeFeature存入数组serviceResult.result.pathList.map(function(value){console.log((new ol.format.GeoJSON()).readFeatures(value.route),"value.route");line_source.addFeatures((new ol.format.GeoJSON()).readFeatures(value.route));console.log(value,"va")console.log(value.nodeFeatures.features.length)for(var i&＃61;0;i<value.nodeFeatures.features.length;i&＃43;&＃43;){ console.log(value.nodeFeatures.features[i].geometry.coordinates)polygon_point.push(value.nodeFeatures.features[i].geometry.coordinates) }}); })

6. 定义双击事件&＃xff0c;结束绘制&＃xff0c;构造面对象

var dblick&＃61;function(){console.log(pointlist[0],pointlist[pointlist.length-1],"dbclick");create_road(pointlist[0],pointlist[pointlist.length-1]);//进行最后一次的路径分析vector_source.clear();//清除点矢量图层clearInteraction();//移除交互控件setTimeout(() &＃61;> {//构造面对象并进行展示console.log(polygon_point,"polygon_point")// polygon_point.push(polygon_point[0])var polygon &＃61; new ol.geom.Polygon([polygon_point]);console.log(polygon,"polygon")var polygonSource &＃61; new ol.source.Vector({features: [new ol.Feature(polygon)],wrapX: false});var polygon_layer&＃61;new ol.layer.Vector({source: polygonSource,style: new ol.style.Style({stroke: new ol.style.Stroke({color: &＃39;red&＃39;,width: 3}),fill: new ol.style.Fill({color: &＃39;rgba(0, 0, 255, 0.1)&＃39;})})});map.addLayer(polygon_layer)}, 2000);
}

效果展示

以上就是实现沿路画面功能的所有内容。
源码及所需数据下载地址&＃xff1a;https://github.com/leondekill/Along-the-street-draw-the-area.