Question

我使用mapbox.js渲染地图集地图。我正在尝试从我的服务器加载包含国家多边形或城市坐标（lon，lat）的geojson。

我能够设置国家多边形的样式，但不能设置城市点/标记。我无法修改geojson以使用mapbox simplestyle

以下是页面加载时执行的代码（我更改了mapbox地图ID）：

var southWest = L.latLng(-90, -360), northEast = L.latLng(90, 360);
var bounds = L.latLngBounds(southWest, northEast);

var map = L.mapbox.map('map', 'MapboxMapID', { zoomControl: false, infoControl: true, detectRetina: true, maxBounds: bounds, minZoom: 2, legendControl: {position: 'topright'}});

new L.Control.Zoom({ position: 'bottomright' }).addTo(map);
map.fitBounds(bounds);

var locationsGroup = L.featureGroup().addTo(map);

然后当用户选择带有选择框的国家或城市时：

    $("#select2-search-up").on("change", function (e) {
    if (e.added) {
        var location = L.mapbox.featureLayer().loadURL('/citiesCountriesID/' + e.added.id).on('ready', function(featLayer) {
            this.eachLayer(function(polygon) {
                polygon.setStyle({
                    stroke:false, fillColor:'red', fillOpacity:0.2
                });
            });
        });
        locationsGroup.addLayer(location);
    } else {
        locationsGroup.eachLayer(function (layer) {
            if (layer._geojson[0]._id == e.removed.id) {
                locationsGroup.removeLayer(layer);
            }
        });
    }
});

理想情况下，我想显示标准标记的不同图标，但我可以使用小红色标记

感谢您的投入

Answer 1

在这个例子中，我做了一些圆圈标记，但我很确定你可以做其他基本的svg shps或你自己的.png非常简单。 http://bl.ocks.org/mpmckenna8/db2eef40314fe24e9177

Mapbox中的这个示例还展示了如何使用其图标库中的图标，该图标也有很多选项。 https://www.mapbox.com/mapbox.js/example/v1.0.0/l-mapbox-marker/

看一些你的geojson结构也可能有助于了解为什么它不能使用simplestyle

在我的bl.ocks示例中，我分别加载了每个geojson数据集

var begin = L.geoJson(start,{
  pointToLayer:function(feature, latlng){
      return L.circleMarker(latlng,{
        radius:9,
        fillColor: "orange",
        fillOpacity:.7
      })
  }
})

我是如何设置我的圈子的，我将不同的L.geoJson设置为我留下的其他数据作为默认标记。

将一个geojson点设置为带有传单/ mapbox的POI

1 个答案: