沃梦达 / IT编程 / 前端开发 / 正文

关于 javascript:Mapbox GeoJSON 通过本地 URL 加载:图标

Mapbox GeoJSON loaded via local URL: icons not showing popup properties在我的网站中,我使用 Mapbox 地图从 URL 加载图标,如下所示:[cc lang=javascri...

在我的网站中,我使用 Mapbox 地图从 URL 加载图标,如下所示:

1
2
3
4
5
6
7
8
/* myMapbox.js */
map = L.mapbox.map("map","somemap.hhlj93e3").setView([47.60,-122.33], 13);
...
.someAjaxCall{

   allMyIcons = L.mapbox.featureLayer ().loadURL ("/updatedIcons");
   allMyIcons.addTo (map);
}

通过 /updatedIcons 加载的图标会显示出来,但它们不可点击。我使用这个 SO 帖子解决了可点击性问题。但是,当我单击图标时,通过 /updatedIcons 调用检索到的每个功能(图标)的属性仍然不会显示为弹出窗口(单击图标时没有任何反应)。请注意,在 Mapbox 网站上为 somemap 用户创建的图标确实会显示在地图上,并且它们是可点击的,并且会在同一张地图上愉快地为他们显示一个弹出窗口。

这是我通过 /updatedIcons:

加载的 GeoJSON 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[{
"type":"Feature",
"geometry": {"type":"Point","coordinates": [-77.03, 38.90]},
"properties": {
   "image":  "https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Cherry_Blossoms_and_Washington_Monument.jpg/320px-Cherry_Blossoms_and_Washington_Monument.jpg",
   "url":"https://en.wikipedia.org/wiki/Washington,_D.C.",
   "marker-symbol":"star",
   "city":"Washington, D.C."
}
}, {
"type":"Feature",
"geometry": {"type":"Point","coordinates": [-87.63, 41.88]},
"properties": {
   "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Chicago_sunrise_1.jpg/640px-Chicago_sunrise_1.jpg",
   "url":"https://en.wikipedia.org/wiki/Chicago",
   "city":"Chicago"
}
}, {
"type":"Feature",
"geometry": {"type":"Point","coordinates": [-74.00, 40.71]},
"properties": {
   "image":"https://upload.wikimedia.org/wikipedia/commons/thumb/3/39/NYC_Top_of_the_Rock_Pano.jpg/640px-NYC_Top_of_the_Rock_Pano.jpg",
   "url":"https://en.wikipedia.org/wiki/New_York_City",
   "city":"New York City"
}
}]

我在这里错过了什么?为了清楚起见,图标出现了,但是在我添加了链接的 SO 帖子中提到的 CSS 改进之前,它们是不可点击的,现在,我可以点击图标,但什么也没有发生(属性没有显示在弹出)。我知道上面的 GeoJSON 示例是一个 FeatureCollection,我将上面的内容包含在

1
2
3
{"type":"FeatureCollection",
 "features": <content from above GeoJSON here>
}

但这并没有改变行为。这是分层问题吗?如果是这样,如何合并我地图中的所有图层?我将从 Mapbox 加载基本地图,这是一个由用户创建的标记,我想使用

进行渲染

1
2
3
4
5
6
       marker = L.marker ([lat, lng],
              {
                  icon: L.divIcon ({
                  iconSize: [10, 10]
                  })
              });

以及从上面 /updatedIcons 加载的图标,我希望所有这些都是可点击的。

任何帮助表示赞赏。谢谢!


L.mapbox.featureLayer 继承自 L.mapbox.featureGroup.

要向 featureGroup 添加(或绑定)弹出窗口,您将需要类似这样的内容

1
2
3
allMyIcons = L.mapbox.featureLayer().loadURL("/updatedIcons");
allMyIcons.bindPopup("Howdy!");
allMyIcons.addTo(map);

如果您希望每个标记/图标都有自己独特的弹出窗口,您可以像这样循环它们,在迭代时添加独特的弹出窗口

1
2
3
4
allMyIcons.eachLayer(function (layer) {
layer.bindPopup('Howdy: ' + count);
    count += 1;
});
相关讨论


这是来自 Mapbox 支持的回复:

您在地图上看到的弹出窗口是根据特定属性格式化的 - 默认情况下,这些属性是 \\'title\\' 和 \\'description\\'。没有这些默认属性的功能不会自动获得默认弹出窗口,因为代码不知道是什么意思 - 是否应该将某些内容显示为标题或描述,或者图像不清楚。由于您的数据不包含默认属性,因此您必须指定工具提示的格式,就像这样,使用 bindPopup:https://www.mapbox.com/mapbox.js/example/v1.0.0/ omn??ivore-kml-tooltip/ http://leafletjs.com/reference.html#marker-bindpopup

本文标题为:关于 javascript:Mapbox GeoJSON 通过本地 URL 加载:图标