Javascript 添加1000+；使用geojson的标记_Javascript_Html_Asp.net Core Mvc_Mapbox_Mapbox Marker

Javascript 添加1000+；使用geojson的标记

javascript html asp.net-core-mvc mapbox

Javascript 添加1000+；使用geojson的标记,javascript,html,asp.net-core-mvc,mapbox,mapbox-marker,Javascript,Html,Asp.net Core Mvc,Mapbox,Mapbox Marker,我使用mapbox来可视化路径上的一些坐标。我有两个数据集，它们有不同数量的坐标，都在5到3500组坐标之间。我正在使用geojson对象来绘制标记，但是当我选择具有超过1000组坐标的数据集时，当我在地图上移动时，我的mapbox开始变得无响应。如果我选择更大的数据集，整个页面将变得无响应 <!DOCTYPE html> <html> <head> <script src='https://api.mapbox.com/mapbox.js/v3

我使用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>

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

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

我真的不太喜欢标记，我只想有彩色的圆圈/点，但我可以认为这是为什么地图会受到影响的原因之一

我需要这个功能，而且我知道google maps API支持很多标记，而不会对性能造成太大影响，所以我希望MapBox也能做到这一点。如果没有，我可能需要使用谷歌地图或其他解决方案，如OpenLayers。

mapbox gl符号的性能明显高于基于HTML的标记。遗憾的是，没有更新。我尝试了许多不同的解决方案，但最终还是使用了OpenLayers。

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