英文:
Show the radius of a Circle on its center
问题
I have a json file that gives me all the necessary information for me to draw circles on a map. The point is that I need the circles to show the number that was used as their radius.
I managed to draw the circle and add popups to it, but I am not able to show a simple text (the radius value) at the center of each circle.
[conflictsJson[index].latitude, conflictsJson[index].longitude],
{
radius: setRadius(conflictsJson, conflictsJson[index].location),
color: '#FF0000',
weight: 4,
opacity: 0.5,
fillOpacity: 0.25,
},
)
.bindPopup(conflictsJson[index].embeddedHtml, { maxWidth: 220 })
.addTo(map);
setRadius() generates a value from a JSON file.
英文:
I have a json file that gives me all the necessary information for me to draw circles at a map. The point is that I need the circles to show the number that was used as their radius.
I managed to draw the circle and add popups to it, but I am not able to show a simple text(the radius value) at the center of each circle.
L.circleMarker(
[conflictsJson[index].latitude, conflictsJson[index].longitude], //προσθέτει συντεταγμένες στον χάρτη
{
radius: setRadius(conflictsJson, conflictsJson[index].location),
color: '#FF0000',
weight: 4,
opacity: 0.5,
fillOpacity: 0.25,
},
)
.bindPopup(conflictsJson[index].embeddedHtml, { maxWidth: 220 }) //Προσθέτει το link για το tweet στο popup παράθυρο
.addTo(map);
setRadius() generates a value from a json file.
答案1
得分: 3
创建类似这样的内容：
查看以下代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 100vh;"></div>
<script>
var map = new L.Map('mapid').setView([43.768017, -79.333947], 16);
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "radius": 200 },
"geometry": {
"type": "Point",
"coordinates": [
-79.3347430229187,
43.77203899218474
]
}
},
{
"type": "Feature",
"properties": { "radius": 100 },
"geometry": {
"type": "Point",
"coordinates": [
-79.32781219482422,
43.770427538281865
]
}
},
{
"type": "Feature",
"properties": { "radius": 500 },
"geometry": {
"type": "Point",
"coordinates": [
-79.33465719223022,
43.764539164480254
]
}
}
]
}
var circleCenters = L.geoJSON(data);
var myIcon = L.divIcon({ className: {} });
circleCenters.eachLayer(function (layer) {
L.circle([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { radius: 200 }).addTo(map);
L.marker([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { icon: myIcon }).addTo(map).bindTooltip(layer.feature.properties.radius.toString(), { direction: 'center', permanent: true }).openTooltip();
});
</script>
</body>
</html>
另外，您还可以覆盖工具提示的CSS样式以去除白色背景。
英文:
To create something like this:
Take a look at the following snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#map {
width: 400px;
height: 400px;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
</head>
<body>
<div id="mapid" style="width: 100%; height: 100vh;"></div>
<script>
var map = new L.Map('mapid').setView([43.768017, - 79.333947], 16);
var data = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": { "radius": 200 },
"geometry": {
"type": "Point",
"coordinates": [
-79.3347430229187,
43.77203899218474
]
}
},
{
"type": "Feature",
"properties": { "radius": 100 },
"geometry": {
"type": "Point",
"coordinates": [
-79.32781219482422,
43.770427538281865
]
}
},
{
"type": "Feature",
"properties": { "radius": 500 },
"geometry": {
"type": "Point",
"coordinates": [
-79.33465719223022,
43.764539164480254
]
}
}
]
}
var circleCenters = L.geoJSON(data);
var myIcon = L.divIcon({ className: {} });
circleCenters.eachLayer(function (layer) {
L.circle([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { radius: 200 }).addTo(map);
L.marker([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { icon: myIcon }).addTo(map).bindTooltip(layer.feature.properties.radius.toString(), { direction: 'center', permanent: true }).openTooltip();
});
</script>
</body>
</html>
Also you can override the tool tip's CSS Styles to remove the white background.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论