image.png

Tips: var position = e.feature.getGeometry().getCoordinates()[0]; //此处数组一定要加下标0,不然会出很大的问题❗

一、封装 zd_docEdit_Polygon.js

  1. const AREA_STYLE = {
  2.     EndColor: 1,
  3.     FillColor: 26,
  4.     FillMode: 0,
  5.     OutPenWidth: 1,
  6.     OverMethod: 0,
  7.     PatAngle: 1,
  8.     PatColor: 1,
  9.     PatHeight: 1,
  10.     PatID: 27,
  11.     PatWidth: 1
  12. }
  13. const HOST = 'localhost';
  14. const PORT = 6163;
  15. /**
  16.  * @param {array} position  坐标是一个二维数据
  17.  * @param {array} attr  [{name,value,type}]
  18.  * @param {object} service {name,layerId}
  19.  */
  20. class Polygon {
  21.     static add({
  22.         position,
  23.         layer,
  24.         attr,
  25.         service
  26.     }) {
  27.         //[[x1,y1],[x2,y2]]
  28.         /* 1、构建区要素 */
  29.         //1-1、构建几何信息
  30.         console.log(position)
  31.         var pointObj = [];
  32.         for (let item of position) {
  33.             pointObj.push(new Zondy.Object.Point2D(item[0], item[1]))
  34.         }
  35.         //构成区要素的弧段
  36.         var gArc = new Zondy.Object.Arc(pointObj);
  37.         //构成区要素折线
  38.         var gAnyLine = new Zondy.Object.AnyLine([gArc]);
  39.         //构成区要素
  40.         var gRegion = new Zondy.Object.GRegion([gAnyLine]);
  41.         //构成区要素的几何信息
  42.         var fGeom = new Zondy.Object.FeatureGeometry({
  43.             RegGeom: [gRegion]
  44.         })
  45.         //1-2、设置图形参数信息
  46.         //设置区要素的图形参数信息
  47.         var cRegionInfo = new Zondy.Object.CRegionInfo(AREA_STYLE);
  48.         //要素图形参数信息
  49.         var graphicInfo = new Zondy.Object.WebGraphicsInfo({
  50.             InfoType: 3,
  51.             RegInfo: cRegionInfo
  52.         });
  53.         //1-3、设置区要素的属性信息
  54.         var attValue = attr.map(item => item.value);
  55.         //创建一个新的区要素
  56.         var newFeature = new Zondy.Object.Feature({
  57.             AttValue: attValue,
  58.             fGeom: fGeom,
  59.             GraphicInfo: graphicInfo
  60.         });
  61.         newFeature.setFType(3);
  63.         /* 2、创建一个要素数据集 */
  64.         var featureSet = new Zondy.Object.FeatureSet();
  65.         var fldNumber = attr.length;
  66.         var fldType = attr.map(item => item.type);
  67.         var fldName = attr.map(item => item.name);
  68.         var cAttValue = new Zondy.Object.CAttStruct({
  69.             FldNumber: fldNumber,
  70.             FldType: fldType,
  71.             FldName: fldName
  72.         });
  73.         featureSet.AttStruct = cAttValue;
  74.         featureSet.addFeature(newFeature);
  75.         //创建一个图层编辑对象
  76.         var editLayerFeature = new Zondy.Service.EditDocFeature(service.name, service.layerId, {
  77.             ip: service.host || HOST,
  78.             port: service.port || PORT
  79.         })
  80.         editLayerFeature.add(featureSet, this.onPloySuccess(layer), this.onError);
  81.     }
  83.     //添加区要素回调函数
  84.     static onPloySuccess(layer) {
  85.         return function (data) {
  86.             if (data.succeed) {
  87.                 alert("添加区要素成功！");
  88.                 layer.refresh();
  89.             } else {
  90.                 alert("添加区要素失败！");
  91.             }
  92.         }
  93.     }
  94.     static onError(error) {
  95.         console.log(error);
  96.     }
  97. }

二、例子

  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_Polygon.js"></script>
  11. </head>
  12. <body>
  13.     <button onclick="activeDraw()">激活画笔</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.     /* 2、添加画笔 */
  36.     let draw = null;
  37.     function activeDraw(){
  38.         draw = createDraw({
  39.             type:"Polygon",
  40.             source,
  41.             callback:handleDraw
  42.         })
  43.         map.addInteraction(draw)
  44.     }
  45.     function handleDraw(e){
  46.         var position = e.feature.getGeometry().getCoordinates()[0];
  47.         var layer = docLayer;
  48.         var attr = [
  49.             {name:"name",value:"园区",type:"string"},
  50.             {name:"area",value:1000,type:"long"},
  51.             {name:"num",value:2000,type:"long"}
  52.         ]
  53.         var service = {name:"city_area",layerId:0};
  54.         Polygon.add({
  55.             position,
  56.             layer,
  57.             attr,
  58.             service
  59.         })
  60.     }
  62.     function exit(){
  63.         map.removeInteraction(draw);
  64.         draw = null;
  65.     }
  66. </script>
  67. </body>
  68. </html>