URL 的 GeoJSON 刚刚停止渲染标记
GeoJSON at URL just stopped rendering markers
我的 Web 应用程序在服务器上动态创建一个 geojson 文件，然后将其呈现在地图上。昨天还可以，今天就不行了。
我已通读 MapBox API 和故障排除页面。并搜索了 Whosebug 档案。我一开始怀疑可能是MapBox版本升级的结果，但我想我现在是up-to-date了，geojson数据还是渲染不出来。
我已调试应用程序以确保包含 geojson 文件。
这是 link 对应的 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' />
页面中的地图调用语法
<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 文件并在上面 link编辑
{"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 文件中指定的位置标记呈现为棕色圆圈、三角形和正方形。没有错误，只是没有显示标记。
只是猜测，您使用的样式是否不支持引用的标记图标？我看到许多控制台警告，表明标记正在地图上绘制，但图标未加载。
Image "park-11" 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. util.js:329:52
Image "dot-9" 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. util.js:329:52
Image "dot-10" 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. util.js:329:52
Image "dot-11" 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. util.js:329:52
Image "wetland" 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.
您可以尝试设置为其中一种默认样式吗？
https://docs.mapbox.com/api/maps/#styles
mapbox://styles/mapbox/streets-v11
mapbox://styles/mapbox/outdoors-v11
mapbox://styles/mapbox/light-v10
mapbox://styles/mapbox/dark-v10
mapbox://styles/mapbox/satellite-v9
mapbox://styles/mapbox/satellite-streets-v11
mapbox://styles/mapbox/navigation-preview-day-v4
mapbox://styles/mapbox/navigation-preview-night-v4
mapbox://styles/mapbox/navigation-guidance-day-v4
mapbox://styles/mapbox/navigation-guidance-night-v4
确实，它似乎与样式中缺少精灵图像有关，在这种情况下会显示以下警告（有关详细信息，请参阅 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 缺少这些图像图标：
- 圆-11
- 三角形笔画 11
- 圆形描边 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);
});
}
});
标记将出现在地图上
我的 Web 应用程序在服务器上动态创建一个 geojson 文件，然后将其呈现在地图上。昨天还可以，今天就不行了。
我已通读 MapBox API 和故障排除页面。并搜索了 Whosebug 档案。我一开始怀疑可能是MapBox版本升级的结果，但我想我现在是up-to-date了，geojson数据还是渲染不出来。 我已调试应用程序以确保包含 geojson 文件。 这是 link 对应的 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' />
页面中的地图调用语法
<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 文件并在上面 link编辑
{"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 文件中指定的位置标记呈现为棕色圆圈、三角形和正方形。没有错误，只是没有显示标记。
只是猜测，您使用的样式是否不支持引用的标记图标？我看到许多控制台警告，表明标记正在地图上绘制，但图标未加载。
Image "park-11" 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. util.js:329:52
Image "dot-9" 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. util.js:329:52
Image "dot-10" 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. util.js:329:52
Image "dot-11" 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. util.js:329:52
Image "wetland" 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.
您可以尝试设置为其中一种默认样式吗？
https://docs.mapbox.com/api/maps/#styles
mapbox://styles/mapbox/streets-v11
mapbox://styles/mapbox/outdoors-v11
mapbox://styles/mapbox/light-v10
mapbox://styles/mapbox/dark-v10
mapbox://styles/mapbox/satellite-v9
mapbox://styles/mapbox/satellite-streets-v11
mapbox://styles/mapbox/navigation-preview-day-v4
mapbox://styles/mapbox/navigation-preview-night-v4
mapbox://styles/mapbox/navigation-guidance-day-v4
mapbox://styles/mapbox/navigation-guidance-night-v4
确实，它似乎与样式中缺少精灵图像有关，在这种情况下会显示以下警告（有关详细信息，请参阅 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 缺少这些图像图标：
- 圆-11
- 三角形笔画 11
- 圆形描边 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);
});
}
});
标记将出现在地图上