我正处于开发 map Web 应用程序的第一步，我想使用tilehosting.com 中的 map 以及传单库 (leafletjs.com)。
一般来说它是有效的，但问题是我需要隐藏默认显示的国家和城市标签，但我找不到方法来做到这一点。我在谷歌上搜索了几个小时，但没有找到任何适合我的技巧。我看起来应该很简单，但我一定错过了一些东西。
如何实现这一目标？有人可以发布示例代码吗？
代码示例是 https://www.dxmaps.com/maptest.html
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.js"></script>
<script src="https://www.dxmaps.com/js/leaflet-mapbox-gl.js"></script>
<link rel="stylesheet" href="https://cdn.klokantech.com/mapbox-gl-js/v0.43.0/mapbox-gl.css" />
<style>
#map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
</style>
</head>
<body>
<div id="map"></div>
<p><a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a></p>
<script>
var map = L.map('map').setView([47.3739, 8.5456], 2);
var gl = L.mapboxGL({
attribution: '<a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> © <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
accessToken: 'not-needed',
style: 'https://free.tilehosting.com/styles/basic/style.json?key=XXXXXXSAMPLEXXXXXXXX'
}).addTo(map);
</script>
</body>
</html>
最佳答案
您可以看到您有一个 JSON 样式文件:'https://free.tilehosting.com/styles/basic/style.json?key=XXXXXXSAMPLEXXXXXXXX'，您可以在其中自定义很多内容东西的。这是一个隐藏所有内容的示例:
{"version":8,"name":"Klokantech Basic","metadata":{"mapbox:autocomposite":false,"mapbox:type":"template","maputnik:renderer":"mbgljs","openmaptiles:version":"3.x","openmaptiles:mapbox:owner":"openmaptiles","openmaptiles:mapbox:source:url":"mapbox://openmaptiles.4qljc88t"},"center":[8.54806714892635,47.37180823552663],"zoom":12.241790506353492,"bearing":0,"pitch":0,"sources":{"openmaptiles":{"type":"vector","url":"https://free.tilehosting.com/data/v3.json?key=siggs34vqjoYsni0vRlZ"}},"sprite":"https://free.tilehosting.com/styles/basic/sprite","glyphs":"https://free.tilehosting.com/fonts/{fontstack}/{range}.pbf?key=siggs34vqjoYsni0vRlZ","layers":[{"id":"background","type":"background","paint":{"background-color":"hsl(47, 26%, 88%)"}},{"id":"landuse-residential","type":"fill","source":"openmaptiles","source-layer":"landuse","filter":["all",["==","$type","Polygon"],["==","class","residential"]],"layout":{"visibility":"none"},"paint":{"fill-color":"hsl(47, 13%, 86%)","fill-opacity":0.7}},{"id":"landcover_grass","type":"fill","source":"openmaptiles","source-layer":"landcover","filter":["==","class","grass"],"paint":{"fill-color":"hsl(82, 46%, 72%)","fill-opacity":0.45}},{"id":"park","type":"fill","source":"openmaptiles","source-layer":"park","paint":{"fill-color":"rgba(192, 216, 151, 0.53)","fill-opacity":1}},{"id":"landcover_wood","type":"fill","source":"openmaptiles","source-layer":"landcover","filter":["==","class","wood"],"paint":{"fill-color":"hsl(82, 46%, 72%)","fill-opacity":{"base":1,"stops":[[8,0.6],[22,1]]}}},{"id":"water","type":"fill","source":"openmaptiles","source-layer":"water","filter":["==","$type","Polygon"],"paint":{"fill-color":"hsl(205, 56%, 73%)"}},{"id":"landcover-ice-shelf","type":"fill","source":"openmaptiles","source-layer":"landcover","filter":["==","subclass","ice_shelf"],"layout":{"visibility":"none"},"paint":{"fill-color":"hsl(47, 26%, 88%)","fill-opacity":0.8}},{"id":"landcover-glacier","type":"fill","source":"openmaptiles","source-layer":"landcover","filter":["==","subclass","glacier"],"layout":{"visibility":"none"},"paint":{"fill-color":"hsl(47, 22%, 94%)","fill-opacity":{"base":1,"stops":[[0,1],[8,0.5]]}}},{"id":"landcover_sand","type":"fill","metadata":{},"source":"openmaptiles","source-layer":"landcover","filter":["all",["in","class","sand"]],"paint":{"fill-antialias":false,"fill-color":"rgba(232, 214, 38, 1)","fill-opacity":0.3}},{"id":"landuse","type":"fill","source":"openmaptiles","source-layer":"landuse","filter":["==","class","agriculture"],"layout":{"visibility":"none"},"paint":{"fill-color":"#eae0d0"}},{"id":"landuse_overlay_national_park","type":"fill","source":"openmaptiles","source-layer":"landcover","filter":["==","class","national_park"],"paint":{"fill-color":"#E1EBB0","fill-opacity":{"base":1,"stops":[[5,0],[9,0.75]]}}},{"id":"park_outline","type":"line","source":"openmaptiles","source-layer":"park","layout":{},"paint":{"line-color":"rgba(159, 183, 118, 0.69)","line-dasharray":[0.5,1]}},{"id":"waterway-tunnel","type":"line","source":"openmaptiles","source-layer":"waterway","filter":["all",["==","$type","LineString"],["==","brunnel","tunnel"]],"paint":{"line-color":"hsl(205, 56%, 73%)","line-width":{"base":1.4,"stops":[[8,1],[20,2]]},"line-opacity":1,"line-gap-width":{"stops":[[12,0],[20,6]]},"line-dasharray":[3,3]}},{"id":"waterway","type":"line","source":"openmaptiles","source-layer":"waterway","filter":["all",["==","$type","LineString"],["!in","brunnel","tunnel","bridge"]],"paint":{"line-color":"hsl(205, 56%, 73%)","line-width":{"base":1.4,"stops":[[8,1],[20,8]]},"line-opacity":1}},{"id":"tunnel_railway_transit","type":"line","source":"openmaptiles","source-layer":"transportation","minzoom":0,"filter":["all",["==","$type","LineString"],["==","brunnel","tunnel"],["==","class","transit"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-color":"hsl(34, 12%, 66%)","line-opacity":{"base":1,"stops":[[11,0],[16,1]]},"line-dasharray":[3,3]}},{"id":"building","type":"fill","source":"openmaptiles","source-layer":"building","paint":{"fill-color":"rgba(222, 211, 190, 1)","fill-outline-color":{"stops":[[15,"rgba(212, 177, 146, 0)"],[16,"rgba(212, 177, 146, 0.5)"]]},"fill-opacity":{"base":1,"stops":[[13,0],[15,1]]},"fill-antialias":true}},{"id":"housenumber","type":"symbol","source":"openmaptiles","source-layer":"housenumber","minzoom":17,"filter":["==","$type","Point"],"layout":{"text-field":"{housenumber}","text-size":10,"text-font":["Noto Sans Regular"]},"paint":{"text-color":"rgba(212, 177, 146, 1)"}},{"id":"road_bridge_area","type":"fill","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","Polygon"],["in","brunnel","bridge"]],"layout":{},"paint":{"fill-color":"hsl(47, 26%, 88%)","fill-opacity":0.5}},{"id":"road_path","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["in","class","path","track"]],"layout":{"line-cap":"square","line-join":"bevel"},"paint":{"line-color":"hsl(0, 0%, 97%)","line-dasharray":[1,1],"line-width":{"base":1.55,"stops":[[4,0.25],[20,10]]}}},{"id":"road_minor","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["in","class","minor","service"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"hsl(0, 0%, 97%)","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}}},{"id":"tunnel_minor","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","brunnel","tunnel"],["==","class","minor_road"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-color":"#efefef","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]},"line-dasharray":[0.36,0.18]}},{"id":"tunnel_major","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","brunnel","tunnel"],["in","class","primary","secondary","tertiary","trunk"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,30]]},"line-dasharray":[0.28,0.14]}},{"id":"aeroway-area","type":"fill","metadata":{"mapbox:group":"1444849345966.4436"},"source":"openmaptiles","source-layer":"aeroway","minzoom":4,"filter":["all",["==","$type","Polygon"],["in","class","runway","taxiway"]],"layout":{"visibility":"none"},"paint":{"fill-opacity":{"base":1,"stops":[[13,0],[14,1]]},"fill-color":"rgba(255, 255, 255, 1)"}},{"id":"aeroway-taxiway","type":"line","metadata":{"mapbox:group":"1444849345966.4436"},"source":"openmaptiles","source-layer":"aeroway","minzoom":12,"filter":["all",["in","class","taxiway"],["==","$type","LineString"]],"layout":{"line-cap":"round","line-join":"round","visibility":"none"},"paint":{"line-color":"rgba(255, 255, 255, 1)","line-width":{"base":1.5,"stops":[[12,1],[17,10]]},"line-opacity":1}},{"id":"aeroway-runway","type":"line","metadata":{"mapbox:group":"1444849345966.4436"},"source":"openmaptiles","source-layer":"aeroway","minzoom":4,"filter":["all",["in","class","runway"],["==","$type","LineString"]],"layout":{"line-cap":"round","line-join":"round","visibility":"none"},"paint":{"line-color":"rgba(255, 255, 255, 1)","line-width":{"base":1.5,"stops":[[11,4],[17,50]]},"line-opacity":1}},{"id":"road_trunk_primary","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["in","class","trunk","primary"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,30]]}}},{"id":"road_secondary_tertiary","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["in","class","secondary","tertiary"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,20]]}}},{"id":"road_major_motorway","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","class","motorway"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"hsl(0, 0%, 100%)","line-width":{"base":1.4,"stops":[[8,1],[16,10]]},"line-offset":0}},{"id":"road_oneway","type":"symbol","source":"openmaptiles","source-layer":"transportation","minzoom":15,"filter":["all",["==","oneway",1]],"layout":{"symbol-placement":"line","icon-image":"oneway","symbol-spacing":200,"icon-padding":2,"icon-rotation-alignment":"map","icon-rotate":0,"icon-size":{"stops":[[15,0.5],[19,1]]}},"paint":{"icon-opacity":0.5}},{"id":"road_oneway_opposite","type":"symbol","source":"openmaptiles","source-layer":"transportation","minzoom":15,"filter":["all",["==","oneway",-1]],"layout":{"symbol-placement":"line","icon-image":"oneway","symbol-spacing":200,"icon-padding":2,"icon-rotation-alignment":"map","icon-rotate":180,"icon-size":{"stops":[[15,0.5],[19,1]]}},"paint":{"icon-opacity":0.5}},{"id":"railway-transit","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","class","transit"],["!=","brunnel","tunnel"]],"layout":{"visibility":"none"},"paint":{"line-color":"hsl(34, 12%, 66%)","line-opacity":{"base":1,"stops":[[11,0],[16,1]]}}},{"id":"railway","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["==","class","rail"],"layout":{"visibility":"none"},"paint":{"line-color":"hsl(34, 12%, 66%)","line-opacity":{"base":1,"stops":[[11,0],[16,1]]}}},{"id":"waterway-bridge-case","type":"line","source":"openmaptiles","source-layer":"waterway","filter":["all",["==","$type","LineString"],["==","brunnel","bridge"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-color":"#bbbbbb","line-width":{"base":1.6,"stops":[[12,0.5],[20,10]]},"line-gap-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}}},{"id":"waterway-bridge","type":"line","source":"openmaptiles","source-layer":"waterway","filter":["all",["==","$type","LineString"],["==","brunnel","bridge"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"hsl(205, 56%, 73%)","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}}},{"id":"bridge_minor case","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","brunnel","bridge"],["==","class","minor_road"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-color":"#dedede","line-width":{"base":1.6,"stops":[[12,0.5],[20,10]]},"line-gap-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}}},{"id":"bridge_major case","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","brunnel","bridge"],["in","class","primary","secondary","tertiary","trunk"]],"layout":{"line-cap":"butt","line-join":"miter"},"paint":{"line-color":"#dedede","line-width":{"base":1.6,"stops":[[12,0.5],[20,10]]},"line-gap-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}}},{"id":"bridge_minor","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","brunnel","bridge"],["==","class","minor_road"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#efefef","line-width":{"base":1.55,"stops":[[4,0.25],[20,30]]}}},{"id":"bridge_major","type":"line","source":"openmaptiles","source-layer":"transportation","filter":["all",["==","$type","LineString"],["==","brunnel","bridge"],["in","class","primary","secondary","tertiary","trunk"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"#fff","line-width":{"base":1.4,"stops":[[6,0.5],[20,30]]}}},{"id":"admin_sub","type":"line","source":"openmaptiles","source-layer":"boundary","filter":["in","admin_level",4,6,8],"layout":{"visibility":"none"},"paint":{"line-color":"hsl(0, 0%, 76%)","line-dasharray":[2,1]}},{"id":"admin_country","type":"line","source":"openmaptiles","source-layer":"boundary","filter":["all",["<=","admin_level",2],["==","$type","LineString"]],"layout":{"line-cap":"round","line-join":"round"},"paint":{"line-color":"hsla(0, 8%, 22%, 0.51)","line-width":{"base":1.3,"stops":[[3,0.5],[22,15]]}}},{"id":"poi_label","type":"symbol","source":"openmaptiles","source-layer":"poi","minzoom":14,"filter":["all",["==","$type","Point"],["==","rank",1]],"layout":{"text-size":11,"text-font":["Noto Sans Regular"],"visibility":"none","text-offset":[0,0.5],"icon-size":1,"text-anchor":"top","text-field":"{name:latin}\n{name:nonlatin}","text-max-width":8},"paint":{"text-color":"#666","text-halo-width":1,"text-halo-color":"rgba(255,255,255,0.75)","text-halo-blur":1}},{"id":"airport-label","type":"symbol","source":"openmaptiles","source-layer":"aerodrome_label","minzoom":10,"filter":["all",["has","iata"]],"layout":{"text-size":11,"text-font":["Noto Sans Regular"],"visibility":"none","text-offset":[0,0.5],"icon-size":1,"text-anchor":"top","text-field":"{name:latin}\n{name:nonlatin}","text-max-width":8},"paint":{"text-color":"#666","text-halo-width":1,"text-halo-color":"rgba(255,255,255,0.75)","text-halo-blur":1}},{"id":"road_major_label","type":"symbol","source":"openmaptiles","source-layer":"transportation_name","filter":["==","$type","LineString"],"layout":{"symbol-placement":"line","text-field":"{name:latin} {name:nonlatin}","text-font":["Noto Sans Regular"],"text-transform":"uppercase","text-letter-spacing":0.1,"text-size":{"base":1.4,"stops":[[10,8],[20,14]]},"text-rotation-alignment":"map"},"paint":{"text-color":"#000","text-halo-color":"hsl(0, 0%, 100%)","text-halo-width":2}},{"id":"place_label_other","type":"symbol","source":"openmaptiles","source-layer":"place","minzoom":8,"filter":["all",["==","$type","Point"],["!in","class","city","state","country","continent"]],"layout":{"text-field":"{name:latin}\n{name:nonlatin}","text-font":["Noto Sans Regular"],"text-max-width":6,"text-size":{"stops":[[6,10],[12,14]]},"visibility":"none","text-anchor":"center"},"paint":{"text-color":"hsl(0, 10%, 25%)","text-halo-color":"hsl(0, 0%, 100%)","text-halo-blur":0,"text-halo-width":2}},{"id":"place_label_city","type":"symbol","source":"openmaptiles","source-layer":"place","maxzoom":16,"filter":["all",["==","$type","Point"],["==","class","city"]],"layout":{"text-field":"{name:latin}\n{name:nonlatin}","text-font":["Noto Sans Regular"],"text-max-width":10,"visibility":"none","text-size":{"stops":[[3,12],[8,16]]}},"paint":{"text-color":"hsl(0, 0%, 0%)","text-halo-color":"hsla(0, 0%, 100%, 0.75)","text-halo-blur":0,"text-halo-width":2}},{"id":"country_label-other","type":"symbol","source":"openmaptiles","source-layer":"place","maxzoom":12,"filter":["all",["==","$type","Point"],["==","class","country"],["!has","iso_a2"]],"layout":{"text-field":"{name:latin}","text-font":["Noto Sans Regular"],"text-max-width":10,"text-size":{"stops":[[3,12],[8,22]]},"visibility":"none"},"paint":{"text-color":"hsl(0, 0%, 13%)","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":2,"text-halo-blur":0}},{"id":"country_label","type":"symbol","source":"openmaptiles","source-layer":"place","maxzoom":12,"filter":["all",["==","$type","Point"],["==","class","country"],["has","iso_a2"]],"layout":{"text-field":"{name:latin}","text-font":["Noto Sans Bold"],"text-max-width":10,"text-size":{"stops":[[3,12],[8,22]]},"visibility":"none"},"paint":{"text-color":"hsl(0, 0%, 13%)","text-halo-color":"rgba(255,255,255,0.75)","text-halo-width":2,"text-halo-blur":0}}]}
您必须使样式在本地可用，例如借助 apache。
您可以使用https://jsoneditoronline.org/并将 JSON 放在那里。您会发现:"visibility":"visible"
当您没有键值时，可以手动添加。 在需要的地方将其转为 none。
关于javascript - 隐藏来自tilehosting.com的 map 中的国家和城市标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50201188/