如何使用自定义创建的地图框样式以及传单

时间:2015-12-03 17:16:48

标签: javascript html leaflet mapbox

我找不到任何关于如何使用自定义创建的地图样式的示例。

在地图框页面上,我为地图创建了一个样式。

如何将这种风格与传单一起使用?

例如:

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

这是地图:

https://api.mapbox.com/styles/v1/ficht/cihqdfw3f004ybnm35e7zefon.html?title=true&access_token=pk.eyJ1IjoiZmljaHQiLCJhIjoiY2locWQ3YTBtMDAxYnY1bHVvcGtsM2Y1MCJ9.C8NlGmZuX6W2YrvXTHULeQ#1.6044619216776894/37.74890243399017/28.62971087861783/0.08751522544480395

5 个答案:

答案 0 :(得分:11)

我成功将传单框样式添加到传单

在此网址https://www.mapbox.com/studio/styles/上选择您的风格。我使用这个例子的默认样式(我认为这个可供所有人使用) https://www.mapbox.com/studio/styles/mapbox/streets-v10/share/

然后在此页面上选择传单标签enter image description here

复制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);

答案 1 :(得分:2)

这很简单。

将地图用作切片地图的URL:

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

如果您想将样式复制/导入到您的Account Studio:

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

答案 2 :(得分:2)

使用当前的Mapbox版本:

  1. 创建自己的样式后,请点击右上方菜单中的“共享...”
  2. 出现弹出窗口,选择“开发第三方”,然后在下拉列表中选择“ CARTO”
  3. 复制“集成URL”。这是Leaflet.js设置'tileLayer'对象的值所需的链接

Where to find Leaflet-link for Custom Mapbox style

答案 3 :(得分:0)

此代码对我有用:

!GetAtt LoadBalancer.DNSName

答案 4 :(得分:-2)

与Leaflet结合使用时,您需要切换到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/