Jmingzi

Appearance

Return to top
On this page

JS涉及的地图与坐标系知识梳理

前言

绝大部分前端接触地图开发都是从高德地图或百度地图开始的，这算是对地图知识的启蒙。

但是在很多时候，业务所在的商业环境，高德地图或百度地图受到限制，通常会要求使用CGCS2000国家大地坐标系。

那么这个时候，就需要了解：类似高德地图这样的地图和交互是由哪些部分组成的。

坐标系

以下内容只针对地理坐标系，不考虑投影坐标系

从前端接触的地图服务商归类

  • 高德地图、腾讯地图、谷歌中国区地图
  • 百度地图
  • 天地图

坐标系分别为：

  • GCJ-02（G-Guojia国家，C-Cehui测绘，J-Ju局），又被称为火星坐标系，是一种基于WGS-84制定的大地测量系统，由中国国测局制定。此坐标系所采用的混淆算法会在经纬度中加入随机的偏移。
  • BD-09 是百度地图使用的地理坐标系，其在GCJ-02上多增加了一次变换，用来保护用户隐私。从百度产品中得到的坐标都是BD-09坐标系。
  • CGCS2000 (China Geodetic Coordinate System 2000) 是国家大地坐标系，是为了摆脱国外对GPS的控制，自己制定的一个标准。

另外还有一种比较常见的国际坐标系：WGS84 (World Geodetic System 1984)，美国人 GPS 定位系统使用的，算是国际通用。

坐标系别名

通常我们会看到“ EPSG:4326” 这样的描述，什么是 EPSG ？

EPSP的英文全称是European Petroleum Survey Group，中文名称为欧洲石油调查组织。这个组织成立于1986年，2005年并入IOGP(International Association of Oil & Gas Producers)，中文名称为国际油气生产者协会。EPSG对世界的每一个地方都制定了地图，但是由于座标系不同，所以地图也各不相同。

也就是说在国际上，EPSP组织会为每个坐标系定义一个代号，譬如 WGS84 代号为 "EPSG:4326"，CGCS2000 代号为 "EPSG:4490"，这个代号的术语被称之为“ WKID”，WKID 是国际上公认且统一的对与空间参考系统的 ID 命名。

坐标系WKID别名
CGCS20004490EPSG:4490
WGS844326EPSG:4326

所以在国内的商业业务中，要么使用天地图(CGCS2000) ，要么使用高德地图(GCJ02)。

法律法规

（禁止）未经批准，在测绘活动中擅自采用国际坐标系统 —— 中华人民共和国测绘法，40 (1)。

所以我们在实际的项目中都不能使用 WGS84 坐标系。

GIS

GIS 是地理信息服务（Geographic Information Service）的简称，在前端领域中，通常是将测绘局给出的 GIS (瓦片/矢量数据)服务，利用 Web GIS 引擎渲染到页面上，并与之交互。

国内免费的 GIS 服务商：超图

常见的开源 Web GIS 引擎有

  • OpenLayer
  • leaflet

譬如，使用 openlayer 设定 CGCS2000 坐标系：

// 依赖 proj4 库
proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs")
const projection = new ol.proj.get('EPSG:4490')
projection.setExtent([-180, -90, 180, 90])

new ol.View({
  projection
})

地图的组成

在使用高度封装的天地图中会忽略这些内容，但是在使开源 Web GIS 引擎的过程中理解这一概念是非常重要的。

  • View：在 Web 页面中，通常需要定义视图窗口来与用户交互，例如控制地图显示的中心位置，范围，层级等
  • Layer：如果使用过 photoshop 会比较好理解，地图上的元素，都是一个个图层叠加呈现，图层 layer 目前分为 2 种：
    • tile 瓦片图层，通常用来作为地图底图
    • vector 矢量图层，譬如是一个 GeoJSON，用来描述点，线，面等等常用的地图元素(Feature)
  • Source：是指图层的数据源，一般情况下，数据源的格式会和图层的格式要求保持一致
  • Interaction：交互

参考