文章/答案/技术大牛

发布

社区首页 >问答首页 >Leaflet.markercluster不使用Leaflet.CanvasLayer插件吗？

问Leaflet.markercluster不使用Leaflet.CanvasLayer插件吗？
EN

Stack Overflow用户

提问于 2015-04-20 05:52:34

回答 1查看 1.1K关注 0票数 1

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

如何才能让一个canvas元素显示带集群的markers？

下面是测试代码：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);

canvas

svg

leaflet

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-20 07:35:30

找到了..。fix在加载L_PREFER_CANVAS=true;之前添加了这个leaflet.js。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/29740166

复制

相似问题

问Leaflet.markercluster不使用Leaflet.CanvasLayer插件吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Leaflet.markercluster不使用Leaflet.CanvasLayer插件吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Leaflet.markercluster不使用Leaflet.CanvasLayer插件吗？
EN