一、封装 zd_docEdit_Line.js

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

二、使用

  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/es6_LineString.js"></script>
  11. </head>
  12. <body>
  13.     <button onclick="activeDraw()">激活画笔</button>
  14.     <div id="map_container">
  15.     </div>
  16. <script>
  17.     var docLayer = new Zondy.Map.Doc('','city_area',{
  18.         ip:"localhost",
  19.         port:6163
  20.     })
  21.     var map = new ol.Map({
  22.         target:"map_container",
  23.         layers:[gaodeMapLayer],
  24.         view:new ol.View({
  25.             projection:'EPSG:4326',
  26.             center:[114.30,30.50],
  27.             zoom:4
  28.         })
  29.     })
  30.     map.addLayer(docLayer)
  31.     /* 1、创建画布 */
  32.     var source = new ol.source.Vector({wrapX:false})
  33.     var layer = new ol.layer.Vector({source})
  34.     map.addLayer(layer)
  35.     /* 2、激活画笔 */
  36.     let draw = null;
  37.     function activeDraw(){
  38.         draw = createDraw({
  39.             type:"LineString",
  40.             source,
  41.             callback:handleDraw
  42.         })
  43.         map.addInteraction(draw);
  44.     }
  45.     function handleDraw(e){
  46.         var position = e.feature.getGeometry().getCoordinates();
  47.         var layer = docLayer;
  48.         var attr = [
  49.             {name:"name",value:"随机",type:"string"},
  50.             {name:"length",value:2000,type:"int"}
  51.             ]
  52.         var service = {name:"city_area",layerId:1}
  53.         LineString.add({
  54.             position,
  55.             layer,
  56.             attr,
  57.             service
  58.         })
  59.     }
  60. </script>
  61. </body>
  62. </html>