html 使用自定义创建的Mapbox样式(来自Mapbox Studio)沿着Leaflet

nhhxz33t  于 2023-03-11  发布在  其他
关注(0)|答案(6)|浏览(357)

我找不到任何如何使用自定义创建的MapboxMap样式的例子。
在Mapbox页面上,我创建了一个Map样式。
如何将此样式用于瓣叶?
例如:

var map = L.map('map', {
    center: [43.64701, -79.39425],
    zoom: 15
});

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

我应该把mapbox://styles/ficht/cihqdfw3f004ybnm35e7zefon放在哪里?
这是Map:
https://api.mapbox.com/styles/v1/ficht/cihqdfw3f004ybnm35e7zefon.html?title=true&access_token=pk.eyJ1IjoiZmljaHQiLCJhIjoiY2locWQ3YTBtMDAxYnY1bHVvcGtsM2Y1MCJ9.C8NlGmZuX6W2YrvXTHULeQ#1.6044619216776894/37.74890243399017/28.62971087861783/0.08751522544480395

9bfwbjaz

9bfwbjaz1#

当前Mapbox版本:
1.创建自己的样式后,单击右上角菜单中的“共享...”
1.弹出窗口,选择开发“第三方”并在下拉菜单中选择“CARTO”
1.复制“集成URL”。这是Leaflet.js设置“tileLayer”对象值所需的链接

p1iqtdky

p1iqtdky2#

我成功地将Map框样式添加到传单
在这个网址https://www.mapbox.com/studio/styles/选择你的风格。我会使用默认的风格为这个例子(我认为这是一个适用于所有)https://www.mapbox.com/studio/styles/mapbox/streets-v10/share/
然后在此页面上选择说明书tab

复制URL并在js文件中这样使用

var map = L.map('map');

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFza290YSIsImEiOiJjaXp0bmI3M3EwMDBvMndzMHJudnlsMDllIn0.jV7rTNmfiqjx57usCu54rQ', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
}).addTo(map);
vwhgwdsa

vwhgwdsa3#

其实很简单。
将Map用作切片Map的URL:

https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_ACCESS_TOKEN

如果要将样式复制/导入到您的工作室帐户:

https://www.mapbox.com/studio/styles/add-style/THE_USERNAME/THE_STYLE_ID/
3lxsmp7m

3lxsmp7m4#

这段代码对我很有效:

let map = L.map('map',{
            center: [45.5017, -73.5673],
            zoom: 10
        })

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/{z}/{x}/{y}?access_token={YOUR_ACCESS_TOKEN}', {
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            maxZoom: 18
        }).addTo(map)
s2j5cfk0

s2j5cfk05#

请注意使用以下类型的url的任何人(如在一些提供的答案):
https://api.mapbox.com/styles/v1/YOUR_USERNAME/YOUR_STYLE_ID/tiles/256/{z}/{x}/{y}?access_token=YOUR_ACCESS_TOKEN
根据Mapbox的here页面,这256将花费你更多的瓷砖请求对你的帐户。他们在他们的页面上说:
Static Tiles API默认返回512×512像素的Map瓦片。虽然〉可以使用可选的tilesize参数来请求256x256像素的瓦片,〉这些瓦片的大小是512x512瓦片的四分之一,并且需要4倍的〉可计费API请求来渲染覆盖相同区域的Map。

wmomyfyw

wmomyfyw6#

这将无法与传单结合使用,您需要切换到Mapbox GL:

示例:

mapboxgl.accessToken = YOUR_KEY;
var map = new mapboxgl.Map({
    container: 'map',
    style: YOUR_STYLE_URL
    center: [0, 0],
    zoom: 0
});

https://www.mapbox.com/mapbox-gl-js/example/custom-style-id/

相关问题