Mapbox GL JS 相关连接：
https://docs.mapbox.com/mapbox-gl-js/api/
https://github.com/mapbox/mapbox-gl-js
https://mp.weixin.qq.com/s/44zNqiFjJ4quc0AKG0_Vqw
https://www.jianshu.com/p/693f38ec5730
一、注册鼠标悬浮
//注册鼠标悬浮
map.on("mousemove", "symbol3", function(e) {
map.getCanvas().style.cursor = "pointer";
});
map.on("mouseleave", "symbol3", function() {
map.getCanvas().style.cursor = "";
});
二、注册监听
//注册监听
map.on("click", "symbol3", function(e) {
map.getCanvas().style.cursor = "pointer";
var p = e.features[0].properties;
var id = p.id;
map.setFilter("selSymbol3", ["==", "id", id]);
});
三、筛选数据
map.setFilter('symbol', ['==', 'name', 'dangerous']);
四、自定义一个浮云组件，使用marker
//浮云 var el = document.getElementById("baseMapPopup"); var baseMapPopup = new mapboxgl.Marker(el).setLngLat([0, 0]).addTo(map).setOffset([0,-10]);
五、热力图图层
/** * 添加热力图图层 * @param map * @param geojsonData * @param option * @constructor */ var AddHeatMap = function(map, geojsonData, option) { var heatData = geojsonData ? geojsonData : require('Point.json'); //热力图数据 var pointData = { "type": "geojson", "data": heatData }; //点 map.addLayer({ "id": "heat", "type": "heatmap", "source": pointData, "paint": { "heatmap-weight": [ "interpolate", ["linear"], ["get", 'count'], 0, 0, 6, 1 ], "heatmap-intensity": [ "interpolate", ["linear"], ["zoom"], 0, 1, 9, 3 ], "heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(0, 160, 234,0)", 0.2, "rgb(0, 160, 234)", 0.4, "rgb(0, 200, 100)", 0.6, "rgb(251, 239, 34)", 0.8, "rgb(242, 141, 38)", 1, "rgb(190, 49, 31)" ], "heatmap-radius": [ "interpolate", ["linear"], ["zoom"], 0, 2, 9, 8 ], } }); };
六、计算经纬度距离
//计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度 function getDistance(lat1,lng1,lat2,lng2){ var radLat1 = Rad(lat1); var radLat2 = Rad(lat2); var a = radLat1 - radLat2; var b = Rad(lng1) - Rad(lng2); var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); s = s *6378.137 ;// EARTH_RADIUS; s = Math.round(s * 10000) / 10; //输出为公里 let result={ dis:s, consa:a, sina:b } return result; function Rad(d){ return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。 }
七、添加图层（填充、纹理、描边）
var citySource = { "type": "geojson", "data": cityJson }; //填充 map.addLayer({ 'id': 'cityFill', 'type': 'fill', 'source': citySource, 'layout': {}, 'paint': { 'fill-color': '#003997', 'fill-opacity': 0.4 } }); //纹理 map.addLayer({ 'id': 'cityRegion', 'type': 'fill', 'source': citySource, 'layout': {}, 'paint': { 'fill-outline-color': 'rgba(0,0,0,0)', 'fill-pattern': 'darkBlue' //纹理，地图初始化时必须已加载该图片 } }, 'cityFill'); } //描边 map.addLayer({ 'id': 'cityBorder', 'type': 'line', 'source': citySource, 'layout': {}, 'paint': { 'line-color': '#00c4ff', "line-width": { "base": 1.5, "stops": [ [5, 1], [7, 2], [11, 3] ] }, "line-opacity": 1 } });
八，离线化Mapbox地图实践方法
var webUrl = config.PROXY+'?url='+ config.WEBURL//'http://localhost:8080/ProxyServlet/proxyHandler?url=http://localhost:8080/'; var mapboxTileUrl = webUrl + "mapboxLayer/{z}/{x}/{y}.pbf"; //mapbox瓦片地址 var buildingUrl = webUrl+'QHbuilding/building2.json';//房屋面数据地址 var linesUrl = webUrl+'QHbuilding/lines.json';//分区线数据地址 //可在mapbox制图中生成 var MAPSTYLE={ "version": 8, "name": "Dark", "center": [113.890921, 22.497136], "zoom": 13, "pitch": 60, "sources": { "composite": {//瓦片 "type": "vector", "scheme": "xyz", "tiles": [mapboxTileUrl] }, "building":{ "type":'geojson', "data":buildingUrl }, 'lines':{ 'type':'geojson', 'data':linesUrl } }, "layers": [ { "id": "land", "type": "background", "layout": {}, "paint": {"background-color": "#011d42"} }, { "id": "landcover", "type": "fill", "source": "composite", "source-layer": "landcover", "maxzoom": 7, "layout": {}, "paint": { "fill-color": "hsl(55, 1%, 20%)", "fill-opacity": [ "interpolate", ["exponential", 1.5], ["zoom"], 2, 0.3, 7, 0 ], "fill-antialias": false } }, { "id": "national-park", "type": "fill", "source": "composite", "source-layer": "landuse_overlay", "minzoom": 5, "filter": ["==", ["get", "class"], "national_park"], "layout": {}, "paint": { "fill-color": "hsl(132, 2%, 20%)", "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 5, 0, 6, 0.5 ] } }, { "id": "landuse", "type": "fill", "source": "composite", "source-layer": "landuse", "minzoom": 5, "filter": [ "match", ["get", "class"], ["park", "airport", "glacier", "pitch", "sand"], true, false ], "layout": {}, "paint": { "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 5, 0, 6, ["match", ["get", "class"], "glacier", 0.5, 1] ], "fill-color": "#00142f" } }, { "id": "water-shadow", "type": "fill", "source": "composite", "source-layer": "water", "layout": {}, "paint": { "fill-translate-anchor": "viewport", "fill-translate": [ "interpolate", ["exponential", 1.2], ["zoom"], 7, ["literal", [0, 0]], 16, ["literal", [-1, -1]] ], "fill-color": "#0c0d0d" } }, { "id": "waterway", "type": "line", "source": "composite", "source-layer": "waterway", "minzoom": 8, "layout": { "line-cap": ["step", ["zoom"], "butt", 11, "round"], "line-join": "round" }, "paint": { "line-color": "#05325b", "line-width": [ "interpolate", ["exponential", 1.3], ["zoom"], 9, ["match", ["get", "class"], ["canal", "river"], 0.1, 0], 20, ["match", ["get", "class"], ["canal", "river"], 8, 3] ], "line-opacity": [ "interpolate", ["linear"], ["zoom"], 8, 0, 8.5, 1 ] } }, { "id": "water", "type": "fill", "source": "composite", "source-layer": "water", "layout": {}, "paint": {"fill-color": "#05325b"} }, { "id": "hillshade", "type": "fill", "source": "composite", "source-layer": "hillshade", "maxzoom": 16, "layout": {}, "paint": { "fill-color": [ "match", ["get", "class"], "shadow", "#00142f", "hsl(0, 0%, 100%)" ], "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 14, [ "match", ["get", "level"], [67, 56], 0.06, [89, 78], 0.03, 0.04 ], 16, 0 ], "fill-antialias": false } }, { "id": "land-structure-polygon", "type": "fill", "source": "composite", "source-layer": "structure", "minzoom": 13, "filter": [ "all", ["==", ["geometry-type"], "Polygon"], ["==", ["get", "class"], "land"] ], "layout": {}, "paint": {"fill-color": "#011d42"} }, { "id": "land-structure-line", "type": "line", "source": "composite", "source-layer": "structure", "minzoom": 13, "filter": [ "all", ["==", ["geometry-type"], "LineString"], ["==", ["get", "class"], "land"] ], "layout": {"line-cap": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.99], ["zoom"], 14, 0.75, 20, 40 ], "line-color": "hsl(55, 1%, 20%)" } }, { "id": "aeroway-polygon", "type": "fill", "source": "composite", "source-layer": "aeroway", "minzoom": 11, "filter": [ "all", ["==", ["geometry-type"], "Polygon"], [ "match", ["get", "type"], ["runway", "taxiway", "helipad"], true, false ] ], "layout": {}, "paint": { "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 11, 0, 11.5, 1 ] } }, { "id": "aeroway-line", "type": "line", "source": "composite", "source-layer": "aeroway", "minzoom": 9, "filter": ["==", ["geometry-type"], "LineString"], "layout": {}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 9, [ "match", ["get", "type"], "runway", 1, "taxiway", 0.5, 0.5 ], 18, ["match", ["get", "type"], "runway", 80, "taxiway", 20, 20] ], "line-color": "hsl(0, 0%, 27%)" } }, { "id": "building", "type": "fill", "source": "composite", "source-layer": "building", "minzoom": 15, "filter": [ "all", ["!=", ["get", "type"], "building:part"], ["==", ["get", "underground"], "false"] ], "layout": {}, "paint": { "fill-outline-color": "hsl(55, 1%, 15%)", "fill-opacity": [ "interpolate", ["linear"], ["zoom"], 15, 0, 16, 1 ], "fill-color": "#013878" } }, { "id": "tunnel-street-minor-low", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "step", ["zoom"], [ "match", ["get", "class"], ["street", "street_limited", "track", "primary_link"], true, false ], 14, [ "match", ["get", "class"], [ "street", "street_limited", "track", "primary_link", "secondary_link", "tertiary_link", "service" ], true, false ] ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], 2, "track", 1, 0.5 ], 18, [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], 18, 12 ] ], "line-color": "hsl(185, 2%, 15%)", "line-opacity": ["step", ["zoom"], 1, 14, 0] } }, { "id": "tunnel-street-minor-case", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "step", ["zoom"], [ "match", ["get", "class"], ["street", "street_limited", "track", "primary_link"], true, false ], 14, [ "match", ["get", "class"], [ "street", "street_limited", "track", "primary_link", "secondary_link", "tertiary_link", "service" ], true, false ] ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.75, 20, 2 ], "line-color": "hsl(185, 2%, 29%)", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], 2, "track", 1, 0.5 ], 18, [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], 18, 12 ] ], "line-opacity": ["step", ["zoom"], 0, 14, 1], "line-dasharray": [3, 3] } }, { "id": "tunnel-primary-secondary-tertiary-case", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "match", ["get", "class"], ["primary", "secondary", "tertiary"], true, false ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 10, [ "match", ["get", "class"], "primary", 1, ["secondary", "tertiary"], 0.75, 0.75 ], 18, 2 ], "line-color": "#484b4b", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, [ "match", ["get", "class"], "primary", 0.75, ["secondary", "tertiary"], 0.1, 0.1 ], 18, [ "match", ["get", "class"], "primary", 32, ["secondary", "tertiary"], 26, 26 ] ], "line-dasharray": [3, 3] } }, { "id": "tunnel-major-link-case", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "match", ["get", "class"], ["motorway_link", "trunk_link"], true, false ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.75, 20, 2 ], "line-color": "hsl(185, 2%, 29%)", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-dasharray": [3, 3] } }, { "id": "tunnel-motorway-trunk-case", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], ["match", ["get", "class"], ["motorway", "trunk"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 10, 1, 18, 2 ], "line-color": "hsl(185, 2%, 29%)", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.75, 18, 32 ], "line-dasharray": [3, 3] } }, { "id": "tunnel-construction", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 14, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], ["==", ["get", "class"], "construction"], ["==", ["geometry-type"], "LineString"] ], "layout": {}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, 2, 18, 18 ], "line-color": "hsl(187, 2%, 15%)", "line-dasharray": [ "step", ["zoom"], ["literal", [0.4, 0.8]], 15, ["literal", [0.3, 0.6]], 16, ["literal", [0.2, 0.3]], 17, ["literal", [0.2, 0.25]], 18, ["literal", [0.15, 0.15]] ] } }, { "id": "tunnel-path", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], ["==", ["get", "class"], "path"], ["!=", ["get", "type"], "steps"], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 15, 1, 18, 4 ], "line-dasharray": [ "step", ["zoom"], ["literal", [1, 0]], 15, ["literal", [1.75, 1]], 16, ["literal", [1, 0.75]], 17, ["literal", [1, 0.5]] ], "line-color": "hsl(185, 2%, 15%)" } }, { "id": "tunnel-steps", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 14, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], ["==", ["get", "class"], "steps"], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 15, 1, 16, 1.6, 18, 6 ], "line-color": "hsl(185, 2%, 15%)", "line-dasharray": [ "step", ["zoom"], ["literal", [1, 0]], 15, ["literal", [1.75, 1]], 16, ["literal", [1, 0.75]], 17, ["literal", [0.3, 0.3]] ] } }, { "id": "tunnel-major-link", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "match", ["get", "class"], ["motorway_link", "trunk_link"], true, false ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-color": "hsl(185, 2%, 15%)" } }, { "id": "tunnel-pedestrian", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], ["==", ["get", "class"], "pedestrian"], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, 0.5, 18, 12 ], "line-color": "hsl(185, 2%, 15%)", "line-dasharray": [ "step", ["zoom"], ["literal", [1, 0]], 15, ["literal", [1.5, 0.4]], 16, ["literal", [1, 0.2]] ] } }, { "id": "tunnel-street-minor", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "step", ["zoom"], [ "match", ["get", "class"], ["street", "street_limited", "track", "primary_link"], true, false ], 14, [ "match", ["get", "class"], [ "street", "street_limited", "track", "primary_link", "secondary_link", "tertiary_link", "service" ], true, false ] ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], 2, "track", 1, 0.5 ], 18, [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], 18, 12 ] ], "line-color": "hsl(185, 2%, 15%)", "line-opacity": ["step", ["zoom"], 0, 14, 1] } }, { "id": "tunnel-primary-secondary-tertiary", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], [ "match", ["get", "class"], ["primary", "secondary", "tertiary"], true, false ], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, [ "match", ["get", "class"], "primary", 0.75, ["secondary", "tertiary"], 0.1, 0.1 ], 18, [ "match", ["get", "class"], "primary", 32, ["secondary", "tertiary"], 26, 26 ] ], "line-color": "#000000" } }, { "id": "tunnel-motorway-trunk", "type": "line", "metadata": {"mapbox:group": "1444855769305.6016"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", ["==", ["get", "structure"], "tunnel"], ["match", ["get", "class"], ["motorway", "trunk"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.75, 18, 32 ], "line-color": "hsl(185, 2%, 15%)" } }, { "id": "road-pedestrian-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 12, "filter": [ "all", ["==", ["get", "class"], "pedestrian"], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, 2, 18, 14.5 ], "line-color": "#000000", "line-opacity": ["step", ["zoom"], 0, 14, 1] } }, { "id": "road-minor-low", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", [ "step", ["zoom"], ["==", ["get", "class"], "track"], 14, [ "match", ["get", "class"], ["track", "secondary_link", "tertiary_link", "service"], true, false ] ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, ["match", ["get", "class"], "track", 1, 0.5], 18, 12 ], "line-opacity": ["step", ["zoom"], 1, 14, 0], "line-color": "#000000" } }, { "id": "road-street-low", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 11, "filter": [ "all", [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-opacity": ["step", ["zoom"], 1, 14, 0], "line-color": "#000000" } }, { "id": "road-minor-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", [ "step", ["zoom"], ["==", ["get", "class"], "track"], 14, [ "match", ["get", "class"], ["track", "secondary_link", "tertiary_link", "service"], true, false ] ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.75, 20, 2 ], "line-color": "#413201", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, ["match", ["get", "class"], "track", 1, 0.5], 18, 12 ], "line-opacity": ["step", ["zoom"], 0, 14, 1] } }, { "id": "road-street-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 11, "filter": [ "all", [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.75, 20, 2 ], "line-color": "#000000", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-opacity": ["step", ["zoom"], 0, 14, 1] } }, { "id": "road-secondary-tertiary-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "filter": [ "all", [ "match", ["get", "class"], ["secondary", "tertiary"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 10, 0.75, 18, 2 ], "line-color": "#413201", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.1, 18, 26 ] } }, { "id": "road-primary-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "filter": [ "all", ["==", ["get", "class"], "primary"], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 10, 1, 18, 2 ], "line-color": "#413201", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.75, 18, 32 ] } }, { "id": "road-major-link-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 10, "filter": [ "all", [ "match", ["get", "class"], ["motorway_link", "trunk_link"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.75, 20, 2 ], "line-color": "#000000", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-opacity": ["step", ["zoom"], 0, 11, 1] } }, { "id": "road-motorway-trunk-case", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "filter": [ "all", ["match", ["get", "class"], ["motorway", "trunk"], true, false], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 10, 1, 18, 2 ], "line-color": "#000000", "line-gap-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.75, 18, 32 ], "line-opacity": [ "step", ["zoom"], ["match", ["get", "class"], "motorway", 1, 0], 6, 1 ] } }, { "id": "road-construction", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 14, "filter": [ "all", ["==", ["get", "class"], "construction"], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, 2, 18, 18 ], "line-color": "#000000", "line-dasharray": [ "step", ["zoom"], ["literal", [0.4, 0.8]], 15, ["literal", [0.3, 0.6]], 16, ["literal", [0.2, 0.3]], 17, ["literal", [0.2, 0.25]], 18, ["literal", [0.15, 0.15]] ] } }, { "id": "road-path", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 12, "filter": [ "all", ["==", ["get", "class"], "path"], [ "step", ["zoom"], [ "!", [ "match", ["get", "type"], ["steps", "sidewalk", "crossing"], true, false ] ], 16, ["!=", ["get", "type"], "steps"] ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 13, 0.5, 14, 1, 15, 1, 18, 4 ], "line-color": "#000000", "line-dasharray": [ "step", ["zoom"], ["literal", [1, 0]], 15, ["literal", [1.75, 1]], 16, ["literal", [1, 0.75]], 17, ["literal", [1, 0.5]] ] } }, { "id": "road-steps", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 14, "filter": [ "all", ["==", ["get", "type"], "steps"], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 15, 1, 16, 1.6, 18, 6 ], "line-color": "#000000", "line-dasharray": [ "step", ["zoom"], ["literal", [1, 0]], 15, ["literal", [1.75, 1]], 16, ["literal", [1, 0.75]], 17, ["literal", [0.3, 0.3]] ] } }, { "id": "road-major-link", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 10, "filter": [ "all", [ "match", ["get", "class"], ["motorway_link", "trunk_link"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-color": "#000000" } }, { "id": "road-pedestrian", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 12, "filter": [ "all", ["==", ["get", "class"], "pedestrian"], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, 0.5, 18, 12 ], "line-color": "#000000", "line-dasharray": [ "step", ["zoom"], ["literal", [1, 0]], 15, ["literal", [1.5, 0.4]], 16, ["literal", [1, 0.2]] ] } }, { "id": "road-minor", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", [ "step", ["zoom"], ["==", ["get", "class"], "track"], 14, [ "match", ["get", "class"], ["track", "secondary_link", "tertiary_link", "service"], true, false ] ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, ["match", ["get", "class"], "track", 1, 0.5], 18, 12 ], "line-color": "#000000", "line-opacity": ["step", ["zoom"], 0, 14, 1] } }, { "id": "road-street", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 11, "filter": [ "all", [ "match", ["get", "class"], ["street", "street_limited", "primary_link"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 12, 0.5, 14, 2, 18, 18 ], "line-color": "#000000", "line-opacity": ["step", ["zoom"], 0, 14, 1] } }, { "id": "road-secondary-tertiary", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "filter": [ "all", [ "match", ["get", "class"], ["secondary", "tertiary"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.1, 18, 26 ], "line-color": "#030303" } }, { "id": "road-primary", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "filter": [ "all", ["==", ["get", "class"], "primary"], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.75, 18, 32 ], "line-color": "#000000" } }, { "id": "road-motorway-trunk", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "filter": [ "all", ["match", ["get", "class"], ["motorway", "trunk"], true, false], ["match", ["get", "structure"], ["none", "ford"], true, false], ["==", ["geometry-type"], "LineString"] ], "layout": {"line-cap": "round", "line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 5, 0.75, 18, 32 ], "line-color": "#000000" } }, { "id": "road-rail", "type": "line", "metadata": {"mapbox:group": "1444855786460.0557"}, "source": "composite", "source-layer": "road", "minzoom": 13, "filter": [ "all", [ "match", ["get", "class"], ["major_rail", "minor_rail"], true, false ], ["match", ["get", "structure"], ["none", "ford"], true, false] ], "layout": {"line-join": "round"}, "paint": { "line-width": [ "interpolate", ["exponential", 1.5], ["zoom"], 14, 0.5, 20, 1 ], "line-color": "#000000" } }, { "id": "admin-1-boundary-bg", "type": "line", "metadata": {"mapbox:group": "1444934295202.7542"}, "source": "composite", "source-layer": "admin", "filter": [ "all", ["==", ["get", "admin_level"], 1], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", "US"], true, false] ], "layout": {"line-join": "bevel"}, "paint": { "line-blur": ["interpolate", ["linear"], ["zoom"], 3, 0, 8, 3], "line-width": [ "interpolate", ["linear"], ["zoom"], 7, 3.75, 12, 5.5 ], "line-opacity": [ "interpolate", ["linear"], ["zoom"], 7, 0, 8, 0.75 ], "line-dasharray": [1, 0], "line-translate": [0, 0], "line-color": "hsl(0, 0%, 10%)" } }, { "id": "admin-0-boundary-bg", "type": "line", "metadata": {"mapbox:group": "1444934295202.7542"}, "source": "composite", "source-layer": "admin", "minzoom": 1, "filter": [ "all", ["==", ["get", "admin_level"], 0], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", "US"], true, false] ], "layout": {}, "paint": { "line-width": [ "interpolate", ["linear"], ["zoom"], 3, 3.5, 10, 8 ], "line-color": "hsl(0, 0%, 10%)", "line-opacity": [ "interpolate", ["linear"], ["zoom"], 3, 0, 4, 0.5 ], "line-translate": [0, 0], "line-blur": ["interpolate", ["linear"], ["zoom"], 3, 0, 10, 2] } }, { "id": "admin-1-boundary", "type": "line", "metadata": {"mapbox:group": "1444934295202.7542"}, "source": "composite", "source-layer": "admin", "filter": [ "all", ["==", ["get", "admin_level"], 1], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", "US"], true, false] ], "layout": {"line-join": "round", "line-cap": "round"}, "paint": { "line-dasharray": [ "step", ["zoom"], ["literal", [2, 0]], 7, ["literal", [2, 2, 6, 2]] ], "line-width": [ "interpolate", ["linear"], ["zoom"], 7, 0.75, 12, 1.5 ], "line-opacity": [ "interpolate", ["linear"], ["zoom"], 2, 0, 3, 1 ], "line-color": [ "interpolate", ["linear"], ["zoom"], 3, "hsl(0, 0%, 27%)", 7, "hsl(0, 0%, 35%)" ] } }, { "id": "admin-0-boundary", "type": "line", "metadata": {"mapbox:group": "1444934295202.7542"}, "source": "composite", "source-layer": "admin", "minzoom": 1, "filter": [ "all", ["==", ["get", "admin_level"], 0], ["==", ["get", "disputed"], "false"], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", "US"], true, false] ], "layout": {"line-join": "round", "line-cap": "round"}, "paint": { "line-color": "hsl(0, 0%, 43%)", "line-width": [ "interpolate", ["linear"], ["zoom"], 3, 0.5, 10, 2 ] } }, { "id": "admin-0-boundary-disputed", "type": "line", "metadata": {"mapbox:group": "1444934295202.7542"}, "source": "composite", "source-layer": "admin", "minzoom": 1, "filter": [ "all", ["==", ["get", "disputed"], "true"], ["==", ["get", "admin_level"], 0], ["==", ["get", "maritime"], "false"], ["match", ["get", "worldview"], ["all", "US"], true, false] ], "layout": {"line-join": "round"}, "paint": { "line-dasharray": [1.5, 1.5], "line-color": "hsl(0, 0%, 14%)", "line-width": [ "interpolate", ["linear"], ["zoom"], 3, 0.5, 10, 2 ] } }, { "id": "lines", "type": "line", "metadata": {}, "source": "lines", // "source-layer": "lines", "layout": {}, "paint": {"line-color": ["get", "color"], "line-width": 1.5} }, { "id": "buildings-1py8ql", "type": "fill-extrusion", "source": "building", // "source-layer": "buildings-1py8ql", "layout": {}, "paint": { "fill-extrusion-color": "#013878", "fill-extrusion-height": ["get", "height"] } } ], }; var map = new mapboxgl.Map({ container: 'oVbaseMap', style:MAPSTYLE });