4

我正在使用 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。

4

0 回答 0