添加我自己的风格在MapBox Javascript中不起作用
在前面的一个问题中，有人问到关于地图样式的图像覆盖：
如何在Mapbox Javascript中添加简单的图像覆盖？
我用了他们的例子，但我想用我自己的风格。
这里有一个指向我的地图风格的链接。
这就是他们使用的风格：
mapbox://styles/mapbox/卫星-v9
这是我的风格，不管用：
mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518
下面是有效的代码，您可以自己运行。我的风格被删掉了。
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add an image</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoibml0dHlqZWUiLCJhIjoid1RmLXpycyJ9.NFk875-Fe6hoRCkGciG8yQ';
var map = new mapboxgl.Map({
container: 'map',
maxZoom: 5.99,
minZoom: 4,
zoom: 5,
center: [-75.789, 41.874],
//Style from Stack Overflow:
style: 'mapbox://styles/mapbox/satellite-v9'
//My style does not work:
//style: 'mapbox://styles/nittyjee/ck0fasve30an21cpalmwct518'
});
map.on('load', function() {
map.addSource("myImageSource", {
"type": "image",
"url": "https://docs.mapbox.com/mapbox-gl-js/assets/radar.gif",
"coordinates": [
[-80.425, 46.437],
[-71.516, 46.437],
[-71.516, 37.936],
[-80.425, 37.936]
]
});
map.addLayer({
"id": "overlay",
"source": "myImageSource",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
});
});
</script>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2019-09-24 14:40:25
你需要提高mapbox版本。您使用的是一个更老的SDK。
将脚本/css定义更改为：
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.3.1/mapbox-gl.css' rel='stylesheet' />Stack Overflow用户
发布于 2019-09-23 13:58:49
那看起来不像一个样式的URL https://docs.mapbox.com/help/glossary/style-url/
您需要在中创建一个样式并获取样式ID。
Stack Overflow用户
发布于 2019-09-23 14:34:15
当您在Studio中查看您的样式时，可以单击右上角的Share。
然后，您将看到一个面板，其中将有一个名为Your style url的部分。如果您复制该链接并将其粘贴到您的代码中，则您的样式应该可以通过。
您还可以按样式单击这3个点，并在面板底部复制显示的样式id：
https://stackoverflow.com/questions/58057584
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号