Javascript 如何将要在地图上显示的文本添加到传单中的 geojson 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11979729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to add text for display on map to a geojson object in leaflet
提问by monkut
So I have a geojson layer in leaflet, and I can add geojson objects to this layer for display on the resulting map.
所以我在传单中有一个 geojson 层，我可以将 geojson 对象添加到该层以显示在结果地图上。
Now I'd like to add a text label to display near the object.
现在我想添加一个文本标签以显示在对象附近。
This example shows use of a custom L.control()object to display additional info on the map. Which seems close to what I want to do.
此示例显示如何使用自定义L.control()对象在地图上显示附加信息。这似乎接近我想做的事情。
Given this example, I'd like to add State initial text labels (i.e. "TX", "FL") positioned over each state. Can L.control()be used to do this, or is there another way?
鉴于此示例，我想添加位于每个州上方的州初始文本标签（即“TX”、“FL”）。可以L.control()用来做这个，还是有其他方法？
http://leaflet.cloudmade.com/examples/choropleth.html
http://leaflet.cloudmade.com/examples/choropleth.html
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
采纳答案by Mathias Conradt
I was looking for the same question recently and just implemented it yesterday based on a posting in the google group. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw
我最近正在寻找同样的问题，昨天刚刚根据谷歌组中的帖子实施了它。 https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw
Thanks to Adrian for the original code sample.
感谢 Adrian 提供原始代码示例。
Here's the solution:
这是解决方案：
Extend the following class as below:
扩展以下类，如下所示：
<script>
L.LabelOverlay = L.Class.extend({
initialize: function(/*LatLng*/ latLng, /*String*/ label, options) {
this._latlng = latLng;
this._label = label;
L.Util.setOptions(this, options);
},
options: {
offset: new L.Point(0, 2)
},
onAdd: function(map) {
this._map = map;
if (!this._container) {
this._initLayout();
}
map.getPanes().overlayPane.appendChild(this._container);
this._container.innerHTML = this._label;
map.on('viewreset', this._reset, this);
this._reset();
},
onRemove: function(map) {
map.getPanes().overlayPane.removeChild(this._container);
map.off('viewreset', this._reset, this);
},
_reset: function() {
var pos = this._map.latLngToLayerPoint(this._latlng);
var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y);
L.DomUtil.setPosition(this._container, op);
},
_initLayout: function() {
this._container = L.DomUtil.create('div', 'leaflet-label-overlay');
}
});
</script>
Furthermore add this css:
此外添加这个css：
<style>
.leaflet-popup-close-button {
display:none;
}
.leaflet-label-overlay {
line-height:0px;
margin-top: 9px;
position:absolute;
}
</style>
And then display the text labels as below:
然后显示文本标签如下：
<script>
var map = L.map('map').setView([51.898712, 6.7307100000001], 4);
// add markers
// ...
// add text labels:
var labelLocation = new L.LatLng(51.329219337279405, 10.454119349999928);
var labelTitle = new L.LabelOverlay(labelLocation, '<b>GERMANY</b>');
map.addLayer(labelTitle);
var labelLocation2 = new L.LatLng(47.71329162782909, 13.34573480000006);
var labelTitle2 = new L.LabelOverlay(labelLocation2, '<b>AUSTRIA</b>');
map.addLayer(labelTitle2);
// In order to prevent the text labels to "jump" when zooming in and out,
// in Google Chrome, I added this event handler:
map.on('movestart', function () {
map.removeLayer(labelTitle);
map.removeLayer(labelTitle2);
});
map.on('moveend', function () {
map.addLayer(labelTitle);
map.addLayer(labelTitle2);
});
</script>
Result:
结果：
回答by jhickok
Label Overlay in Leaflet Using Marker Class and DivIcon Class With 'html' Property
使用具有“html”属性的标记类和 DivIcon 类在传单中叠加标签
Personally, I use this method to implement text labels on the map. This way I get to use all of the existing Marker Class methods and events with no extra effort. It's a bit like just using a text label in replace of an icon, I guess.
就个人而言，我使用这种方法在地图上实现文本标签。这样我就可以毫不费力地使用所有现有的标记类方法和事件。我想这有点像使用文本标签代替图标。
var textLatLng = [35.1436, -111.5632];
var myTextLabel = L.marker(textLatLng, {
icon: L.divIcon({
className: 'text-labels', // Set class for CSS styling
html: 'A Text Label'
}),
zIndexOffset: 1000 // Make appear above other map features
});
My CSS looks like:
我的 CSS 看起来像：
.text-labels {
font-size: 2em;
font-weight: 700;
color: white;
/* Use color, background, set margins for offset, etc */
}
Also, I haven't explored this yet, but maybe you can add a png to the CSS and then offset the text, so that you can wrap an icon and label in the same Marker object using the Leaflet DivIcon class?? This would be easy with a div shape (e.g. box, circle), but I'm not sure about adding a png to the CSS for the Marker object - because I am not a CSS guru by any means.
另外，我还没有探索过这个，但也许你可以在 CSS 中添加一个 png，然后偏移文本，这样你就可以使用 Leaflet DivIcon 类将图标和标签包装在同一个 Marker 对象中？？这对于 div 形状（例如框、圆）来说很容易，但我不确定是否将 png 添加到 Marker 对象的 CSS - 因为我无论如何都不是 CSS 大师。
回答by Evgeny Ivanov
I'm adopt this code for current version.
我正在为当前版本采用此代码。
<style>
.leaflet-popup-close-button {
display:none;
}
.leaflet-label-overlay {
line-height:0px;
margin-top: 9px;
position:absolute;
}
</style>
<script>
L.LabelOverlay = L.Layer.extend({
initialize: function(/*LatLng*/ latLng, /*String*/ label, options) {
this._latlng = latLng;
this._label = label;
L.Util.setOptions(this, options);
},
options: {
offset: new L.Point(0, 2)
},
onAdd: function(map) {
this._map = map;
if (!this._container) {
this._initLayout();
}
map.getPanes().popupPane.appendChild(this._container);
this._container.innerHTML = this._label;
map.on('movestart', this._update_start, this);
map.on('moveend', this._update_end, this);
this._update_end();
},
onRemove: function(map) {
map.getPanes().popupPane.removeChild(this._container);
map.off('movestart', this._update_start, this);
map.off('moveend', this._update_end, this);
},
_update_start: function(){
L.DomUtil.setPosition(this._container, 0);
},
_update_end: function() {
var pos = this._map.latLngToLayerPoint(this._latlng);
var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y);
L.DomUtil.setPosition(this._container, op);
},
_initLayout: function() {
this._container = L.DomUtil.create('div', 'leaflet-label-overlay');
}
});
</script>
