Question

我有传单瓦片的统计数据。我尝试在瓷砖的中心放置一个标签，使其大致如下所示：

到目前为止，我的代码是这样的：

<div id="map" style="height: 512px; width: 512px;border: solid;">
</div>

...
var textLatLng = [?, ?]; // This is my question, how to calculate this?

var myTextLabel = L.marker(textLatLng, {
    icon: L.divIcon({
        className: 'text-labels',   
        html: '173'
    }),
    zIndexOffset: 1000     
});
myTextLabel.addTo(map);

从[{3}}

获取此代码

Answer 1

如果我理解正确，您希望扩展GridLayer及其hexhash = resource.data.bodyHash方法以显示您的数据。这样的事情，假设是同步查找

createTile

和演示

＆＃13;

var map = L.map('map').setView([48.8583736, 2.2922926], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var GridInfo = L.GridLayer.extend({

    // called for each tile
    // return a DOM node containing whatever you want
    createTile: function (coords) {

        // create a div
        var tile = document.createElement('div');
        tile.className = "infotile";
        tile.style.outline = '1px solid black';

        // lookup the piece of data you want
        // replace with whatever you use
        var data = lookup(coords.x, coords.y, coords.z);

        // let's add the lat/lng of the center of the tile
        var tileBounds = this._tileCoordsToBounds(coords);
        var center = tileBounds.getCenter();

        tile.innerHTML = '<span>' + data+
            '<br>'+
            'lat:'+ center.lat+' '+'lng:'+center.lng+
        '</span>';

        return tile;
    }
});

map.addLayer(new GridInfo());

＆＃13;

function lookup(x, y, z) {
    return "x:"+x+", y:"+y+" at zoom "+z;
}


var map = L.map('map').setView([48.8583736, 2.2922926], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


var GridInfo = L.GridLayer.extend({

    // called for each tile
    // returns a DOM node containing whatver ypu want
    createTile: function (coords) {

        // create a div
        var tile = document.createElement('div');
        tile.className = "infotile";
        tile.style.outline = '1px solid black';

        // lookup the piece of data you want
        var data = lookup(coords.x, coords.y, coords.z);

        // let's add the lat/lng of the center of the tile
        var tileBounds = this._tileCoordsToBounds(coords);
        var center = tileBounds.getCenter();

        tile.innerHTML = '<span>' + data+
            '<br>'+
            'lat:'+ center.lat+' '+'lng:'+center.lng+
        '</span>';

        return tile;
    }
});

map.addLayer(new GridInfo());

＆＃13;

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

.infotile {display: flex;}
.infotile span {
	font-weight: bold;
	margin: auto;
}

＆＃13;

如何将标签放置在传单瓦片的中心？

1 个答案: