—应用技术—
服务端：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比照剖析
发表回复