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，详细的安装、试用步骤参考官网：

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

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

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

另外，还需要IGServer发布一个要素地图服务，用以进行要素的增删改查，笔者这里使用MapGIS官方发布MapGIS地图文档（有时数据可能不可用）

3. 地图加载

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

<!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>

    const 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'

      })

    })

    const gdbpLayer = new Zondy.Map.GdbpLayer("长江黄河",

      ["gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流_1"], {

      ip: "develop.smaryun.com",

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

    });

    map.addLayer(gdbpLayer)

  </script>

</body>

</html>

加载的结果图如下：

4. 缓冲区分析

参考官方的参考示例：类缓冲分析

类缓存分析的流程为：

  • 初始化图层单圈缓冲分析服务Zondy.Service.ClassBufferBySingleRing或图层多圈缓冲区分析服务Zondy.Service.ClassBufferByMultiplyRing，设置缓冲分析必要参数（对象中的属性来自本类公共属性和Zondy.Service.ClassBufferBase类的公共属性）
  • 调用图层缓冲区分析服务的execute方法完成图层单圈缓冲分析或者图层多圈缓冲分析功能

核心代码如下：

// 单圈缓冲区分析

let resultname = ''

function singleBuffAnalysis() {

    resultname =

        'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流_1' + Date.now()

    //实例化ClassBufferBySingleRing类

    var clsBufBySR = new Zondy.Service.ClassBufferBySingleRing({

        ip: 'develop.smaryun.com',

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

        //缓冲时要素左侧缓冲半径

        leftRad: 0.5,

        //缓冲时要素右侧缓冲半径

        rightRad: 0.5,

        //不允许根据属性字段设置缓冲区半径

        isByAtt: false,

    })

    //调用Zondy.Service.ClassBufferBase基类公共属性

    clsBufBySR.srcInfo = 'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流_1'

    clsBufBySR.desInfo = resultname

    //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数

    clsBufBySR.execute(

        AnalysisSuccess,

        'post',

        false,

        'json',

        AnalysisError

    )

}

完整代码如下：

<!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>

  <button onclick="singleBuffAnalysis()">缓冲区分析</button>

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

  <script>

    const 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'

      })

    })

    const gdbpLayer = new Zondy.Map.GdbpLayer("长江黄河",

      ["gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流_1"], {

      ip: "develop.smaryun.com",

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

    });

    map.addLayer(gdbpLayer)

    // 单圈缓冲区分析

    let resultname = ''

    function singleBuffAnalysis() {

      resultname =

        'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流_1' + Date.now()

      //实例化ClassBufferBySingleRing类

      var clsBufBySR = new Zondy.Service.ClassBufferBySingleRing({

        ip: 'develop.smaryun.com',

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

        //缓冲时要素左侧缓冲半径

        leftRad: 0.5,

        //缓冲时要素右侧缓冲半径

        rightRad: 0.5,

        //不允许根据属性字段设置缓冲区半径

        isByAtt: false,

      })

      //调用Zondy.Service.ClassBufferBase基类公共属性

      clsBufBySR.srcInfo = 'gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流_1'

      clsBufBySR.desInfo = resultname

      //调用基类Zondy.Service.AnalysisBase的execute方法执行类缓冲分析，AnalysisSuccess为回调函数

      clsBufBySR.execute(

        AnalysisSuccess,

        'post',

        false,

        'json',

        AnalysisError

      )

    }

    //分析失败回调

    function AnalysisError(e) {

      alert(e)

    }

    //分析成功后的回调

    function AnalysisSuccess(data) {

      console.log(data)

      if (data.succeed) {

        const resultLayer = new Zondy.Map.GdbpLayer('', [resultname], {

          ip: 'develop.smaryun.com',

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

        })

        map.addLayer(resultLayer)

      }

    }

  </script>

</body>

</html>

结果图如下：

5. 叠加分析

参考官方的参考示例：图层叠加分析

类缓存分析的流程为：

  • 初始化图层叠加分析服务Zondy.Service.OverlayByLayer或多边形叠加分析服务Zondy.Service.OverlayByPolygon，设置叠加分析必要参数（对象中的属性来自本类公共属性和Zondy.Service.OverlayBase类的公共属性）
  • 调用叠加分析服务的execute方法完成图层叠加分析或者多边形叠加分析功能

核心代码如下：

// 图层叠加分析分析

let resultname = ''

function overlayByLayer() {

    //实例化OverlayByLayer类

    resultname = "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/overLayByLayer" + Date.now();

    //实例化OverlayByLayer类

    var overlayParam = new Zondy.Service.OverlayByLayer({

        ip: "develop.smaryun.com",

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

        //设置被叠加图层URL

        srcInfo1: "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流",

        //设置叠加图层URL

        srcInfo2: "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区",

        //设置结果URL

        desInfo: resultname,

        //设置结果图层的图形参数信息

        infoOptType: 2,

        //求交

        overType: 1,

        //允许重算面积

        isReCalculate: true,

        //容差半径

        radius: 0.05

    });

    //调用基类的execute方法，执行叠加分析， onSuccess为结果回调函数

    overlayParam.execute(AnalysisSuccess, "post", false, "json", AnalysisError);

}

完整代码如下：

<!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>

  <button onclick="overlayByLayer()">叠加分析</button>

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

  <script>

    const map = new ol.Map({

      target: 'map',

      layers: [],

      view: new ol.View({

        center: [120.9, 28.9],

        zoom: 4,

        projection: 'EPSG:4326'

      })

    })

    const gdbpLayer = new Zondy.Map.GdbpLayer("",

      ["gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区"], {

      ip: "develop.smaryun.com",

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

    });

    map.addLayer(gdbpLayer)

    const gdbpLayer2 = new Zondy.Map.GdbpLayer("",

      ["gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流"], {

      ip: "develop.smaryun.com",

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

    });

    // map.addLayer(gdbpLayer2)

    // 图层叠加分析分析

    let resultname = ''

    function overlayByLayer() {

      //实例化OverlayByLayer类

      resultname = "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/overLayByLayer" + Date.now();

      //实例化OverlayByLayer类

      var overlayParam = new Zondy.Service.OverlayByLayer({

        ip: "develop.smaryun.com",

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

        //设置被叠加图层URL

        srcInfo1: "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界河流",

        //设置叠加图层URL

        srcInfo2: "gdbp://MapGisLocal/OpenLayerVecterMap/ds/世界地图经纬度/sfcls/世界政区",

        //设置结果URL

        desInfo: resultname,

        //设置结果图层的图形参数信息

        infoOptType: 2,

        //求交

        overType: 1,

        //允许重算面积

        isReCalculate: true,

        //容差半径

        radius: 0.05

      });

      //调用基类的execute方法，执行叠加分析， onSuccess为结果回调函数

      overlayParam.execute(AnalysisSuccess, "post", false, "json", AnalysisError);

    }

    //分析失败回调

    function AnalysisError(e) {

      alert(e)

    }

    //分析成功后的回调

    function AnalysisSuccess(data) {

      console.log(data)

      if (data.succeed) {

        const resultLayer = new Zondy.Map.GdbpLayer('', [resultname], {

          ip: 'develop.smaryun.com',

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

        })

        map.addLayer(resultLayer)

      }

    }

  </script>

</body>

</html>

结果如下图：

6. 其他分析

更多空间分析如，网络分析、拓扑分析、裁剪分析等参考官方API手册和示例：、

7. 参考资料

[1]OpenLayers5示例 (smaryun.com)

[2][IGS JavaScript API (smaryun.com)](http://develop.smaryun.com:81/API/JS/IGS JavaScript API v02/index.htm)

最新文章

  1. 重新编译jdk源码,启用debug信息
  2. 完美解决 nginx No input file specified.
  3. hive中行转换成列
  4. 微信小程序开发:http请求
  5. Android PermissionChecker 权限全面详细分析和解决方案
  6. Webx常用接口
  7. aggregation 详解4（pipeline aggregations）
  8. [Search]swf 转mp4,未成功
  9. linux运维常用命令
  10. ubuntu 选择最快得源
  11. iOS常用的开源类库
  12. Postgres的用户认证
  13. python matplotlib 绘图基础
  14. input placeholder样式
  15. java 调用c# web api 代码
  16. Codeforces 799D Field expansion(随机算法)
  17. cmder个人配置文件，做个记录
  18. git中 .ignore文件的配置 忽略不想上传的文件
  19. selenium webdriver窗口切换(上)
  20. web前端开发教程系列-3 - 前端开发调试工具分享

热门文章

  1. L1-064 估值一亿的AI核心代码 (20分)
  2. IdentityServer4的最佳使用
  3. vue 单独封装分页组件
  4. RSA中用到的推导，笔记持续更新
  5. 网络监测工具之Zabbix的搭建与测试方法（一）
  6. 在IQuery中使用除法提示&quot;Numeric value does not fit in a System.Decimal&quot;
  7. 【进阶篇】Redis实战之Jedis使用技巧详解
  8. 使用xshell连接linux虚拟机
  9. [Leetcode]在排序数组中查找元素的第一个和最后一个位置
  10. 踩坑实录---Angular防抖——点击事件