业务

  1. 1、通过交互式的画笔获取点的坐标
  2. 2、调用编辑服务,添加点

一、draw.js

封装的交互式绘制

  3. /**
  4.  *
  5.  *
  6.  * @param {Function} callback 
  7.  * @param {Point,LineString,Circle,Polygon,Square,Rectangle} type
  8.  */
  10. function createDraw({
  11.     source,
  12.     type = "Point",
  13.     callback
  14. }) {
  15.     let draw = null;
  16.     let geometryFunction = null;
  17.     let maxPoints = 0;
  18.     if (type == "Square") {
  19.         type = "Circle";
  20.         geometryFunction = ol.interaction.Draw.createRegularPolygon(4)
  21.     } else if (type == "Rectangle") {
  22.         type = "LineString";
  23.         geometryFunction = function (coordinates, geometry) {
  24.             if (!geometry) {
  25.                 //多边形
  26.                 geometry = new ol.geom.Polygon(null)
  27.             }
  28.             var start = coordinates[0]
  29.             var end = coordinates[1]
  30.             geometry.setCoordinates([
  31.                 [start, [start[0], end[1]], end, [end[0], start[1]], start],
  32.             ])
  33.             return geometry
  34.         }
  35.         maxPoints = 2;
  36.     }
  37.     draw = new ol.interaction.Draw({
  38.         source,
  39.         type,
  40.         geometryFunction,
  41.         maxPoints
  42.     })
  43.     callback && draw.on("drawend",callback)
  44.     return draw;
  45. }

二、addPoint.js

封装点—> 编辑地图

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

三、演示代码

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