Skip to content
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:交互

参考