一、创建一个区

1-1、创区要素

image.png

1-2、以武汉为中心,创建一个区域

image.png
之后再IGServer中发布

二、点击事件，添加区要素

  2. <body>
  3.     <!-- 2、创建地图容器 -->
  4.     <button onclick="addPolygon()">添加</button>
  5.     <div id="map_container">
  6.     </div>
  7.     <!-- 3、实例化对象 -->
  9.     <script>
  10.         const docLayer = new Zondy.Map.Doc('', 'city', {
  11.             ip: 'localhost',
  12.             port: 6163
  13.         })
  14.         const map = new ol.Map({
  15.             target: 'map_container',
  16.             layers: [gaode, docLayer],
  17.             view: new ol.View({
  18.                 projection: 'EPSG:4326',
  19.                 center: [114, 30],
  20.                 zoom: 4
  21.             })
  22.         })
  23.         function addPolygon(){
  24.             /* 2.1 构建几何信息 */
  25.             var pointObj = [];
  26.             pointObj[0] = new Zondy.Object.Point2D(99.41,35.88);
  27.             pointObj[1] = new Zondy.Object.Point2D(99.41,26.82);
  28.             pointObj[2] = new Zondy.Object.Point2D(108,26.82);
  29.             pointObj[3] = new Zondy.Object.Point2D(108,35.88);
  30.             //设置区要素的几何信息
  31.             var gArc = new Zondy.Object.Arc(pointObj)
  32.             //构成区要素折线
  33.             var gAnyLine = new Zondy.Object.AnyLine([gArc])
  34.             //构成区要素
  35.             var gRegion = new Zondy.Object.GRegion([gAnyLine])
  36.             //构成区要素的几何信息
  37.             var fGeom = new Zondy.Object.FeatureGeometry({RegGeom:[gRegion]})
  38.             /* 2.2 设置样式信息 */
  39.             var cRegionInfo = new Zondy.Object.CRegionInfo({
  40.                 EndColor:1,
  41.                 FillColor:21,
  42.                 FillMode:0,
  43.                 OutPenWidth:1,
  44.                 OverMethod:0,
  45.                 PatAngle:1,
  46.                 PatColor:1,
  47.                 PatHeight:1,
  48.                 PatID:27,
  49.                 PatWidth:1
  50.             })
  51.             var graphicInfo = new Zondy.Object.WebGraphicsInfo({
  52.                 InfoType:3,  //区
  53.                 RegInfo:cRegionInfo
  54.             })
  55.             /* 2.3 设置属性信息 */
  56.             //设置区要素的属性信息
  57.             var attValue = ["西南军区",100,800]
  58.             /* 2.4 构建区要素对象 */
  59.             //创建一个新的区要素
  60.             var newFeature = new Zondy.Object.Feature({
  61.                 fGeom:fGeom,
  62.                 GraphicInfo:graphicInfo,
  63.                 AttValue:attValue
  64.             })
  65.             newFeature.setFType(3)
  66.             /* 2.5 设置要素集 */
  67.             var featureSet = new Zondy.Object.FeatureSet()
  68.             var cAttValue = new Zondy.Object.CAttStruct({
  69.                 FldNumber:3,
  70.                 FldType:['string','float','int'],
  71.                 FldName:['name','area','num']
  72.             })
  73.             featureSet.AttStruct = cAttValue;
  74.             featureSet.addFeature(newFeature)
  75.             /* 2.6调用地图编辑服务接口 */
  76.             //创建一个要素编辑服务对象
  77.             var editDocFeature = new Zondy.Service.EditDocFeature(
  78.                 'city',
  79.                 0,
  80.                 {
  81.                     ip:'localhost',
  82.                     port:'6163'
  83.                 }
  84.             )
  85.             editDocFeature.add(featureSet,onSuccess)
  88.         }
  89.         function onSuccess(data) {
  90.             if (data.succeed) {
  91.                 alert('添加成功')
  92.                 docLayer.refresh(); //重新加载地图文档
  93.             } else {
  94.                 alert('添加点要素失败')
  95.             }
  96.         }
  97.     </script>
  98. </body>