Mapbox-gl（not ready）

• 学习mapbox博文传输带
• vue上使用mapbox
• 初始化第一个mapbox
• geoserve
• geojson
• canvas
• Mapbox-GL样式 -->sources（数据来源）和layers（界面呈现的样子）
• 绘制点
• 绘制线
• 设置点的样式
• 解决点重合问题
• 设置线的样式
• 线随点的移动改变
• 3D地图的实现

mapbox博文传输带

-1、初学了解mapbox，里面有sources（数据来源）和layers（界面呈现的样子）概念的理解，source和layer的1->n关系
0、mapbox非常全的实例
1、通过介绍mapbox的一些实际应用与概念，来记录学习路程与经验分享。（从点到线，系统简介，推荐！！！！！）
2、Mapbox-GL样式参考
3、MAPBOX本地离线部署。讲解：layers,sources 图层本地化、sprite 图标本地化、glyphs 字体本地化
4、mapbox更深度的离线部署。
结合Mapbox GL JS和Vue.js的强大功能-------vuemapbox(我没能上手，感觉mapbox版本太老了)

geoserve
Mapbox 添加WMS服务
使用mapbox加载由geoserver发布的矢量切片

geojson
GeoJSON详细讲解
GeoJSON详解（带图）

点线相关
绘制line且颜色渐变
Mapbox GL JS 根据指定的点在地图上标记一个指定半径（KM）的圆形区域

3D相关
《权力的游戏》3d地图-基于Mapbox customlayer
mapbox、three.js添加自定义3d模型。注：官网案例也不错

canvas
canvas实例
canvas入门到入坑，哈哈哈哈学习教程

vue上mapbox的使用

cnpm i -S mapbox-gl
//安装自定义点线面工具的依赖包
npm install --save mapbox-gl-draw
npm install --save turf

初始化第一个mapbox

一个就是地图在html中的容器，即装载地图div的ID。
另一个就是地图的样式，地图样式一般包括渲染地图的资源以及缩放，中心点等地图配置信息。

<template>
  <div>
    <div id="map" ref="basicMapbox" :style="mapSize"></div>
  </div>
</template>
<script>

import mapboxgl from "mapbox-gl";

    // 初始化创建地图
createMap() {
 mapboxgl.accessToken = this.mapConfig.accessToken;
      // 设置地图展示范围 lng: 经度  lat:纬度
      /*var bounds = new mapboxgl.LngLatBounds(
		        new mapboxgl.LngLat(65, 15),
		        new mapboxgl.LngLat(140, 55)
		    );*/
      var map = new mapboxgl.Map({
        container: "map",
        style: this.mapConfig.mapStyle, // 设置地图风格
        center: [110.499992, 21.052744], // 中心点，
        zoom: 16, // 缩放级别
        pitch: 45, // 倾斜角度，默认值为0
        bearing: -17.6, // 旋转角度，默认值为0
        container: "map" // 地图容器
        //antialias: true,
        //maxBounds: bounds // 约束到给定边界
      });
      }

//地图风格
data() {
    return {
      mapConfig: {
        accessToken:
          "token值",
        mapStyle: {
          version: 8,
          name: "BlankMap",
          sources: {},
          glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf", //mapbox地图使用的标注字体。
          darck: {				//地图对应的颜色
            anchor: "viewport",
            color: "blue",
            intensity: 0.5
          },

          layers: []
        }
      },
      }
      }

以上地图初始化完成

geoserver简介及mapbox中的使用

这里不涉及到geoserver发布地图。在geoserver发布地图使用需要依赖java环境，即按照jdk和配置jdk环境变量。

使用 http://地址:jdk端口/geoserver/web 访问geoserver对应网页地址

在我们项目中使用到geoserver发布地图，以下是geoserve发布的地图渲染到mapbox中

 drawMap() {
      let map = this.map;
      map.on("load", () => {
        let ironSource = this.getIronSource(); //见下图
        //  数据来源
        map.addSource("iron", ironSource);
        // 线路
        map.addLayer({
          id: "my-road",
          layout: {},
          paint: { "line-color": "pink" },
          source: "iron",
          "source-layer": "1023",
          type: "line"
        });
      });
    },

 // 将map绘制到地图上数据来源
    getIronSource() {
      var resp = {
        type: "vector", //不同于raster通过像素点绘制，因此不会出现放大后地图变模糊的情况。
        scheme: "tms",
        tiles: [
          "geoserve发布的地址.pbf"
        ]
      };
      return resp;
    },

geojson的学习

geojson 在线生成测试链接
在线经纬度查询

理解geojson是什么？
GeoJSON是一种用于编码各种地理数据结构的格式。GeoJSON对象可以表示几何形状，特征或特征集合。

GeoJSON通常是由单个对象组成。 此GeoJSON对象表示几何，要素或要素集合。

1. GeoJSON对象必须是名为“type”的成员。 此成员的值是由GeoJSON对象的类型所确定的字符串。
2. type成员的值必须是下面之一： Point ， MultiPoint ， LineString ， MultiLineString ， Polygon ， MultiPolygon ， GeometryCollection ， Feature 或 FeatureCollection
   对应中译：点、多点、线串、多线串、多边形、多多边形、几何集合、要素集合
3. GeoJSON对象可能有一个可选的“crs”成员，其值必须是坐标参考系统对象。（没搞懂，坐标参考系统对象）
4. GeoJSON对象可能有一个“bbox”成员，其值必须是边界框数组。

GeoJSON几何对象

几何体是一种GeoJSON对象，其中类型（type）成员的值是以下字符串之一： Point ， MultiPoint ， LineString ， MultiLineString ， Polygon ， MultiPolygon ， GeometryCollection ， Feature 或 FeatureCollection 。

除“GeometryCollection”外的其他任何类型的GeoJSON几何对象必须有一个名为“coordinates”的成员。“coordinates”成员的值总是一个数组。 此数组中元素的结构由几何的类型来确定。

例如：Point时coordinates对应坐标点（数组）。
coordinates:位置由数字数组表示。至少有两个元素，可以有更多元素。元素的顺序必须遵循x，y，z顺序（东坐标，北坐标，投影坐标系中坐标的高度，或地理坐标系中坐标的经度，纬度，高度）

//在mapbox对应数据来源中引用geojson
map.addSource(idnanme, {
        type: "geojson", //geojson中常用到表示地理信息的数据格式，对于点线面等基本图形，都有其标准的表示方法。
        data: this.geoData(lng, lat)
      });
geoData(lng, lat) {
      let geo = {
        type: "FeatureCollection", //特征集，包含所有type 哈哈哈哈 流氓！
        features: [
          {
            type: "Feature",
            geometry: {
              type: "Point", //点
              coordinates: [lng, lat] //位置由数字数组表示。至少有两个元素，可以有更多元素。元素的顺序必须遵循x，y，z顺序（东坐标，北坐标，投影坐标系中坐标的高度，或地理坐标系中坐标的经度，纬度，高度）
            }
          }
        ]
      };
      return geo;
    },

类型	coordinates值
点（Point）	点坐标为x，y顺序{“coordinates”: [-115.81, 37.24], “type”: “Point”}
点集合（MultiPoint）	位置数组
线（LineString）	“coordinates”成员必须是两个或多个位置的数组 geometry: { type: “LineString”,coordinates: tmpRoute}
线集合（MultiLineString）	“coordinates”成员必须是线坐标数组的数组
多边形（Polygon）	“coordinates”成员必须是线环坐标数组的数组。对拥有多个环的多边形来说，第一个必须是外部环，其他任何环必须是内部环或孔。
多边形集合（MultiPolygon）	“coordinates”成员必须是多边形坐标数组的数组
几何集合（GeometryCollection）	GeometryCollection的geometry数组中的每个元素是上述几何对象之一 {“geometries”: [{“coordinates”: [23.532, -63.12], “type”: “Point”}, {“coordinates”: [[-152.62, 51.21], [5.21, 10.69]], “type”: “LineString”}], “type”: “GeometryCollection”}
要素对象（Feature）	没看懂== {“geometry”: {“coordinates”: [-3.68, 40.41], “type”: “Point”}, “id”: 27, “properties”: {}, “type”: “Feature”}
要素集合对象（FeatureCollection）	类型为“FeatureCollection”的GeoJSON对象是要素集合对象

geojson在mapbox中的使用
source的类型：
1.type: “geojson” （点（circle）线（line）面（fill）图标（symbol））【map.getSource(‘geojson’).setData(geojson)给数据源赋值】

2.type: “image” （图片）【map.getSource(“radar”).updateImage({ url: getPath() });】

3.type: ‘canvas’,

4.type: “raster”, （瓦片WMS 服务加载）

getRoute(tmpRoute) { //路线渲染的方法，传入路线坐标
      let map = this.map; 
      map.addSource("drowlines", {  //设置数据来源
        type: "geojson", //type定义为geojson
        data: this.geo_routerDate(tmpRoute) //外接方法传入
      });

      map.addLayer({
        id: "drowlineslayer",
        type: "line",
        source: "drowlines", //对应数据来源
        paint: {   //线路样式
          "line-width": 1,
          "line-color": ["get", "color"]
        }
      });
    },

geojson:

geo_routerDate(tmpRoute) {
      let geo = {
        type: "FeatureCollection", 
        //type:"GeometryCollection"//是多种基本地理要素的集合，就是里面可以包含点、线、面要素。GeometryCollection不需要放在FeatureCollection里："geometries": []
        features: [ //地理要素放在features的列表里
          {
            type: "Feature",
            properties: {  //properties里面可以封装各种属性，例如名称、标识颜色等等。
              color: "#000" 
            },
            geometry: { //首先是将这些要素封装到单个的geometry里，然后作为一个个的Feature（也就是要素）；要素放到一个要素集合里，从树状结构来理解FeatureCollection就是根节点
              type: "LineString",//type，具体表述了数据的类型，可以是点，线，以及面。具体有：“Point”, “MultiPoint”, “LineString”, “MultiLineString”, “Polygon”, “MultiPolygon” “点”、“多点”、“线串”、“多线串”、“多边形”、“多多边形”
              coordinates: tmpRoute //并且不同的type会有不同的coordinates值
            }
          }
        ]
      };
      return geo;
    },

Mapbox-GL样式 -->sources（数据来源）和layers（界面呈现的样子）

sources （地图的数据）

Sources属性提供地图数据，数据的格式由“type”指定，目前支持vector、raster、geojson、video四种.
瓦片数据（矢量瓦片和栅格瓦片）必须指定对应的TileJSON文件，并在TileJSON中指定数据详情，有两种方式指定：
1、直接在属性中通过”tiles”,”minzoom”,”maxzoom”指定。
2、通过url引入外部json文件

   getIronSource() {
      var resp = {
        type: "vector", //因为不同于raster通过像素点绘制，因此不会出现放大后地图变模糊的情况。
        scheme: "tms",
        //url:'',//可灵活，直接引入json文件
        tiles: [
          "http://geoserver发布的地址：端口/geoserver/gwc/service/tms/1.0.0/地址信息.pbf"
        ],
        minzoom: 10,
        maxzoom: 14
      };
      return resp;
    },

Sources的type值	对应意义
vector	矢量瓦片数据源，必须为Mapbox矢量瓦片格式
raster	栅格瓦片数据源
geojson	Geojson数据源，数据通过一个”data”属性指定，值可以为url，也可以为geojson对象。
video	视频数据源，url是一个字符串数组，为了保证不同浏览器的兼容性，每个url都会创建一个视频元素的数据源。

 map.addSource("Routpoin", {
        type: "geojson",
        data: this.getIronSource() //引入geojson对象
      });

Layers （界面呈现的样子）

Layers的每个style layer都必须制定一个”type”属性，”type”属性的取值包括background, fill, line, symbol, raster，每个层有两种属性指定那些数据应该怎样渲染，分别是”layout”属性和”paint”属性。
layout属性会先于paint属性被处理，其定义了该层应该怎样传到GPU，某一层可以通过”ref”属性共享其它层layout。并且这是推荐的做法，因为这样可以减少处理时间，并且节省GPU存储空间。
两个参考其他层的layout属性的层可以有相互独立的paint属性。每个层的paint属性还能指定一个或多个class。
————————————————

background类型的layer不需要绑定source之外。其他的都需要有source。fill类型的layer只负责填充；line类型的layer只负责线条；symbol类型的layer会处理sprite，文字等；raster类型的layer就只负责图片， circle类型的layer是更高一层的业务处理需要。

背景：background
填充：fill
线：line
处理sprite/文字：symbol
图片：raster