如何使用标记簇绘制半圆

Question

我正在尝试用Markercluster画半圆。但是，我无法弄清楚我的代码出了什么问题：

var marker = new L.circle([-22.2701 , 166.445], 150, {
    startAngle : 330,
    stopAngle : 30,
    fillColor :'#2e8dcd',
    fillOpacity :1
});

https://jsfiddle.net/ihema/d6190rb1/

Answer 1

一系列问题。

您需要包含半圆形插件。但是您需要使用以前的版本，因为最后一个版本适用于传单 1.0 beta2 版本。（所以你必须从 https://github.com/jieter/Leaflet-semicircle/tree/gh-pages 下载JS）

工作示例（您应该下载 github 文件，而不是直接链接到它们）

var center = L.latLng(-22.2701, 166.445);
var map = L.map('map').setView(center, 17);
var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var markers = L.markerClusterGroup();
var marker = new L.circle([-22.2701, 166.445], 150, {
  startAngle: 330,
  stopAngle: 30,
  fillColor: '#2e8dcd',
  fillOpacity: 1
});
markers.addLayer(marker);
map.addLayer(markers);

#map {
  width: 500px;
  height: 350px;
}

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<script type="text/javascript" src="//raw.githubusercontent.com/jieter/Leaflet-semicircle/gh-pages/Semicircle.js"></script>
<div id="map"></div>