问题:
Found this issue hard to work out. I want to use fontawesome markers on my leafletmap which is using GeoJson data for lon/lat of the different markers.
var Icon = L.icon(...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
Found this issue hard to work out. I want to use fontawesome markers on my leafletmap which is using GeoJson data for lon/lat of the different markers.
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);
Example of 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"
},
I want to add the var Icon information as the marker on all the separate points given by the geoJson.
I understand how to do this with one point but with multiple it gets very confusing...
回答1:
I'm guessing that your "myGeojsonData" object is a "multipoint" feature type so I created a couple of points close to your "red circle". I changed your Icon
to a DivIcon
and hooked up the marker logic by using the pointToLayer
callback on the L.geoJSON call.
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);
Result:
Using your GeoJSON data which looks like this:
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"
}
]
};
The two points appear to be really close to each other:
For the popups, I don't know what it looked like originally since I don't see any "bindpopup" type calls in your original code, and testing the original code you provided (without my changes) I don't get any popups. You can add popups like this:
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);
I didn't add any styling so they would look pretty ugly. There are more settings for positioning and styling the popups.