一、es6封装点

  1. /* es6封装添加点 */
  2. const POINT_STYLE = {
  3.     Angle: 0,
  4.     Color: 2, //子图的颜色
  5.     Space: 0,
  6.     SymHeight: 5, //点的高度
  7.     SymID: 31,
  8.     SymWidth: 5 //点的宽度
  9. }
  10. const HOST = 'localhost';
  11. const PORT = 6163;
  12. /**
  13.  * @param {object} service  {name,layerId,host,port}
  14.  */
  15. class Point {
  16.     static add({position,attr,layer,service}) {
  17.         /* 2.1构建几何信息 */
  18.         /* 创建一个点形状,描述点形状的几何信息 */
  19.         var gpoint = new Zondy.Object.GPoint(position[0], position[1])
  20.         /* 设置当前点要素的几何信息 */
  21.         var fGeom = new Zondy.Object.FeatureGeometry({
  22.             PntGeom: [gpoint]
  23.         })
  24.         /* 2.2 设置样式信息 */
  25.         var pointInfo = new Zondy.Object.CPointInfo(POINT_STYLE)
  26.         /* 设置当点要素的图形参数信息 */
  27.         var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
  28.             InfoType: 1, //点
  29.             PntInfo: pointInfo
  30.         })
  31.         /* 2.3 设置属性信息 */
  32.         /* 设置添加点要素的属性信息 */
  33.         var attValue = attr.map(item => item.value)
  34.         /* 2.4  构建要素对象 */
  35.         var feature = new Zondy.Object.Feature({
  36.             fGeom: fGeom, //坐标--几何信息
  37.             GraphicInfo: webGraphicInfo, //样式信息
  38.             AttValue: attValue //属性
  39.         })
  40.         /* 设置要素为点要素 
  41.         点 -->1
  42.         线 -->2
  43.         面 -->3
  44.         */
  45.         feature.setFType(1)
  46.         /* 2.5 设置要素集 */
  47.         //创建一个要素数据集
  48.         var featureSet = new Zondy.Object.FeatureSet()
  49.         /* 设置属性结构 */
  50.         var cAttStruct = new Zondy.Object.CAttStruct({
  51.             FldName: attr.map(item => item.name), //属性的字段名
  52.             FldNumber: attr.length, //属性的个数
  53.             FldType: attr.map(item => item.type) //属性的类型
  54.         })
  55.         featureSet.AttStruct = cAttStruct
  56.         /* 添加要素到要素数据集 */
  57.         featureSet.addFeature(feature)
  58.         /* 2.6 调用编辑服务接口 */
  59.         /* 
  60.         创建一个编辑服务类 
  61.         第一个参数：服务的名称 第二参数：图层的名称
  62.         */
  63.         var editService = new Zondy.Service.EditDocFeature(service.name, service.layerId, {
  64.             ip: service.host || HOST,
  65.             port: service.port || PORT //访问IGServer的端口号, .net为6163,Java为8089
  66.         })
  67.         //执行添加点要素功能
  68.         editService.add(featureSet, this.onPntSuccess(layer))
  69.     }
  70.     static onPntSuccess(layer){
  71.         return function (data){
  72.             if (data.succeed) {
  73.                 alert("添加成功!")
  74.                 layer.refresh() //重新加载地图文档
  75.             } else {
  76.                 alert("添加失败")
  77.             }
  78.         }
  79.     }
  80. }

二、使用

  1. <body>
  2.     <button onclick="Draw()">添加画笔</button>
  3.     <button onclick="exit()">移除画笔</button>
  4.     <div id="map_container">
  5.     </div>
  6.     <script>
  7.         var docLayer = new Zondy.Map.Doc('',"city_area",{
  8.             ip:"localhost",
  9.             port:6163
  10.         })
  11.         var map = new ol.Map({
  12.             target: "map_container",
  13.             layers: [gaodeMapLayer,docLayer],
  14.             view: new ol.View({
  15.                 projection: 'EPSG:4326',
  16.                 center: [114.30, 30.50],
  17.                 zoom: 4
  18.             })
  19.         })
  20.         /* 1、创建画布 */
  21.         var source = new ol.source.Vector({
  22.             wrapX: false
  23.         });
  24.         var layer = new ol.layer.Vector({
  25.             source
  26.         })
  27.         map.addLayer(layer);
  28.         /* 2、添加画笔 */
  29.         let draw = null;
  31.         function Draw() {
  32.             draw = createDraw({
  33.                 type: "Point",
  34.                 source,
  35.                 callback: handleDraw
  36.             });
  37.             map.addInteraction(draw);
  38.         }
  40.         function exit() {
  41.             map.removeInteraction(draw);
  42.             draw = null;
  43.         }
  45.         function handleDraw(e) {
  46.             var position = e.feature.getGeometry().getCoordinates();
  47.             console.log(position)
  48.             var attr = [{
  49.                 name: "name",
  50.                 value: "武汉",
  51.                 type: "string"
  52.             }];
  53.             var service = {
  54.                 name: "city_area",
  55.                 layerId: 2
  56.             }
  57.             Point.add({
  58.                 position,
  59.                 layer: docLayer,
  60.                 attr,
  61.                 service
  62.             })
  63.         }
  64.     </script>