关于gis:gis开发总结

—应用技术 —
服务端：iserver; 客户端：iclient

web 端 gis 开发工具:

二维：iclient javascript:

集成 Leaflet、openlayers、MapboxGL 三种地图类库, 集成 ECharts、D3、MapV 等支流的图表库; 反对跨终端、跨浏览器、多源数据地图; 基于古代 web 技术栈
三维：iClient3D for WebGL

iClient JavaScript 11i(2022) 体系图：

本篇简略总结基于 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（用于管制地图右下角标记）这三个控件

(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) {
        // some config thing
        // 瓦片加载实现的回调
        callback() {// do something (including adding tiles to cache)
        }
    }
}
参考链接: http://lbs.tianditu.gov.cn/server/MapService.html

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

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);

feature 最根底的地物单元

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

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

参考链接：
iclient javascript 概览
iserver 官网提供的 gis 服务列表
天文坐标系 (gcs) 与投影坐标系 (pcs)
国内各种地图坐标系总结
二维地图前端 js api 比照剖析

关于gis:gis开发总结

1. 地图配置

2. 矢量数据格式

3. 地图对象

4. 地图事件