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

Posted 2021-04-13

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

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

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

从here获得此代码

答案

如果我理解正确，你正在寻求扩展GridLayer及其createTile方法来显示你的数据。这样的事情，假设是同步查找

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

还有一个演示

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

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

.infotile {display: flex;}
.infotile span {
	font-weight: bold;
	margin: auto;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>
 
 <div id='map'></div>

以上是关于如何将标签放置在传单瓦片的中心？的主要内容，如果未能解决你的问题，请参考以下文章

显示图像的传单瓦片未找到丢失的瓦片的象

使用传单JS建立月球地图的图像瓦片

传单地图宽度（以米为单位）

如何将UILabel放置在导航栏的中心

反应传单地图中心没有改变

传单：如何将文本标签添加到自定义标记图标？