共计 3009 个字符，预计需要花费 8 分钟才能阅读完成。
—应用技术 —
服务端：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) 图层与图层源
图层次要是对 矢量数据(矢量图层) 和 栅格数据（瓦片图层、图片图层）的可视化表白
// 地图数据源次要分为三大类, 对应四大类图层
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 的墨卡托投影坐标系
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}
});参考链接：
iclient javascript 概览
iserver 官网提供的 gis 服务列表
天文坐标系 (gcs) 与投影坐标系 (pcs)
国内各种地图坐标系总结
二维地图前端 js api 比照剖析
