一、函数封装添加线

  1. const LINE_STYLE = {
  2.     Color: 1, //子图的颜色号
  3.     LinStyleID: 0,
  4.     LinStyleID2: 19,
  5.     LinWidth: 0.1, //线宽
  6.     Xscale: 10,
  7.     Yscale: 10
  8. }
  9. /**
  10.  * 
  11.  * @param {Array} position 
  12.  * @param {array} attr
  13.  * @param {object} service {name,layerId}
  14.  */
  15. function addLineString({
  16.     position,
  17.     attr,
  18.     service,
  19.     layer
  20. }) {
  21.     /* 2.1 构建几何信息 */
  22.     var pointObj = []
  23.     for(let item of position){
  24.             pointObj.push(new Zondy.Object.Point2D(item[0],item[1]))
  25.     }
  26.     /* 构成折线的弧度 */
  27.     var gArc = new Zondy.Object.Arc(pointObj);
  28.     /* 构成线的折线 */
  29.     var gAnyLine = new Zondy.Object.AnyLine([gArc])
  30.     /* 设置线要素的几何信息 */
  31.     var gLine = new Zondy.Object.GLine(gAnyLine)
  32.     /* 设置要素的几何信息 */
  33.     var fGeom = new Zondy.Object.FeatureGeometry({
  34.         LinGeom: [gLine]
  35.     })
  36.     /* 2.2 设置而样式信息 */
  37.     //设置添加线要素的图形参数信息
  38.     var clineInfo = new Zondy.Object.CLineInfo(LINE_STYLE)
  39.     //设置要素的图形参数
  40.     var graphicInfo = new Zondy.Object.WebGraphicsInfo({
  41.         InfoType: 2, //线
  42.         LinInfo: clineInfo
  43.     })
  44.     /* 2.3 设置属性信息 */
  45.     var attValue = attr.map(item => item.value)
  46.     /* 2.4  构建要素类*/
  47.     //创建一个线要素
  48.     var newFeature = new Zondy.Object.Feature({
  49.         fGeom: fGeom,
  50.         GraphicInfo: graphicInfo,
  51.         AttValue: attValue
  52.     })
  53.     //设置要为线要素
  54.     newFeature.setFType(2)
  55.     /* 2.5 设置要素集 */
  56.     //创建一个要素数据集
  57.     var featureSet = new Zondy.Object.FeatureSet();
  58.     //创建属性结构设置对象
  59.     var cAttStruct = new Zondy.Object.CAttStruct({
  60.         FldName: attr.map(item => item.name),
  61.         FldNumber: attr.length,
  62.         FldType: attr.map(item => item.type)
  63.     })
  64.     //设置要素数据集的属性结构
  65.     featureSet.AttStruct = cAttStruct;
  66.     //将添加的线要素添加到属性数据集中
  67.     featureSet.addFeature(newFeature);
  68.     /* 2.6 调用地图编辑服务接口 */
  69.     //创建一个地图编辑对象
  70.     var editDocFeature = new Zondy.Service.EditDocFeature(service.name, service.layerId, {
  71.         ip: 'localhost',
  72.         port: '6163'
  73.     })
  74.     editDocFeature.add(featureSet, onLineSuccess(layer))
  75. }
  77. function onLineSuccess(layer) {
  78.     return function (data) {
  79.         if (data.succeed) {
  80.             alert('添加成功')
  81.             layer.refresh(); //重新加载地图文档
  82.         } else {
  83.             alert('添加点要素失败')
  84.         }
  85.     }
  86. }

二、使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <script src="./dist/include-openlayers-local.js"></script>
  8.     <script src="./js/TIAN.js"></script>
  9.     <script src="./js/Draw.js"></script>
  10.     <script src="./edit/addLine.js"></script>
  11. </head>
  12. <body>
  13.     <button onclick="addLine()">添加画笔</button>
  14.     <button onclick="exit()">退出</button>
  15.     <div id="map_container">
  16.     </div>
  17. <script>
  18.     var docLayer = new Zondy.Map.Doc('','city_area',{
  19.         ip:"localhost",
  20.         port:6163
  21.     })
  22.     var map = new ol.Map({
  23.         target:"map_container",
  24.         layers:[gaodeMapLayer,docLayer],
  25.         view:new ol.View({
  26.             projection:'EPSG:4326',
  27.             center:[114.30,30.50],
  28.             zoom:4
  29.         })
  30.     })
  31.     /* 1、创建画布 */
  32.     var source = new ol.source.Vector({wrapX:false})
  33.     var layer = new ol.layer.Vector({source})
  34.     map.addLayer(layer)
  35.     let draw = null;
  36.     /* 2、添加画笔 */
  37.     function addLine(){
  38.         draw = createDraw({
  39.             type:"LineString",
  40.             source,
  41.             callback:handleDraw
  42.         })
  43.         map.addInteraction(draw);
  44.     }
  45.     function handleDraw(e){
  46.         console.log(e);
  47.     }
  48.     function exit(){
  49.         map.removeInteraction(draw);
  50.         draw = null;
  51.     }
  52.     function handleDraw(e){
  53.         var position = e.feature.getGeometry().getCoordinates();
  54.         var layer = docLayer;
  55.         var attr = [
  56.             {name:"name",value:"新增",type:"string"},
  57.             {name:"length",value:2000,type:"int"}
  58.         ]
  59.         var service = {name:"city_area",layerId:1};
  60.         addLineString({
  61.             position,
  62.             layer,
  63.             attr,
  64.             service
  65.         })
  66.     }
  67. </script>
  68. </body>
  69. </html>