mapbox 样式分离

作者: hehehehe | 来源:发表于2021-01-13 11:38 被阅读0次

mapbox 样式分离
Mapbox GL JS本地化实践
JavaScript 【02】jQuery做轮播
Tableau与Mapbox集成之经典样式
maputnik 配置本地矢量切片的样式
地理空间数据的web可视化
怎样理解内容与样式分离的原则
mapbox注销事件问题
Mapbox源码分析（1）样式加载
Openlayers指南-矢量切片图层

github上的样式实例
https://github.com/jingsam/mapbox-gl-styles/blob/master/Dark.json
官方api
https://docs.mapbox.com/mapbox-gl-js/api/map/#map#setstyle
官方demo

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Change a map's style</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    #menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
</style>

<div id="map"></div>
<div id="menu">
    <input
        id="streets-v11"
        type="radio"
        name="rtoggle"
        value="streets"
        checked="checked"
    />
    <label for="streets-v11">streets</label>
    <input id="light-v10" type="radio" name="rtoggle" value="light" />
    <label for="light-v10">light</label>
    <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
    <label for="dark-v10">dark</label>
    <input id="outdoors-v11" type="radio" name="rtoggle" value="outdoors" />
    <label for="outdoors-v11">outdoors</label>
    <input id="satellite-v9" type="radio" name="rtoggle" value="satellite" />
    <label for="satellite-v9">satellite</label>
</div>
<script>
    mapboxgl.accessToken = 'pk.eyJ1IjoicmFkaTIwMTUiLCJhIjoiY2luaW04ODg4MHdybnRxa2oydm5venJqYyJ9.uGY2VxwsRwqWIXJNcruZdA';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        zoom: 13,
        center: [4.899, 52.372]
    });

    var layerList = document.getElementById('menu');
    var inputs = layerList.getElementsByTagName('input');

    function switchLayer(layer) {
        var layerId = layer.target.id;
        map.setStyle('mapbox://styles/mapbox/' + layerId);
    }

    for (var i = 0; i < inputs.length; i++) {
        inputs[i].onclick = switchLayer;
    }
</script>

</body>
</html>

style就是这样一个格式字符串或者json

image.png

自定义style

{
    "version": 8,
    "name": "Mapbox Streets",
    "sprite": "mapbox://sprites/mapbox/streets-v8",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "sources": {...},
    "layers": [...]
}

{
  "name": "mapbox_baidu",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "version": 8,
  "sources": {
    "AD_Road_Source": {
      "type": "geojson",
      "data": "./AD_Road2.geojson"
    },
    "AD_LaneDivider_Source": {
      "type": "geojson",
      "data": "./AD_LaneDivider2.geojson"
    },
    "AD_Lane_Source": {
      "type": "geojson",
      "data": "./AD_Lane2.geojson"
    }
  },
  "layers": [
    {
      "id": "background",
      "type": "background",
      "paint": {
        "background-color": "pink"
      }
    },
    {
      "id": "AD_Lane_Layer",
      "type": "line",
      "source": "AD_Lane_Source",
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "red",
        "line-width": 2
      }
    },
    {
      "id": "text-AD_Lane",
      "type": "symbol",
      "source": "AD_Lane_Source",
      "layout": {
        "text-field": [
          "get",
          "LANE_ID"
        ],
        "text-size": 22
      },
      "paint": {
        "text-color": "#000000"
      }
    },
    {
      "id": "AD_LaneDivider_Layer",
      "type": "line",
      "source": "AD_LaneDivider_Source",
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "yellow",
        "line-width": 2
      }
    },
    {
      "id": "text-AD_LaneDivider",
      "type": "symbol",
      "source": "AD_LaneDivider_Source",
      "layout": {
        "text-field": [
          "get",
          "LDIV_ID"
        ],
        "text-size": 22
      },
      "paint": {
        "text-color": "#000000"
      }
    },
    {
      "id": "AD_Road_Layer",
      "type": "line",
      "source": "AD_Road_Source",
      "layout": {
        "line-join": "round",
        "line-cap": "round"
      },
      "paint": {
        "line-color": "green",
        "line-width": 2
      }
    },
    {
      "id": "text-AD_Road",
      "type": "symbol",
      "source": "AD_Road_Source",
      "layout": {
        "text-field": [
          "get",
          "ROAD_ID"
        ],
        "text-size": 22
      },
      "paint": {
        "text-color": "#000000"
      }
    }
  ]
}

    var map = new mapboxgl.Map({
        container: "map",
        style:"admap.json",
        // style: "mapbox://styles/mapbox/streets-v11",
        // style: {
        //     "name": "mapbox_baidu",
        //     "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
        //     "version": 8,
        //     "sources": {},
        //     "layers": []
        // },
        center: [121.456052, 31.1710348],
        zoom: 15
    });
    var toggle = true;
    map.on("click", function(e) {
        if(toggle){
            toggle = false;
            map.setStyle('admap2.json')
        }else{
            toggle = true;
            map.setStyle('admap.json')
        }
    });