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