显示圆的半径在其中心。

huangapple
go评论96阅读模式
英文:

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.

  1.   [conflictsJson[index].latitude, conflictsJson[index].longitude],
  2.   {
  3.     radius: setRadius(conflictsJson, conflictsJson[index].location),
  4.     color: '#FF0000',
  5.     weight: 4,
  6.     opacity: 0.5,
  7.     fillOpacity: 0.25,
  8.   },
  9. )
  10.   .bindPopup(conflictsJson[index].embeddedHtml, { maxWidth: 220 })
  11.   .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.

  1. L.circleMarker(
  2.   [conflictsJson[index].latitude, conflictsJson[index].longitude], //προσθέτει συντεταγμένες στον χάρτη
  3.   {
  4.     radius: setRadius(conflictsJson, conflictsJson[index].location),
  5.     color: '#FF0000',
  6.     weight: 4,
  7.     opacity: 0.5,
  8.     fillOpacity: 0.25,
  9.   },
  10. )
  11.   .bindPopup(conflictsJson[index].embeddedHtml, { maxWidth: 220 }) //Προσθέτει το link για το tweet στο popup παράθυρο
  12.   .addTo(map);

setRadius() generates a value from a json file.

答案1

得分: 3

创建类似这样的内容：

显示圆的半径在其中心。

查看以下代码片段：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6.     <style>
  7.         #map {
  8.             width: 400px;
  9.             height: 400px;
  10.         }
  11.     </style>
  12.     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
  13.     <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
  14. </head>
  15. <body>
  16.     <div id="mapid" style="width: 100%; height: 100vh;"></div>
  18.     <script>
  19.         var map = new L.Map('mapid').setView([43.768017, -79.333947], 16);
  21.         var data = {
  22.             "type": "FeatureCollection",
  23.             "features": [
  24.                 {
  25.                     "type": "Feature",
  26.                     "properties": { "radius": 200 },
  27.                     "geometry": {
  28.                         "type": "Point",
  29.                         "coordinates": [
  30.                             -79.3347430229187,
  31.                             43.77203899218474
  32.                         ]
  33.                     }
  34.                 },
  35.                 {
  36.                     "type": "Feature",
  37.                     "properties": { "radius": 100 },
  38.                     "geometry": {
  39.                         "type": "Point",
  40.                         "coordinates": [
  41.                             -79.32781219482422,
  42.                             43.770427538281865
  43.                         ]
  44.                     }
  45.                 },
  46.                 {
  47.                     "type": "Feature",
  48.                     "properties": { "radius": 500 },
  49.                     "geometry": {
  50.                         "type": "Point",
  51.                         "coordinates": [
  52.                             -79.33465719223022,
  53.                             43.764539164480254
  54.                         ]
  55.                     }
  56.                 }
  57.             ]
  58.         }
  60.         var circleCenters = L.geoJSON(data);
  61.         var myIcon = L.divIcon({ className: {} });
  62.         circleCenters.eachLayer(function (layer) {
  63.             L.circle([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { radius: 200 }).addTo(map);
  64.             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();
  65.         });
  66.     </script>
  67. </body>
  68. </html>

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

英文:

To create something like this:

显示圆的半径在其中心。

Take a look at the following snippet:

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;meta charset=&quot;utf-8&quot; /&gt;
  5. &lt;title&gt;&lt;/title&gt;
  6. &lt;style&gt;
  7. #map {
  8. width: 400px;
  9. height: 400px;
  10. }
  11. &lt;/style&gt;
  12. &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.3.4/dist/leaflet.css&quot; integrity=&quot;sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==&quot; crossorigin=&quot;&quot; /&gt;
  13. &lt;script src=&quot;https://unpkg.com/leaflet@1.3.4/dist/leaflet.js&quot; integrity=&quot;sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==&quot; crossorigin=&quot;&quot;&gt;&lt;/script&gt;
  14. &lt;/head&gt;
  15. &lt;body&gt;
  16. &lt;div id=&quot;mapid&quot; style=&quot;width: 100%; height: 100vh;&quot;&gt;&lt;/div&gt;
  17. &lt;script&gt;
  18. var map = new L.Map(&#39;mapid&#39;).setView([43.768017, - 79.333947], 16);
  19. var data = {
  20. &quot;type&quot;: &quot;FeatureCollection&quot;,
  21. &quot;features&quot;: [
  22. {
  23. &quot;type&quot;: &quot;Feature&quot;,
  24. &quot;properties&quot;: { &quot;radius&quot;: 200 },
  25. &quot;geometry&quot;: {
  26. &quot;type&quot;: &quot;Point&quot;,
  27. &quot;coordinates&quot;: [
  28. -79.3347430229187,
  29. 43.77203899218474
  30. ]
  31. }
  32. },
  33. {
  34. &quot;type&quot;: &quot;Feature&quot;,
  35. &quot;properties&quot;: { &quot;radius&quot;: 100 },
  36. &quot;geometry&quot;: {
  37. &quot;type&quot;: &quot;Point&quot;,
  38. &quot;coordinates&quot;: [
  39. -79.32781219482422,
  40. 43.770427538281865
  41. ]
  42. }
  43. },
  44. {
  45. &quot;type&quot;: &quot;Feature&quot;,
  46. &quot;properties&quot;: { &quot;radius&quot;: 500 },
  47. &quot;geometry&quot;: {
  48. &quot;type&quot;: &quot;Point&quot;,
  49. &quot;coordinates&quot;: [
  50. -79.33465719223022,
  51. 43.764539164480254
  52. ]
  53. }
  54. }
  55. ]
  56. }
  57. var circleCenters = L.geoJSON(data);
  58. var myIcon = L.divIcon({ className: {} });
  59. circleCenters.eachLayer(function (layer) {
  60. L.circle([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { radius: 200 }).addTo(map);
  61. L.marker([layer.feature.geometry.coordinates[1], layer.feature.geometry.coordinates[0]], { icon: myIcon }).addTo(map).bindTooltip(layer.feature.properties.radius.toString(), { direction: &#39;center&#39;, permanent: true }).openTooltip();
  62. });
  63. &lt;/script&gt;
  64. &lt;/body&gt;
  65. &lt;/html&gt;

Also you can override the tool tip's CSS Styles to remove the white background.

huangapple
  • 本文由 发表于 2020年1月6日 22:20:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/59613710.html
  • javascript
  • leaflet
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定