一、步骤

  • 1、通过MapGIS创建点要素地图文档
  • 2、通过ServerManager发布
  • 3、通过web显示
  • 4、调用中地接口
    • 1、中地几何信息
    • 2、中地图形信息
    • 3、中地属性信息
    • 4、根据（几何信息+图形信息+属性信息）构成要素对象
    • 5、创建要素集，将新创建的要素添加到要素集中
    • 6、创建地图编辑服务

      二、相关接口

1-1、添加点要素 - 图1

三、例子

3-1、 使用MapGIS中的点要素添加四个点

点要素包含name字段

  1. 北京  116.30    39.90
  2. 武汉  114.30  30.60
  3. 广州    112.57    22.26
  4. 成都    104.07    30.67

3-2、 保存地图文档

image.png

3-3 、使用IGServer进行发布

image.png

Tips:倘若显示不出来，只需要将名称更改一下就可以了。

3-4、JS通过点击事件,添加一个点

  1. var gaode = new ol.layer.Tile({
  2.   title: "高德地图",
  3.   source: new ol.source.XYZ({
  4.     url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
  5.     wrapX: false
  6.   })
  7. });
  1. <body>
  2.     <button onclick="addPoint()">添加点要素到数据库</button>
  3.     <div id="map_container">
  4.     </div>
  5.     <script>
  6.         var map = new ol.Map({
  7.             target: "map_container",
  8.             layers: [gaodeMapLayer],
  9.             view: new ol.View({
  10.                 projection: 'EPSG:4326',
  11.                 center: [114.30, 30.50],
  12.                 zoom: 4
  13.             })
  14.         })
  15.         var cityLayer = new Zondy.Map.Doc('', 'city', {
  16.             ip: 'localhost',
  17.             port: 6163
  18.         })
  19.         map.addLayer(cityLayer)
  20.         /* 1、创建点要素 -几何,样式,属性 */
  21.         function addPoint() {
  22.             //1-1、构建要素的几何信息
  23.             //描述构成MapGIS点要素的空间几何信息
  24.             var gPoint = new Zondy.Object.GPoint(120.52, 30.40)
  25.             //设置点要素几何图形信息类
  26.             var fGeom = new Zondy.Object.FeatureGeometry({
  27.                 PntGeom: [gPoint]
  28.             })
  29.             //1-2、设置样式信息
  30.             var pointInfo = new Zondy.Object.CPointInfo({
  31.                 Angle: 0, //角度
  32.                 Color: 2,  //子图的颜色
  33.                 Space: 0,
  34.                 SymHeight: 5, //点的高度
  35.                 SymID: 31, //子图号
  36.                 SymWidth: 5 //点的宽度
  37.             })
  38.             //设置当前点要素的图形参数信息
  39.             var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
  40.                 InfoType: 1, //点
  41.                 PntInfo: pointInfo
  42.             })
  43.             //1-3、设置属性信息
  44.             var attValue = ["上海"]
  45.             /* 2、构建要素对象 */
  46.             var feature = new Zondy.Object.Feature({
  47.                 fGeom: fGeom, //几何
  48.                 GraphicInfo: webGraphicInfo, //样式
  49.                 AttValue: attValue //属性
  50.             })
  51.             //设置要素的类型 1点 2线  3面
  52.             feature.setFType(1)
  53.             /* 3、设置要素集添加要素 */
  54.             var featureSet = new Zondy.Object.FeatureSet();
  55.             //设置属性结构
  56.             var cAttStruct = new Zondy.Object.CAttStruct({
  57.                 FldName: ["name"],
  58.                 FldNumber: 1,
  59.                 FldType: ["string"]
  60.             })
  61.             featureSet.AttStruct = cAttStruct;
  62.             featureSet.addFeature(feature)
  63.             /* 4、调用编辑服务接口 */
  64.             /* 创建一个编辑服务类
  65.             第一个参数:服务的名称 第二个参数:服务的图层
  66.              */
  67.             var editService = new Zondy.Service.EditDocFeature('city', 0, {
  68.                 ip: 'localhost',
  69.                 port: 6163
  70.             })
  71.             //执行添加点要素集
  72.             editService.add(featureSet, onPntSuccess)
  74.         }
  76.         function onPntSuccess(data) {
  77.             if (data.succeed) {
  78.                 alert('添加成功')
  79.                 cityLayer.refresh(); //重新加载地图文档
  80.             } else {
  81.                 alert('添加点要素失败')
  82.             }
  83.         }
  84.     </script>
  85. </body>