Question

我基本上试图在一个画布上显示Leaflet的标记簇（使用Leaflet.markercluster插件）（使用Leaflet.CanvasLayer）。但是以下代码似乎生成了svg元素和canvas元素。

如何让一个canvas元素显示markers群集？

以下是测试代码：http://test-leaflet.orionhub.org:8000/leaflet_eg/index.html

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet debug page</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../assets/Leaflet.markercluster-master/example/screen.css" />

    <link rel="stylesheet" href="../assets/Leaflet.markercluster-master/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="../assets/Leaflet.markercluster-master/dist/MarkerCluster.Default.css" />
    <script src="../assets/Leaflet.markercluster-master/dist/leaflet.markercluster-src.js"></script>
    <script src="../assets/Leaflet.CanvasLayer-gh-pages/leaflet_canvas_layer.js"></script>
</head>
<body>

    <div id="map"></div>
    <script src="./index.js"></script>
</body>
</html>

index.js

var centerOfUSALatLong = [37.09024, -95.712891];    // center of USA (lat,long)
var zoomLevelShowingUSA = 4;

var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
var latlng = L.latLng(centerOfUSALatLong[0], centerOfUSALatLong[1]);
var southWest = L.latLng(0, -180),
    northEast = L.latLng(60.239, -43.945),  // bottom of greenland
    bounds = L.latLngBounds(southWest, northEast);
var map = L.map('map', {center: latlng, 
    zoom: zoomLevelShowingUSA, 
    minZoom: zoomLevelShowingUSA-1, 
    maxBounds: bounds,
    layers: [tiles]
});

var markers = L.markerClusterGroup();

function populate() {
    for (var i = 0; i < 10; i++) {
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng - southWest.lng;
        var latSpan = northEast.lat - southWest.lat;
        var latR = southWest.lat + latSpan * Math.random();
        var lngR = southWest.lng + lngSpan * Math.random();

        var myIcon = L.divIcon({ 
            iconSize: new L.Point(50, 50), 
            html: String(i)
        });

        var m = L.marker(L.latLng(latR,lngR), {icon: myIcon});
        markers.addLayer(m);
    }
    return false;
}

var MyLayer = L.CanvasLayer.extend({
    render: function() {
        var canvas = this.getCanvas();
        var ctx = canvas.getContext('2d');
        // render
    }
});
// create and add to the map
var layer = new MyLayer();
layer.addTo(map);

populate();
map.addLayer(markers);

Answer 1

找到它...修复是在leaflet.js加载之前添加此L_PREFER_CANVAS=true;

<script>L_PREFER_CANVAS=true;</script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

Leaflet.markercluster没有使用Leaflet.CanvasLayer插件？

1 个答案: