映射框标记未显示-URL处的GeoJson

Question

我试图将我的GeoJson从内联jcript移动到一个URL，以评估它如何提高具有大量标记（3,000）的地图的性能。然而，我一直无法让我的标记显示在地图上，并希望有一双新的眼睛。我的测试页面的url在这里：http://webapps.fhsu.edu/ksherp/testmapbox.aspxGeoJson文件链接

     <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');

Answer 1

您的测试页面不工作，它在“/ksHerp”应用程序中显示服务器错误。。

使用您的代码而不进行修改，我在显示标记时没有任何问题：

如果您的页面再次工作，并且您仍然存在此问题，如果由于CORS错误或使用混合内容（超文本传输协议/https）的某些浏览器限制而未加载GeoJSON文件，您可以检查浏览器控制台。一些可能有用的链接：

https://www.mapbox.com/help/cors-errors/

如何让Chrome允许混合内容？