Javascript 在圆心上显示圆的半径_Javascript_Leaflet

Javascript 在圆心上显示圆的半径

javascript leaflet

Javascript 在圆心上显示圆的半径,javascript,leaflet,Javascript,Leaflet,我有一个json文件，它为我在地图上画圆圈提供了所有必要的信息。重点是我需要这些圆来显示用作半径的数字我设法画了一个圆，并在其中添加了弹出窗口，但我无法在每个圆的中心显示一个简单的文本（半径值） L.circleMarker( [conflictsJson[index].latitude, conflictsJson[index].longitude], //προσθέτει συντεταγμένες στον χάρτη { radius: setRadius(co

我有一个json文件，它为我在地图上画圆圈提供了所有必要的信息。重点是我需要这些圆来显示用作半径的数字

我设法画了一个圆，并在其中添加了弹出窗口，但我无法在每个圆的中心显示一个简单的文本（半径值）

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（）

从json文件生成一个值。

要创建如下内容：

请看以下代码段：

<!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>


#地图{
宽度：400px；
高度：400px；
}
var map=新的L.map（'mapid'）.setView（[43.768017，-79.333947]，16）；
风险值数据={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“属性”：{“半径”：200}，
“几何学”：{
“类型”：“点”，
“坐标”：[
-79.3347430229187,
43.77203899218474
]
}
},
{
“类型”：“功能”，
“属性”：{“半径”：100}，
“几何学”：{
“类型”：“点”，
“坐标”：[
-79.32781219482422,
43.770427538281865
]
}
},
{
“类型”：“功能”，
“属性”：{“半径”：500}，
“几何学”：{
“类型”：“点”，
“坐标”：[
-79.33465719223022,
43.764539164480254
]
}
}
]
}
var circleCenters=L.geoJSON（数据）；
var myIcon=L.divIcon（{className:{}}）；
CircleCenter.eachLayer（函数（层）{
圆（[layer.feature.geometry.coordinates[1]，layer.feature.geometry.coordinates[0]]，{radius:200}）.addTo（地图）；
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（）；
});

此外，您还可以覆盖工具提示的CSS样式以删除白色背景。

要创建如下内容：

请看以下代码段：

<!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>


#地图{
宽度：400px；
高度：400px；
}
var map=新的L.map（'mapid'）.setView（[43.768017，-79.333947]，16）；
风险值数据={
“类型”：“FeatureCollection”，
“特点”：[
{
“类型”：“功能”，
“属性”：{“半径”：200}，
“几何学”：{
“类型”：“点”，
“坐标”：[
-79.3347430229187,
43.77203899218474
]
}
},
{
“类型”：“功能”，
“属性”：{“半径”：100}，
“几何学”：{
“类型”：“点”，
“坐标”：[
-79.32781219482422,
43.770427538281865
]
}
},
{
“类型”：“功能”，
“属性”：{“半径”：500}，
“几何学”：{
“类型”：“点”，
“坐标”：[
-79.33465719223022,
43.764539164480254
]
}
}
]
}
var circleCenters=L.geoJSON（数据）；
var myIcon=L.divIcon（{className:{}}）；
CircleCenter.eachLayer（函数（层）{
圆（[layer.feature.geometry.coordinates[1]，layer.feature.geometry.coordinates[0]]，{radius:200}）.addTo（地图）；
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（）；
});

您还可以覆盖工具提示的CSS样式以删除白色背景。

使用

L.DivIcon

添加另一个

L.Marker

。请参阅使用

L.DivIcon

添加另一个

L.Marker

。看见