一、没有封装

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <!-- 1、加载ol库 -->
  10.     <script src="../lib/include-openlayers-local.js"></script>
  11.     <script src="../js/Gaode.js"></script>
  12.   </head>
  14.   <body>
  15.     <!-- 2、创建地图容器 -->
  16.     <button onclick="addPoint()">添加</button>
  17.     <div id="map_container">
  19.     </div>
  20.     <!-- 3、实例化对象 -->
  22.     <script>
  23.       const docLayer = new Zondy.Map.Doc('', 'city', {
  24.         ip: 'localhost',
  25.         port: 6163
  26.       })
  27.       const map = new ol.Map({
  28.         target: 'map_container',
  29.         layers: [gaode, docLayer],
  30.         view: new ol.View({
  31.           projection: 'EPSG:4326',
  32.           center: [114, 30],
  33.           zoom: 4
  34.         })
  35.       })
  36.       /* 添加一个点到数据库 */
  37.       function addPoint() {
  38.         /* 2.1构建几何信息 */
  39.         /* 创建一个点形状,描述点形状的几何信息 */
  40.         var gpoint = new Zondy.Object.GPoint(120.52, 30.40)
  41.         /* 设置当前点要素的几何信息 */
  42.         var fGeom = new Zondy.Object.FeatureGeometry({
  43.           PntGeom: [gpoint]
  44.         })
  45.         /* 2.2 设置样式信息 */
  46.         var pointInfo = new Zondy.Object.CPointInfo({
  47.           Angle: 0,
  48.           Color: 2,  //子图的颜色
  49.           Space: 0,
  50.           SymHeight: 5, //点的高度
  51.           SymID: 31,
  52.           SymWidth: 5 //点的宽度
  53.         })
  54.         /* 设置当点要素的图形参数信息 */
  55.         var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
  56.           InfoType: 1, //点
  57.           PntInfo: pointInfo
  58.         })
  59.         /* 2.3 设置属性信息 */
  60.         /* 设置添加点要素的属性信息 */
  61.         var attValue = ['上海', '1005']
  62.         /* 2.4  构建要素对象 */
  63.         var feature = new Zondy.Object.Feature({
  64.           fGeom: fGeom, //坐标--几何信息
  65.           GraphicInfo: webGraphicInfo, //样式信息
  66.           AttValue: attValue //属性
  67.         })
  68.         /* 设置要素为点要素 
  69.         点 -->1
  70.         线 -->2
  71.         面 -->3
  72.         */
  73.         feature.setFType(1)
  74.         /* 2.5 设置要素集 */
  75.         //创建一个要素数据集
  76.         var featureSet = new Zondy.Object.FeatureSet()
  77.         /* 设置属性结构 */
  78.         var cAttStruct = new Zondy.Object.CAttStruct({
  79.           FldName: ['name', 'id'], //属性的字段名
  80.           FldNumber: 2, //属性的个数
  81.           FldType: ['string', 'string'] //属性的类型
  82.         })
  83.         featureSet.AttStruct = cAttStruct
  84.         /* 添加要素到要素数据集 */
  85.         featureSet.addFeature(feature)
  86.         /* 2.6 调用编辑服务接口 */
  87.         /* 
  88.         创建一个编辑服务类 
  89.         第一个参数：服务的名称 第二参数：图层的名称
  90.         */
  91.         var editService = new Zondy.Service.EditDocFeature('city', 0, {
  92.           ip: 'localhost',
  93.           port: '6163' //访问IGServer的端口号, .net为6163,Java为8089
  94.         })
  95.         //执行添加点要素功能
  96.         editService.add(featureSet, onPntSuccess)
  97.       }
  99.       function onPntSuccess(data) {
  100.         if (data.succeed) {
  101.           alert('添加成功')
  102.           docLayer.refresh(); //重新加载地图文档
  103.         } else {
  104.           alert('添加点要素失败')
  105.         }
  106.       }
  107.     </script>
  108.   </body>
  110. </html>

二、封装

分析变化的参数

  • 1、经纬度
  • 2、图层名称
  • 3、属性参数
  • 4、服务信息 ```javascript const POINT_STYLE = { Angle: 0, Color: 11, Space: 0, SymHeight: 10, SymID: 31, SymWidth: 10 } /**
    • @param {array} position 坐标
    • @param {string} layer 图层的名称
    • @param {array} attr [{key:”name”,value:”武汉”,type:”string”}]
    • @param {object} service {name,layerId) */ function addPoint({ position, layer, attr, service }) { //1-1、设置几何信息 var gpoint = new Zondy.Object.GPoint(position[0], position[1]); var fGeom = new Zondy.Object.FeatureGeometry({
      1. PntGeom: [gpoint]
      }); //1-2、设置样式信息 //描述点要素的符号参数信息 var pointInfo = new Zondy.Object.CPointInfo(POINT_STYLE); //设置当前点要素的图形参数信息 var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
      1. InfoType: 1,
      2. PntInfo: pointInfo
      }); //1-3、属性信息 //设置添加点要素的属性信息 var attValue = attr.map(item => item.value); / 2、构建点要素 / //创建一个要素 var feature = new Zondy.Object.Feature({
      1. fGeom: fGeom,
      2. GraphicInfo: webGraphicInfo,
      3. AttValue: attValue
      }); //设置要素为点要素 feature.setFType(1); / 3、创建要素集 / //创建一个要素数据集 var featureSet = new Zondy.Object.FeatureSet(); //设置属性结构 var cAttStruct = new Zondy.Object.CAttStruct({
      1. FldName: attr.map(item => item.key),
      2. FldNumber: 1,
      3. FldType: attr.map(item => item.type)
      }); featureSet.AttStruct = cAttStruct; //添加要素到要素数据集 featureSet.addFeature(feature); / 4、调用服务 / //创建一个编辑服务类 var editService = new Zondy.Service.EditDocFeature(service.name, service.layerId, {
      1. ip: "localhost",
      2. port: 6163
      }); editService.add(featureSet, onPntSuccess(layer));

} //添加点要素回调函数 function onPntSuccess(layer) { return function (result) { if (result) { alert(“添加点要素成功！”); layer.refresh(); } else { alert(“添加点要素失败！”); } } }

  1. ```html
  2. <script>
  3.     var map = new ol.Map({
  4.         target:"map_container",
  5.         layers:[gaodeMapLayer],
  6.         view:new ol.View({
  7.             projection:'EPSG:4326',
  8.             center:[114.30,30.50],
  9.             zoom:4
  10.         })
  11.     })
  12.     var docLayer = new Zondy.Map.Doc('',"city_area",{
  13.         ip:"localhost",
  14.         port:6163
  15.     })
  16.     map.addLayer(docLayer)
  17.     /**
  18.  * 
  19.  * @param {array} position 坐标
  20.  * @param {array} attr [{key:"name",value:"武汉",type:"string"}] 
  21.  * @param {object} service {name,layerId,layer)
  22.  */
  23.   map.on('click',function(e){
  24.       var position = e.coordinate;
  25.       var attr = [{key:"name",value:"苏州",type:"string"}]
  26.       var service = { name:"city_area",layerId:2}
  27.       addPoint({
  28.           position,
  29.           layer:docLayer,
  30.           attr,
  31.           service
  32.       })
  33.   })
  34. </script>