Style.json详解

在mapbox-gl地图开发过程中，style无疑是最重要的结构。它是数据驱动地图的核心，地图依据此绘制加载；同时它也是地图诊断问题的核心，地图上图层出不来，图标没加载，文字标识不存在，无不基于此作为最终解决手段

加载简单地图

地图加载最简单的结构如下，我们核心的style是一个json对象，我们初始化时设置给地图，并且在添加，删除，更新图层时，都是在操作此对象

    this.mapStyle = require('./static/map.json');
    this.map = new mapboxgl.Map({
      accessToken: this.accessToken,
      container: this.$refs.map,
      interactive: true,
      style:
        this.mapStyle || "mapbox://styles/haxzie/ck7h838qb0bik1iofe0k2i3f2",
      center: [this.viewState.longitude, this.viewState.latitude],
      zoom: this.viewState.zoom,
      pitch: this.viewState.pitch,
      bearing: this.viewState.bearing,
    });

获取style

map.getStyle()

style详解

1. version 没什么特殊意义，可能时js v8引擎
2. sprite:所有的地图图标从此加载，此url往往对应url.json+url.png
3. glyphs:地图上所有标注所依赖的文字，都要制作成这种格式，按需加载 sources：地图上所有数据数据源,只与数据相关，与渲染无关
4. layers:地图上实际图层，关乎渲染的一切，包括图标，标注，图层的顺序【数组顺序】，颜色等，这个要经常查阅文档

数据源 sources

数据源分为三类 vector,raster以及geojson，可以以目的默认为两类
1.死数据:基本不会更改的，不动态生成的vector,raster
2.活数据：通过接口可组装的，一般用geojson,其中的data可以指定setData(data),data是一个元素几何featureCollection

layer

有了数据源，我们就可以说明如何绘制数据了
常见的有以下几种
1.circle:圆点
2.symbol :图标（加标注）
3.line:线
4.fill :多边形
5.fill-extrusion :多边形拉起
6.raster:相当与绘制图片
7.hillshade:绘制地形

背景颜色

{
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "#fff",
        "background-opacity": 1
      }
    }

fill,多边形

  {
      "id": "greenground",
      "type": "fill",
      "source": "greenground",
      "source-layer": "greenground",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "fill-color": "#b6e59e"
      }
    },

line

  {
      "id": "provincialhighway",
      "type": "line",
      "source": "provincialhighway",
      "source-layer": "provincialhighway",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color": "#F2934A",
        "line-opacity": 1,
        "line-width": 4
      }
    }

symbol

 {
      "id": "checkwell",
      "type": "symbol",
      "minzoom": 15,
      "source": "checkwell",
      "source-layer": "checkwell",
      "layout": {
        "icon-image": "bg-checkwell_n",
        "icon-size": 1.5
      }
    }

raster

  {
      "id": "tdt",
      "type": "raster",
      "source": "tdt",
      "paint": {
        "raster-opacity": 0.5
      }
    }

fill-extrusion

{
	'id': '3d-buildings',
	'source': 'composite',
	'source-layer': 'building',
	'filter': ['==', 'extrude', 'true'],
	'type': 'fill-extrusion',
	'minzoom': 15,
	'paint': {
		'fill-extrusion-color': '#aaa',
		'fill-extrusion-height': [
			"interpolate", ["linear"],
			["zoom"],
			15, 0,
			15.05, ["get", "height"]
		],
		'fill-extrusion-base': [
			"interpolate", ["linear"],
			["zoom"],
			15, 0,
			15.05, ["get", "min_height"]
		],
		'fill-extrusion-opacity': .6
	}

以上时最常用的几种绘制说明，还有很多属性需要查询文档

使用style来诊断

说一下一种常规问题，比如说一个点图层加上去了，但是图标出不来；
1.map.getStyle()获取到完整json
2.style.sprite查询网络请求中是否请求了style.sprite+‘.png’/‘.json’;如果没有，则sprite缺失导致，否则需要进一步看
3.style.source获取对应数据源style.source.myptlayer,如果时geojson类型的可以查看其data属性，如果里面featureCollection对象的features为空说明没有数据,否则下一步；
4.style.layers查找到定义的图层名,查看其icon是否设置，查看其是否开启layout{visibility:‘visible’}；如果为none,则不可见;否则需要把icon的值到2所请求的sprite.json中查找；
以上就是一般诊断过程

mapbox-gl精髓的部分=>表达式

比如说一个线图层，我希望某个属性红色，某个属性白色,默认黑色，其中roadType需要在数据的properties里面有

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        roadType:1
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            67.1484375,
            59.88893689676585
          ],
          [
            146.6015625,
            61.938950426660604
          ]
        ]
      }
    }
  ]
}

  {
      "id": "provincialhighway",
      "type": "line",
      "source": "provincialhighway",
      "source-layer": "provincialhighway",
      "layout": {
        "visibility": "visible"
      },
      "paint": {
        "line-color":["get","roadType",
        1,"#f00",
        2,"#fff",
        "#000"
		],
        "line-opacity": 1,
        "line-width": 4
      }
    }