javascript - URL 处的 GeoJSON 刚刚停止呈现标记

Question

我的 Web 应用程序在服务器上动态创建一个 geojson 文件，然后将其呈现在 map 上。昨天还可以，但今天不行。

我已经通读了 MapBox API 和故障排除页面。并搜索了 StackOverflow 文件。我最初怀疑它可能是 MapBox 版本升级的结果，但我想我现在是最新的，geojson 数据仍然没有呈现。我已调试应用程序以确保包含 geojson 文件。这是一个页面的链接，该页面在其相应的 geojson 文件 ( http://webapps.fhsu.edu/ksHerp/account.aspx?o=33&t=101 ) 中具有最少 (6) 个标记……有些页面有超过 3,000 个。所有代码都可以从源码中查看，也贴在下面。

标题

    <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' />

页面中的 map 调用语法

                        <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
});
var url = 'http://webapps.fhsu.edu/ksHerp/geojson/101.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",
"icon-allow-overlap": true,
"text-field": "{title}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.6],
"text-anchor": "top"
}
});
});
// 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');
 </script>

上面创建并链接的 Geojson 文件

{"type": "FeatureCollection","features": [
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.657787, 37.203811]},"properties": {"description": "<strong>Per. Obs</strong><p>Montgomery Co., Kansas: 37.203811, -95.657787: na: 6 Sep 2010 : James Erdmann: <br />From a message passed on to me by James Erdmann, of his sister being envenomated by a Cottonmouth at a family quarry SE of Independence. James, his brother, and I conducted a search on 10 June 2017 w/o success. James is a herpetologist, receiving his Masters at Southeastern Louisiana University in 2017. - Travis W. Taggart.</p>","marker-size": "small", "marker-color": "#ff0000", "marker-symbol": "triangle-stroked"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.078393, 37.034605]},"properties": {"description": "<strong>KU 23284</strong><p>Labette Co., Kansas: 37.034605, -95.078393: Neosho River E of Chetopa: : No date: ?: <br />In need of corroboration. -Travis W. Taggart, 6 June 2006.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle-stroked"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-94.677, 37.1632]},"properties": {"description": "<strong>KU 218780</strong><p>Cherokee Co., Kansas: 37.1632, -94.677: 1 mi S, 1.5 mi E jct US Rt 69, KS Rt 96; Sec 16 & 21,T33S,R25E: 29 Aug 1991 : K. Outt: <br />run over by vehicle near Shawnee Creek bridge; presumed dead, but envenomated collector when picked up.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-94.642994, 37.178178]},"properties": {"description": "<strong>KU 218677</strong><p>Cherokee Co., Kansas: 37.178178, -94.642994: ca 1mi W Missouri border on Ks Rt 96 at Spring River,Sec 14,T33S,R25E: 14 Sep 1991 : Shane Eckhardt: <br />shot at base of tree near bridge over Spring River east of Crestline.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.634436, 37.05989]},"properties": {"description": "<strong>KU 174719</strong><p>Montgomery Co., Kansas: 37.05989, -95.634436: W bank Verdigris River at Big Hill, N of Coffeyville: 23 Jun 1977 : ?: <br />data suspect; most certainly one of a number of specimens deliberately released in the Verdigris River between Independence and Coffeyville in the mid to late 1970s. Travis W. Taggart - 8/4/2012.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle-stroked"}},
{"type": "Feature","geometry": {"type": "Point","coordinates": [-95.696097, 37.2252]},"properties": {"description": "<strong>KU 170521</strong><p>Montgomery Co., Kansas: 37.2252, -95.696097: Verdigris River, E of Independence, ca 366 m downstream: 26 Jul 1976 : ?: <br />data suspect; most certainly one of a number of specimens deliberately released in the Verdigris River between Independence and Coffeyville in the mid to late 1970s. Travis W. Taggart - 8/4/2012.</p>","marker-size": "small", "marker-color": "#0000ff", "marker-symbol": "circle-stroked"}}
]}

正常工作时，geojson 文件中指定的位置标记呈现为棕色圆圈、三 Angular 形和正方形。没有错误，只是没有显示标记。

Answer 1

确实，它似乎与样式中缺少 Sprite 图像有关，在这种情况下会显示以下警告(有关更多详细信息，请参阅 to this pull request):

Image "..." could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.

例如，切换到 Mapbox Streets 时样式 mapbox://styles/mapbox/streets-v9 标记按预期呈现

对于您的样式 mapbox://styles/ttaggart/cj3ohbccw00192rlrtj18zdmv 缺少这些图像图标:

• circle-11
• 三 Angular 描边 11
• circle-stroked-11

一旦丢失的图像被加载，例如通过this technique :

 map.on("styleimagemissing", e => {
    console.log("loading missing image: " + e.id);
    if (
      e.id === "circle-11" ||
      e.id === "triangle-stroked-11" ||
      e.id == "circle-stroked-11"
    ) {
      map.loadImage(e.id + ".png", (error, image) => {
        if (error) throw error;
        if (!map.hasImage(e.id)) map.addImage(e.id, image);
        map.getSource('markers').setData(url);
      });
    }
  });

标记会出现在 map 上

Demo