Question

我有数据库，它有近30,000条记录和sql查询，这些记录和处理时间返回geoJSON需要~2秒。

我遇到的问题是在地图上绘制这些点需要大约5秒，这太长了。

这是我获取geoJSON，绘图和聚类点的代码：

    var map;
    var markerClusterer;

    var options = {
        SUCCESS: {
            icon: '/img/marker/green.png',
            zIndex: 2
        },
        FAIL: {
            icon: '/img/marker/red.png',
            zIndex: 3
        },
        NA: {
            icon: '/img/marker/yellow.png',
            zIndex: 1
        }
    };

    var markerGroups = {
        "SUCCESS": [],
        "FAIL": [],
        "NA": []
    };

    function getJSON(url) {
        var jsPromise = Promise.resolve($.ajax(url));
        return jsPromise.then(JSON.parse);
    }

    function load() {

        var opts = {
            streetViewControl: false,
            tilt: 0,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: new google.maps.LatLng(42.879094,-97.381205),
            zoom: 4
        };
        map = new google.maps.Map(document.getElementById("map"), opts);

        markerClusterer = new MarkerClusterer(map);
        markerClusterer.setMaxZoom(15);

        getJSON('/api/maps/points').then(function (json) {
            var markers = json.features;

            for (var i = 0; i < markers.length; i++) {
                var properties = markers[i].properties;
                var type = properties.value;
                var point = new google.maps.LatLng(
                    parseFloat(markers[i].geometry.coordinates[1]),
                    parseFloat(markers[i].geometry.coordinates[0]));
                var marker = createMarker(point, type, map, properties);
            }

            markerClusterer.addMarkers(markerGroups["NA"]);
            markerClusterer.addMarkers(markerGroups["SUCCESS"]);
            markerClusterer.addMarkers(markerGroups["FAIL"]);

        });

    }

    function createMarker(point, type, map, properties) {
        var obj;

        if(!options[type]) obj = options['NA'];
        else obj = options[type];

        var icon = obj.icon;
        var zIndex = obj.zIndex;

        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: icon,
            type: type,
            zIndex: parseInt(zIndex)
        });

        if (!markerGroups[type]){
            markerGroups["NA"].push(marker);
        }  else {
            markerGroups[type].push(marker);
        }

        return marker;
    }

    google.maps.event.addDomListener(window, 'load', load);

绘制这些点的最有效方法是什么？目前它吸引了所有观点。只能为边界框绘制点？

Answer 1

只是一些提示

改变你的

      for (var i = 0; i < markers.length; i++) {

每次都避免计算长度

      mylen= markers.len 
      for (var i = 0; i < mylen; i++) {

使用

可以略微缩短绘图时间，简化latLng构造

https://developers.google.com/maps/documentation/javascript/examples/map-latlng-literal

您可以存储在json中并直接传递对象，避免因latLng计算而产生的开销。

另一种策略是减少渲染点的数量，仅搜索地图范围内的点。如果你已经在db中保存了这个点，这很容易。

您也可以仅在某个缩放时显示该点......

如何在地图上绘制标记获得更好的性能

1 个答案: