使用带有传单标记和geojson的fontawesome
使用带有传单标记和geojson的fontawesome
提问于 2019-03-05 07:34:21
发现这个问题很难解决。我想在我的叶地图上使用字体标记，它使用GeoJson数据作为不同标记的经度/经度。
var Icon = L.icon({
html: '<i class="fas fa-map-pin"></i>',
iconSize: [20, 20]
});
var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.geoJSON(myGeojsonData).addTo(mymap);
var circle = L.circle([-37.735018, 144.894947], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 50
}).addTo(mymap);geoJson示例
var myGeojsonData =
{
"features": [
{
"geometry": {
"coordinates": [
144.829434,
-37.825233
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "2541EL_P0"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.829502,
-37.825234
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "2541EL_P1"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.881846,
-37.732708
],
"type": "Point"
},我想在geoJson给出的所有单独的点上添加var图标信息作为标记。
我知道如何在一个点上做到这一点，但如果有多个点，它就会变得非常混乱……
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-05 08:28:06
我猜你的"myGeojsonData“对象是一个”多点“特征类型，所以我在你的”红色圆圈“附近创建了几个点。我将Icon更改为DivIcon，并通过对L.geoJSON调用使用pointToLayer回调来挂接标记逻辑。
var myGeojsonData = {
"type": "Feature",
"geometry": {
"type": "MultiPoint",
"coordinates": [
[144.894947,-37.72],
[144.894947,-37.70]
]
}
};
var myIcon = L.divIcon({
html: '<i class="fas fa-map-pin"></i>',
iconSize: [20, 20],
className: 'dummy' // We don't want to use the default class
});
var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
L.geoJSON(myGeojsonData, {
pointToLayer: function(getJsonPoint, latlng) {
return L.marker(latlng, { icon: myIcon });
}
}).addTo(mymap);
var circle = L.circle([-37.735018, 144.894947], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 50
}).addTo(mymap);结果：
使用如下所示的GeoJSON数据：
var myGeojsonData = {
"features": [
{
"geometry": {
"coordinates": [
144.829434,
-37.825233
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "2541EL_P0"
},
"type": "Feature"
},
{
"geometry": {
"coordinates": [
144.829502,
-37.825234
],
"type": "Point"
},
"properties": {
"Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
"IDnumber": "2541EL_P1"
},
"type": "Feature"
}
]
};这两个点看起来非常接近：
对于弹出窗口，我不知道它最初是什么样子的，因为我在你的原始代码中没有看到任何"bindpopup“类型的调用，并且测试你提供的原始代码(没有我的修改)，我没有得到任何弹出窗口。您可以像这样添加弹出窗口：
L.geoJSON(myGeojsonData, {
pointToLayer: function (getJsonPoint, latlng) {
return L.marker(latlng, { icon: myIcon });
}
}).bindPopup(function(layer) {
return 'ID #: ' + layer.feature.properties.IDnumber + '<br />Area: ' + layer.feature.properties.Area;
}).addTo(mymap);我没有添加任何样式，所以它们看起来会很难看。还有更多用于定位和设置弹出窗口样式的设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54993241
复制相关文章
相似问题