传单.markercluster未使用传单.CanvasLayer插件？_Canvas_Svg_Leaflet

传单.markercluster未使用传单.CanvasLayer插件？

canvas svg leaflet

传单.markercluster未使用传单.CanvasLayer插件？,canvas,svg,leaflet,Canvas,Svg,Leaflet,我基本上是尝试在一个画布上显示标记的传单簇（使用传单.markercluster插件）（使用传单.CanvasLayer）。但是下面的代码似乎正在生成svg元素和canvas元素如何让一个canvas元素通过集群显示markers 以下是测试代码： index.html <!DOCTYPE html> <html> <head> <title>Leaflet debug page</title> <link r

我基本上是尝试在一个画布上显示标记的传单簇（使用传单.markercluster插件）（使用传单.CanvasLayer）。但是下面的代码似乎正在生成

svg

元素和

canvas

元素

如何让一个

canvas

元素通过集群显示

markers

以下是测试代码：

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);

var centerofsalatlong=[37.09024，-95.712891]；//美国中心（拉特，长）
var zoomLevelShowingUSA=4；
var tiles=L.tileLayer（'http://{s}.tile.osm.org/{z}/{x}/{y}.png'{
maxZoom:18，
属性：“©；贡献者”
});
var latlng=L.latlng（CenterOfsalatlong[0]，CenterOfsalatlong[1]）；
西南风=L.latLng（0，-180），
东北=L.latLng（60.239，-43.945），//格陵兰岛底部
边界=L.latLngBounds（西南、东北）；
var map=L.map（'map'，{center:latlng，
zoom:zoomLevelShowingUSA，
minZoom:zoomLevelShowingUSA-1，
maxBounds:bounds，
图层：[瓷砖]
});
var markers=L.markerClusterGroup（）；
函数填充（）{
对于（变量i=0；i<10；i++）{
var bounds=map.getBounds（）；
var soutwest=bounds.getsoutwest（）；
var northEast=bounds.getNorthEast（）；
var lngSpan=东北液化天然气-西南液化天然气；
var latSpan=东北.lat-西南.lat；
var latR=soutwest.lat+latSpan*Math.random（）；
var lngR=soutwest.lng+lngSpan*Math.random（）；
var myIcon=L.divIcon（{
iconSize：新的L点（50,50），
html:String（i）
});
var m=L.marker（L.latLng（latR，lngR），{icon:myIcon}）；
标记。添加层（m）；
}
返回false；
}
var MyLayer=L.CanvasLayer.extend({
render:function（）{
var canvas=this.getCanvas（）；
var ctx=canvas.getContext（'2d'）；
//渲染
}
});
//创建并添加到地图
var layer=新的MyLayer（）；
图层。添加到（地图）；
填充（）；
添加图层（标记）；

找到了它。。。fix添加了这个

L_preference_CANVAS=true加载传单.js之前
<script>L_PREFER_CANVAS=true;</script>
<script src="http://cdn.leafletjs.com/leaflet-0.7/leaflet.js"></script>

L_preference_CANVAS=true；