[英]MapBox markers not showing up - GeoJson at URL
我试图将我的GeoJson从内联jscript移到一个URL,以评估它如何提高具有很多标记(超过3000个)的地图的性能。 但是,我一直无法在地图上显示我的标记,因此请多多关注。 我的测试页的网址是: http ://webapps.fhsu.edu/ksherp/testmapbox.aspx GeoJson文件已链接
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHRhZ2dhcnQiLCJhIjoiY2lwZmp0emR2MDA1YnRhbmQ2aW8xdm9wZCJ9.XMq3bMhOjRit7wR3q7oIgQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/ttaggart/cj3ohbccw00192rlrtj18zdmv', //stylesheet location
center: [-98.328809, 38.5], // starting position
zoom: 5 // starting zoom
// , maxZoom: 8 // limit max zoom extent
});
var url = 'http://webapps.fhsu.edu/ksherp/geojson/3.geojson';
map.on('load', function () {
window.setInterval(function () {
map.getSource('markers').setData(url);
}, 2000);
map.addSource('markers', { type: 'geojson', data: url });
map.addLayer({
"id": "markers",
"type": "symbol",
"source": "markers",
"layout": {
"icon-image": "{marker-symbol}-11"
}
});
});
// When a click event occurs near a marker icon, open a popup at the location of
// the feature, with description HTML from its properties.
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
if (!features.length) {
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
var popup = new mapboxgl.Popup()
.setLngLat(feature.geometry.coordinates)
.setHTML(feature.properties.description)
.addTo(map);
});
// Use the same approach as above to indicate that the symbols are clickable
// by changing the cursor style to 'pointer'.
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['markers'] });
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
});
map.addControl(new mapboxgl.NavigationControl());
map.addControl(nav, 'top-right');
您的测试页无法正常工作,它Server Error in '/ksHerp' Application.
显示Server Error in '/ksHerp' Application.
。
使用您的代码而无需修改,我不会出现显示标记的问题:
如果您的页面再次正常工作,并且仍然存在此问题,则可以检查浏览器控制台是否由于CORS错误或使用混合内容(http / https)的某些浏览器限制而未加载GeoJSON文件。 一些链接可能会有所帮助:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.