Question

我正在使用mapbox来显示路径上的一些坐标。我有几个具有不同坐标数量的数据集，所有数据集都在5到3500组坐标之间。我正在使用geojson对象来绘制标记，但是当我选择具有超过1000组坐标的数据集时，当我在地图上移动时，mapbox开始变得无法响应。如果我选择更大的数据集，整个页面就会没有响应。

<!DOCTYPE html>
<html>
<head>
    <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
    <link href='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css' rel='stylesheet' />
</head>
<body>
    <div id="map"></div>

    <script>
        L.mapbox.accesToken = <access-token>
        var map = L.mapbox.map('map', 'mapbox.streets')
            .setView([40, -74.50], 9);

        var myLayer = L.mapbox.featureLayer();
        myLayer.addTo(map)

        var geojson = []

        var jsonData = @Html.Raw(Json.Serialize(Model));
        $.each(jsonData, function(key, value) {
            geojson.push(addMarker(value.lat, value.lon));
        });

        myLayer.on('layeradd', function(e) {
            var marker = e.layer,
                feature = marker.feature;
            marker.setIcon(L.divIcon(feature.properties.icon));
        });

        myLayer.setGeoJSON(geojson);
    </script>
</body>

addMarker函数基本上只创建一个geojson对象，如下所示：

function addMarker(latitude, longitude) {

    var element = {
        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: [longitude, latitude]
        },
        properties: {
            icon: {
                className: "map-icon",
                html: '',
                iconSize: null
            }
        }
    };

    return element;
}

我正在使用.Net Core MVC从我的数据库中获取数据。是否有其他方法可以向Mapbox添加标记，以便性能不会像我的示例那样显着下降？

.map-icon {
    background: #dd0600;
    border-radius: 100%;
    width: 5px;
    height: 5px;
    text-align: center;
    line-height: 5px;
}

我对标记没有太多帮助，我只想要有彩色圆圈/圆点，但我认为这是地图遭受的原因之一。

我需要这个功能，我知道谷歌地图API支持很多标记而没有太大的性能，所以我希望MapBox可以实现同样的功能。如果不是，我可能需要使用谷歌地图或其他解决方案，如OpenLayers。

使用geojson添加1000多个标记后，Mapbox性能会受到影响

0 个答案: