gis开发总结

梦里醒来是平凡
812 阅读5分钟

使用技术

服务端：iserver; 客户端：iclient

web 端gis开发工具:

  • 二维：iclient javascript:

集成Leaflet、openlayers、MapboxGL三种地图类库; 集成ECharts、D3、MapV 等主流的图表库; 支持跨终端、跨浏览器、多源数据地图; 基于现代web技术栈

  • 三维：iClient3D for WebGL

iClient JavaScript 11i(2022) 体系图：

558094914-62a047632e663_fix732.webp

本篇简单记录一些基于openlayers的二维技术知识点，便于查阅

选用openlayers的原因： 性能、扩展性较好、支持h5特性、较完善的生态、WebGL+canvas渲染； 缺点也比较明显：偏重，文档可读性差、学习成本高

这里大概总结一下地图相关的类库的区别和分类

  • 在线地图lbs(location based server)服务: 以百度api、腾讯、高德api为例，开发者使用需要申请密钥，且api调用有次数限制，主要适用于互联网应用的lbs服务，做简单的数据展示；不适合企业、政府大型Gis应用开发
  • GIS地图库: 企业级地图应用开发库，以openlayers、arcgis为例；适用方向：交互复杂、专业的地图项目。

易用性对比：

  • 开源：leaflet(移动端支持度高) > mapbox > openlayer
  • 图商：高德 > 百度(echarts深度融合) > 腾讯 > 天地图

openlayers框架体系的核心大类：

  • Map: 容器
  • Layer：图层
  • Source：图层的数据源
  • Feature: 基础地物单元
  • View: 视图
  • 交互控件: Control和Interaction

OpenLayers的DOM元素组织结构

OpenLayers会在自定义的div容器中创建一个viewport容器，地图中的所有内容都放置在viewport中呈现，viewport容器中有三个关键的元素层：

  • 地图渲染层（ol-layers）：这是一个canvas元素，地图基于canvas 2D方式渲染。
  • 内容叠加层（ol-overlaycontainer）：用于放置叠置层（Overlay），如在地图上添加弹窗。
  • 地图控件层（ol-overlaycontainer-stopevent）：用于放置控件，默认情况下会放置Zoom（用于控制地图放大、缩小）、Rotate（用于控制地图旋转）、Attribution（用于控制地图右下角标记）这三个控件

3e7e188d-8a94-4b15-bfc4-40e4e0e8e8a6_.webp

1. 地图配置

(1) 图层与图层源

图层主要是对 矢量数据(矢量图层) 和 栅格数据（瓦片图层、图片图层）的可视化表达

// 地图数据源主要分为三大类, 对应四大类图层
1. 图片图层ImageLayer:服务端渲染
可能是已经渲染好的图像，或者是每一次请求，都根据请求内容定制化地生成一幅图

2. 切片/瓦片图层TileLayer: 服务端渲染，一般底图使用切片图层
利用网格将一幅地图切成大小相等的小正方形
当请求地图的时候，会请求视口可见的区域内包含的切片，其余的切片不会请求，这样就节省了网络带宽，而且一般这些切片都是预先切好的，且分为不同的缩放级别，根据不同的缩放级别分成不同的目录。一般将这些切片地图放到缓存中，达到更快的访问速度

preload选项参数:
是在还没有将相应分辨率的切片渲染出来的时候，将低分辨率的切片先放大到当前分辨率(可能会有模糊)，填充到相应位置直至当前分辨率的切片渲染完成, 这也就是为什么当网速慢时，地图会先是模糊的，然后再变清晰的原因

3. 矢量图层VectorLayer(包含VectorImage、VectorTile等): 客户端渲染，
需要通过style来控制图层外观

4. 热度图层heatMapLayer: 客户端渲染
将矢量数据渲染成热度图

图层源

a: tileLayer

  • OSM/BingMaps
  • OGC标准的WMS/WMTS服务 ...

b: VectorLayer

  • vectorSource: geojson/kml等格式的矢量数据 ...

c: ImageLayer

  • imageCanvas
  • imageStatic ...
// 以加载天地图瓦片数据(采用OGC WMTS标准)为例
http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥


new TileLayer({source: new Tianditu({ ... })})

class Tianditu extends WmtsSource {
	// opt: { layerType: 'xx', projection: 'xx', cacheSize: 'xxx' }
	constructor(opt) {
		// options
                {
                    // xxx
                    // 瓦片加载完成的回调
                    callback() {
                        // 将瓦片数据放入缓存(如localforage)，加快访问速度
                        // do something else
                    }
                }
	}
}
参考链接: http://lbs.tianditu.gov.cn/server/MapService.html

1. 一般项目里使用openlayers加载天地图作为底图（包含矢量、影像图层...）图源时使用该方式
2. 有时需要渲染海量数据（如十万级管网/检查井数据）也会采用这种方式，按可视区域动态加载以增强渲染性能和用户体验

瓦片.png

(2) 常用坐标系 'EPSG:4326': WGS84经纬度球面坐标系，GPS坐标 'EPSG:3857': WGS84的墨卡托投影坐标系

2. 矢量数据格式

OpenLayer支持GeoJSON,WKT,KML,GML,TopoJSON等典型GIS格式, 以GeoJSON为例

// 点
{ "type": "Point", "coordinates": [100.0, 0.0] }

// 面
{ "type": "Polygon",
  "coordinates": [
    [ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
  ]
}

// 带属性信息的图形
const r = {  
  "type": "Feature",  
  "geometry": {  
    "type": "Point",  
    "coordinates": [....]  
  },  
  "properties": {  
    "name": "Dinagat Islands" ,
    "id":"23456"
  }  
}  
// 读取为feature, 添加至矢量图层源
const feature = new GeoJSON().readFeature(r);

3. 地图对象

feature最基础的地物单元

// 由图形、属性、样式三要素构成
const feature = new Feature({
  geometry: new Point([c.lng, c.lat]),  // 几何图形
  [FEATURE_PROPERTIES]: { ... },   // 数据属性
  type: 'xxx',
});
feature.setStyle(xxxx);

4. 地图事件

// 地图要素事件通过监听地图事件实现
const mapPointerClickEventHandle = this.map.on('click', (e) => {
  const result = this.map.forEachFeatureAtPixel(
    e.pixel,
    (f) => f,
  );
  if (result) {
    xxxx
  }
});

5. 接入iserver服务

要使用一些特殊的功能, 例如地物查询、空间分析、网络分析, 需要交由服务端或者空间数据库负责, 分析结果提交前端展示, 此时需要使用通过iserver发布的服务

// 以iserver发布的rest服务为例, 进行地物查询
const restUrl = "https://iserver.supermap.io/iserver/services/data-world/rest/data";

// 获取查询数据集
// xxxxx

// 参考文档案例配置查询参数, 这里以几何范围查询为例
const params = {
    datasetNames: ["World:Countries"],
    geometry: polygon,
    spatialQueryMode: "INTERSECT"
}

// 获取查询结果

参考链接： iclient_js概览、 iserver官方gis服务列表、 openlayers图层详解、 国内各种地图坐标系总结、 二维地图前端api对比分析

avatar
文章
阅读
粉丝