基于IGServer的Web地图要素增删改查

1. 引言

MapGIS IGServer 是中地数码的一款跨平台GIS 服务器产品，提供了空间数据管理、分析、可视化及共享服务

MapGIS IGServer的下载（试用）地址：MapGIS IGServer Java for Windows (smaryun.com)

MapGIS IGServer 的 JavaScript API 文档：[IGS JavaScript API (smaryun.com)](http://develop.smaryun.com:81/API/JS/IGS JavaScript API v02/index.htm)

MapGIS IGServe与OpenLayers的集成示例：OpenLayers5示例 (smaryun.com)

官方示例的说明很详细，本文结合官方示例与API文档，基于OpenLayers和IGServer实现Web地图要素的增删改查

2. 环境搭建

笔者这里使用的是Java版的IGServer，版本号为10.6，详细的安装、试用步骤参考官网：

云帮助中心 (smaryun.com)

笔者这里使用的OpenLayers是MapGIS集成的MapGIS Client for JavaScript中的OpenLayers部分，其调用方式参考：

mapgis-webclient-javascript (smaryun.com)

笔者这里直接使用CDN引入：

<script src="http://develop.smaryun.com/static/libs/include-openlayers-local.js"></script>

这里使用CDN的是官方示例中的地址，上面网址：mapgis-webclient-javascript (smaryun.com)中的CDN地址似乎不可用

另外，还需要IGServer发布一个要素地图服务，用以进行要素的增删改查，笔者这里使用MapGIS Desktop新建一个点要素，另存为MapGIS地图文档，使用IGServer发布MapGIS地图文档

3. 地图加载

构建基础的HTML页面，使用OpenLayers加载底图，并使用中地数码的扩展包加载文档地图（DocLayer）

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <script src="http://develop.smaryun.com/static/libs/include-openlayers-local.js"></script>

  <style>

    html,

    body,

    #map {

      margin: 0;

      padding: 0;

      width: 100%;

      height: 100%;

    }

  </style>

</head>

<body>

  <div id="map"></div>

  <script>

    var map = new ol.Map({

      target: 'map',

      layers: [

        new ol.layer.Tile({

          name: "高德底图",

          source: new ol.source.XYZ({

            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'

          })

        })

      ],

      view: new ol.View({

        center: [120.9, 28.9],

        zoom: 4,

        projection: 'EPSG:4326'

      })

    })

    var docLayer = new Zondy.Map.Doc('', 'city', {

      ip: `127.0.0.1`,

      port: `8089`, //访问IGServer的端口号，.net版为6163，Java版为8089

    })

    map.addLayer(docLayer)

  </script>

</body>

</html>

关于中地数码扩展包的API的详细参数可以参考：[IGS JavaScript API (smaryun.com)](http://develop.smaryun.com:81/API/JS/IGS JavaScript API v02/index.htm#id_2)

加载的地图如下：

提示：

include-openlayers-local.js这个文件实质就是动态写入要加载的JS库，从下图中可以看出这个文件动态引入了哪些文件
由于动态写入资源链接，不一定能加载出来，所以控制台会有warning

4. 增加要素

参考官方的参考示例：点要素编辑

OpenLayers5示例 (smaryun.com)

增加一个点要素的流程为：

[创建要素]

创建一个点形状（Zondy.Object.GPoint对象），描述点形状的几何信息；
设置当前点要素的几何信息（Zondy.Object.FeatureGeometry对象）；
描述点要素的符号参数信息（Zondy.Object.CPointInfo对象）；
设置当前点要素的图形参数信息（Zondy.Object.WebGraphicsInfo对象）；
设置添加点要素的属性信息；
创建一个要素（Zondy.Object.Feature对象），并设置要素为点要素；
创建一个要素数据集（Zondy.Object.FeatureSet对象），设置属性结构（Zondy.Object.CAttStruct对象）；

[添加要素]

通过调用featureSet对象的addFeature（）方法将要素添加到要素数据集中；
创建一个编辑服务类（Zondy.Service.EditLayerFeature对象），调用编辑服务类的add方法执行添加要素功能

function addPoint() {

    //创建一个点形状，描述点形状的几何信息

    var gpoint = new Zondy.Object.GPoint(104.0627, 30.6607)

    //设置当前点要素的几何信息

    var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] })

    //设置点要素的图形信息

    var pointInfo = new Zondy.Object.CPointInfo({

        Angle: 0,

        Color: 5,

        SymHeight: 4,

        SymID: 31,

        SymWidth: 4,

    })

    //设置当前点要素的图形参数信息

    var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({

        InfoType: 1,

        PntInfo: pointInfo,

    })

    //设置添加点要素的属性信息

    var attValue = ['成都']

    //创建一个要素

    var feature = new Zondy.Object.Feature({

        fGeom: fGeom,

        GraphicInfo: webGraphicInfo,

        AttValue: attValue,

    })

    //设置要素为点要素

    feature.setFType(1)

    //创建一个要素数据集

    var featureSet = new Zondy.Object.FeatureSet()

    featureSet.clear()

    //设置属性结构

    var cAttStruct = new Zondy.Object.CAttStruct({

        FldName: ['name'],

        FldNumber: 1,

        FldType: ['string'],

    })

    featureSet.AttStruct = cAttStruct

    //添加要素到要素数据集

    featureSet.addFeature(feature)

    //创建一个编辑服务类

    var editService = new Zondy.Service.EditDocFeature('city', 0, {

        ip: `127.0.0.1`,

        port: `8089`, //访问IGServer的端口号，.net版为6163，Java版为8089

    })

    //执行添加点要素功能

    editService.add(featureSet, onPntSuccess)

}

//添加点要素回调函数

function onPntSuccess(data) {

    if (data.succeed) {

        alert('添加点要素成功！')

        //图层刷新方法

        docLayer.refresh()

    } else {

        alert('添加点要素失败！')

    }

}

5. 查询要素

参考官方的参考示例：固定点的查询

OpenLayers5示例 (smaryun.com)

查询一个点要素的流程为：

初始化查询结构对象Zondy.Service.QueryFeatureStruct，设置查询结构包含几何信息；
创建一个用于查询的点形状Zondy.Object.PointForQuery，并设置它的搜索范围；
实例化查询参数对象Zondy.Service.QueryParameter，设置查询分页号pageIndex和要素数目recordNumber；
最后实例化地图文档查询服务对象Zondy.Service.QueryDocFeature，并调用QueryDocFeature对象的query方法，执行查询，然后调用Process方法将结果格式化输出

function queryByPoint() {

    //创建一个用于查询的点形状

    pointObj = new Zondy.Object.Point2D(114, 30)

    //设置查询点的搜索半径

    pointObj.nearDis = 0.001

    //初始化查询结构对象，设置查询结构包含什么信息

    var queryStruct = new Zondy.Service.QueryFeatureStruct()

    //是否包含几何图形信息

    queryStruct.IncludeGeometry = true

    //是否包含属性信息

    queryStruct.IncludeAttribute = true

    //是否包含图形显示参数

    queryStruct.IncludeWebGraphic = true

    //指定查询规则

    var rule = new Zondy.Service.QueryFeatureRule({

        //是否将要素的可见性计算在内

        EnableDisplayCondition: false,

        //是否完全包含

        MustInside: false,

        //是否仅比较要素的外包矩形

        CompareRectOnly: false,

        //是否相交

        Intersect: true,

    })

    //实例化查询参数对象

    var queryParam = new Zondy.Service.QueryParameter({

        geometry: pointObj,

        resultFormat: 'json',

        struct: queryStruct,

        rule: rule,

        //显示查询到的要素数量

        cursorType: null,

    })

    //实例化地图文档查询服务对象

    var queryService = new Zondy.Service.QueryDocFeature(

        queryParam,

        'city',

        '0',

        {

            ip: `127.0.0.1`,

            port: `8089`, //访问IGServer的端口号，.net版为6163，Java版为8089

        }

    )

    //执行查询操作，querySuccess为查询回调函数

    queryService.query(querySuccess, queryError)

}

//查询失败回调

function queryError(e) {

    console.log(e)

}

//查询成功回调

function querySuccess(result) {

    console.log(result)

    //初始化Zondy.Format.PolygonJSON类

    var format = new Zondy.Format.PolygonJSON()

    //将MapGIS要素JSON反序列化为ol.Feature类型数组

    var features = format.read(result)

    console.log(features)

}

7. 删除要素

参考官方的参考示例：点要素删除

OpenLayers5示例 (smaryun.com)

删除一个点要素的流程为：

创建一个编辑服务类（Zondy.Service.EditLayerFeature对象）；
调用编辑服务对象的deletes方法，设置要删除的要素的OID，执行删除要素功能

function deletePoint() {

    var deleteService = new Zondy.Service.EditDocFeature('city', 0, {

        ip: `127.0.0.1`,

        port: `8089`, //访问IGServer的端口号，.net版为6163，Java版为8089

    })

    deleteService.deletes(document.getElementById('OID').value, onSuccess)

}

//删除点要素回调函数

function onSuccess(result) {

    if (result) {

        alert('删除要素成功！')

        docLayer.refresh()

    } else {

        alert('删除要素失败！')

    }

}

8. 编辑要素

参考官方的参考示例：点要素更新

OpenLayers5示例 (smaryun.com)

编辑一个点要素的流程为：

查询要素
新建要素，设置相同的OID
调用编辑服务对象的update方法更新要素

function updatePoint() {

    //创建一个点形状，描述点形状的几何信息

    var gpoint = new Zondy.Object.GPoint(0, 0)

    var fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] })

    //设置添加点要素的图形参数信息

    var pointInfo = new Zondy.Object.CPointInfo({

        Angle: 0,

        Color: 8,

        Space: 0,

        SymHeight: 20,

        SymID: 197,

        SymWidth: 20,

    })

    //设置当前点要素的图形参数信息

    var webGraphicInfo = new Zondy.Object.WebGraphicsInfo({

        InfoType: 1,

        PntInfo: pointInfo,

    })

    //设置添加点要素的属性信息

    var attValue = ['修改后']

    //创建一个点要素

    var newFeature = new Zondy.Object.Feature({

        fGeom: fGeom,

        GraphicInfo: webGraphicInfo,

        AttValue: attValue,

    })

    //设置要素为点要素

    newFeature.setFType(1)

    //设置FID----被选中点的OID，可以在桌面端中查看

    newFeature.setFID(document.getElementById('OID').value)

    //创建一个点要素数据集

    var featureSet = new Zondy.Object.FeatureSet()

    //设置属性结构

    var cAttStruct = new Zondy.Object.CAttStruct({

        FldName: ['name'],

        FldNumber: 1,

        FldType: ['string'],

    })

    featureSet.AttStruct = cAttStruct

    //添加要素到要素数据集

    featureSet.addFeature(newFeature)

    //创建一个编辑服务类

    var editService = new Zondy.Service.EditDocFeature('city', 0, {

        ip: `127.0.0.1`,

        port: `8089`, //访问IGServer的端口号，.net版为6163，Java版为8089

    })

    editService.update(featureSet, onSuccess)

}

//更新点要素回调函数

function onSuccess(result) {

    if (result) {

        alert('更新要素成功！')

        docLayer.refresh()

    } else {

        alert('更新要素失败！')

    }

}

9. 参考资料

[1]OpenLayers5示例 (smaryun.com)

[2]IGS JavaScript API (smaryun.com)

[3]MapGIS IGServer Java for Windows (smaryun.com)

巴特西