我正在尝试加载标准传单 map ，以便我可以在其上覆盖 geojson 文件。如果我使用其他 map ， map 会完美加载，但它不适用于传单。我得到的错误是
GET http://a.tiles.mapbox.com/v3/MapID/7/40/47.png 404 (Not Found)
我的假设是选择不同的 map 不会有太大影响，因为我只是更换 Canvas 来放置我的 geojson (显然我错了)。有人可以解释一下为什么这不起作用吗？我的代码如下，我已经评论了更改 map 的位置
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.key path {
display: none;
}
</style>
</head>
<body>
<div id="map" style="width: 100%; height: 100%"></div>
<script>
queue()
.defer(d3.json, 'med.json')
.await(makeMap)
function makeMap(error, data) {
var color = d3.scale.linear()
.domain([10, 400])
.range(['#F0F0D0', '#930F16']);
// try changing the coordinates to 41.9, -431 and see happens
var map = L.map('map').setView([41.9, -93.5], 4);
// ERROR BEGINS HERE **
L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
//Tried changing this to: http://{s}.tiles.mapbox.com/v3/MapID/{z}/{x}/{y}.png'
maxZoom: 18,
minZoom: 1,
attribution: 'Map tiles by <a href="http://www.mapbox.com/m">Mapbox</a> Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'
}).addTo(map);
function style(feature) {
return {
fillColor: color(feature.properties.count),
weight: 1,
opacity: 0.2,
color: 'black',
fillOpacity: 0.5
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 10,
color: '#666',
dashArray: '',
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (feature) {
this._div.innerHTML = (feature ?
'<b>' + 'Block ID:' + feature.id + '<br>' + feature.count + ' People</b><br />'
: '');
};
info.addTo(map);
};
</script>
</body>
还有一个旁注，有谁知道为什么如果我可以更改设置 View ，geojson 数据不会加载？代码被复制(就在 tileLayer 行上方)。
var map = L.map('map').setView([41.9, -93.5], 4);
最佳答案
确保使用id和访问 token 加载mapbox map 。 here就是一个例子。
首先，您必须在mapbox.com 上获得一个帐户，然后您可以在那里创建一个项目并获取您的map-id。您也会在那里看到您的访问 token 。
如果您使用Mapbox.js ，这会更容易，因为您只需将 Map-id 添加到 DOM 元素即可。
关于javascript - 切换到传单 map 无法加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29806310/