前言

webGIS是建立在web技术上的一种特殊环境下的地理信息系统。当前大屏开发多多少少会有一些地图，例如智慧城市、指挥调度中心、城市大脑等。做为GIS毕业的学生，上学时学过的giaGIS，arcMap，之前的项目开发中也有部分是地图开发相关，多多少少对GIS开发前端大屏地图有些了解，所以在这里简单做一下总结

开发方式

当前webGIS开发主要用到一些地图引擎，如百度、谷歌、高德他们在展示地图时，有两个核心概念， $\color{red}投影方式$ 和 $\color{red}坐标系$

投影

目前webGis最常用的投影方式是 $\color{red}墨卡托投影$

墨卡托投影的核心思路是，先把球形地图展开成柱状图，然后铺成平面。因为球形是不可能铺成圆柱形的，因此墨卡托投影存在误差，尤其越靠近南北极的地理面积就比实际面积显示要大

坐标系

目前国际上最通用的经纬度坐标系，来自于 “美国国家地理空间情报局” 出台的 WGS84。但是国内通用的地图厂商，通常不被允许直接使用WGS84进行地理信息服务

国测局规定：国内出版的各种地图系统，必须至少采用GCJ-02对地理位置进行首次加密的坐标系

$\color{red}GCJ-02$ :它其实就是对真实坐标系统进行人为的加偏处理，按照特殊的算法，将真实的坐标加密成虚假的坐标，而这个加偏并不是线性的加偏，所以各地的偏移情况都会有所不同。而加密后的坐标也常被大家称为“ $\color{red}火星坐标系统$ ”。

⾼德和Google在国内都是使⽤ GCJ－02 坐标系
百度使⽤的是在 GCJ-02 基础上再⼀次加密的 BD-09 坐标系(它是在标准经纬度的基础上进行GCJ-02加偏之后，再加上百度自身的加偏算法，也就是在标准经纬度的基础之上进行了两次加偏。)

目前有很多GCJ-02和WGS84坐标互相转换的算法，最受认可的是coordtransform。

npm install coordtransform安装后

//国测局坐标(火星坐标,比如高德地图在用),百度坐标,wgs84坐标(谷歌国外以及绝大部分国外在线地图使用的坐标)
var coordtransform=require('coordtransform');
//百度经纬度坐标转国测局坐标
var bd09togcj02=coordtransform.bd09togcj02(116.404, 39.915);
//国测局坐标转百度经纬度坐标
var gcj02tobd09=coordtransform.gcj02tobd09(116.404, 39.915);
//wgs84转国测局坐标
var wgs84togcj02=coordtransform.wgs84togcj02(116.404, 39.915);
//国测局坐标转wgs84坐标
var gcj02towgs84=coordtransform.gcj02towgs84(116.404, 39.915);

console.log(bd09togcj02);
console.log(gcj02tobd09);
console.log(wgs84togcj02);
console.log(gcj02towgs84);
//result
//bd09togcj02:   [ 116.39762729119315, 39.90865673957631 ]
//gcj02tobd09:   [ 116.41036949371029, 39.92133699351021 ]
//wgs84togcj02:  [ 116.41024449916938, 39.91640428150164 ]
//gcj02towgs84:  [ 116.39775550083061, 39.91359571849836 ]

地图瓦片

地图上要展示大量的信息，例如：道路、山川河流、房屋、隧道、距离、要支持地图的放大缩小，就需要在 $\color{red}地图瓦片$ 上呈现

$\color{red}地图瓦片$ 是包含了一系列比例尺、一定地图范围内的地图切片文件。地图瓦片按照金字塔结构组织，每张瓦片都可通过级别、行列号唯一标记。在平移、缩放地图时，浏览器根据金字塔规则，计算出所需的瓦片，从瓦片服务器获取并拼接

地图瓦片具有以下特点

具有唯一的瓦片等级和瓦片坐标编号
最小的地图等级是0，此时世界地图只有一张瓦片组成。
瓦片等级越高，组成世界地图的瓦片数越多，可以展示的地图越详细
某一瓦片等级地图的瓦片是由低一级的各瓦片切割成的4个瓦片组成，形成了瓦片金字塔

目前主流的瓦片分为矢量瓦片和栅格瓦片。

传统栅格瓦片，它的思想是通过栅格化的图片（png/jpg等）来进行地理数据的显示。

栅格瓦片底图有其优越性，例如减少了传输数据体积，多级缩放，也存在一些缺点，，缺乏灵活性，实时性，数据完整性受损时比较突出的问题

矢量瓦片 是将各种地理信息矢量化，最终通过字体、线段、图表、风格、矢量数据等信息，将地理信息保存下来，最终完成到地图上的渲染矢量地图的体积更小，定制化能力更强

GeoJson

GeoGSON是一种数据格式，用它来描述地理数据。可以描述的对像如下：几何体、要素和数据集，几何体（Geometry）的类型有我们熟悉的点、线、面，多点、多线、多面等。要素（Feature）包含了几何体信息及附加的一些信息。FeatureCollection 则可以表达多个 Feature 的集合其格式如下

"type": "FeatureCollection",
"features": [
    {
        “type”: "Feature",
        "properties": {},
        "geometry": {
            "type": "Point",
            "coordinates": [106.200234332,31.348987583]
        }
    }
]

GeoJSON在空间中，常常是经度在前，纬度在后

turf.js--地理空间分析库

使用可读性高的JS函数处理GeoGSON npm安装

npm install @turf/turf

页面引入

import * as turf from '@turf/turf'

或

import { lineString, along } from '@turf/turf'

下载指定模块

$ npm install @turf/collect

使用场景：1. 求面积，算一下，某个区域有多少平方公里

const polygon = { 
"type": "Feature",
"properties": {}, 
"geometry": { 
"coordinates": [
    [
        [-88, 67], [-86, 37], [-84, 31], [-80, 33], [-77, 39], [-88, 67] ] 
    ], 
    "type": "Polygon"
    }
} 
var area = turf.area(polygon);// 一键计算出面积

2.distance：两点之间的直线距离 3.bearing：计算两点间的角度 4.turf.center(features)：计算中心点更多用法可以查看官网turf

webGIS开发前端地图

前言

开发方式

投影

坐标系

地图瓦片

GeoJson

turf.js--地理空间分析库