乐趣区

关于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) 图层与图层源

图层次要是对 矢量数据(矢量图层) 和 栅格数据(瓦片图层、图片图层)的可视化表白

// 地图数据源次要分为三大类, 对应四大类图层
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 比照剖析

退出移动版