前端vue3地图GIS开发

前端通过什么方式绘制地图
1. 通过echarts的geo模式绘制地图
2. 通过百度地图或者高德地图的jsAPI绘制地图
投影方式和坐标系
1. 目前 web Gis 最常用的 投影方式 是 墨卡托投影，常规的地图厂商和地图引擎，都默认使用的这类投影方式。
2. 坐标系目前国际上最通用的经纬度坐标系，来自于 “美国国家地理空间情报局” 出台的 WGS84。但是，国内通用的地图厂商，通常不被允许直接使用 WGS84 进行地理信息服务。国测局规定: 国内出版的各种地图系统，必须⾄少采⽤ GCJ-02 对地理位置进⾏⾸次加密的坐标系。 - ⾼德和Google在国内都是使⽤ GCJ－02 坐标系 - 百度使⽤的是在 GCJ-02 基础上再⼀次加密的 BD-09 坐标系。
3. 目前，社区里也是有很多关于 GCJ-02 坐标系的坐标和 WGS84 坐标互相转换的算法，最广受认可的是这个：coordtransform

geoJSON: web端通用地理信息数据格式

{
  "type": "Feature",
  "geometry": {
 "type": "Point",
 "coordinates": [125.6, 10.1]
  },
  "properties": {
 "name": "Dinagat Islands"
  }
}

目前最新的 GeoJSON 格式支持以下类别的地理信息（Feature）描述：

点: Point
点组（多个点）: MultiPoint
线: LineString
线组（多条线）: MultiLineString
多边形: Polygon
多边形组（多个多边形）: MultiPolygon

以及：

包含一组上述Feature的集合：FeatureCollection

GeoJSON 格式官方网站：www.rfc-editor.org/rfc/rfc7946

feature的格式

如果我想在地图上点一个点：就需要用到 Feature 类别的 GeoJSON 数据，通常长这样：

{
  "type": "Feature",
  "properties": {
    "id": 1,
    "name": "摸鱼的春哥"
  },
  "geometry": {
    "coordinates": [
      114.48328003261895,
      29.35629560547187
    ],
    "type": "Point"
  }
}

注意，以上格式，分为三部分：

type：类别，支持的值只有： Feature 和 FeatureCollection。
properties：属性，用来记录业务属性，如 id，name 等。
geometry：几何信息。用来表示图形信息，是点还是线还是多边形，它们的经纬度是多少。

而 FeatureCollection 则可以表达多个 Feature 的集合：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          114.48328003261895,
          29.35629560547187
        ],
        "type": "Point"
      }
    },
    {
      "type": "Feature",
      "properties": {},
      "geometry": {
        "coordinates": [
          [
            [
              114.58791284766971,
              29.391982262865895
            ],
            [
              114.58791284766971,
              29.2928121036324
            ],
            [
              114.72107020435487,
              29.2928121036324
            ],
            [
              114.72107020435487,
              29.391982262865895
            ],
            [
              114.58791284766971,
              29.391982262865895
            ]
          ]
        ],
        "type": "Polygon"
      }
    }
  ]
}

turf.js：前端必备的地理工具

官网地址：turfjs.org/ 为什么我们会需要这样一个工具？因为：关于地理信息的几何计算，它是专业的。

场景：求几个重心（放文本或者定位）

假设场景：你有一个多边形 GeoJSON 数据，现在你想知道它的 几何重心 在哪里？

const polygon = {
  "type": "Feature",
  "properties": {},
  "geometry": {
    "coordinates": [
      [
        [-81, 41],
        [-88, 36],
        [-84, 31],
        [-80, 33],
        [-77, 39],
        [-81, 41]
      ]
    ],
    "type": "Polygon"
  }
}
var centroid = turf.centroid(polygon);

场景：求面积

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

经验

feature的格式

turf.js：前端必备的地理工具

场景：求几个重心（放文本或者定位）

场景：求面积

CATALOG

FEATURED TAGS

FRIENDS