颜色交叉单张圆圈

如何解决颜色交叉单张圆圈

我有一个关于传单/folium 的问题。我在地图上有多个圆圈。 所有这些圆圈确实有一些重叠。 Wat我想要做的是用不同的颜色绘制一条线/多边形，所有圆圈都在这里相遇（相交）。

这是我想要实现的example。蓝线是交点，需要不同的颜色。这在大叶或纯传单中可能吗？如果是这样，我该怎么做？

解决方法

您可以为此使用 turfjs 库和 turf.intersect 方法

/* eslint-disable no-undef */
/**
 * intersection with turfjs
 */

// config map
let config = {
  minZoom: 7,maxZomm: 18,};
// magnification with which the map will start
const zoom = 18;
// co-ordinates
const lat = 52.22977;
const lng = 21.01178;

// calling map
const map = L.map('map',config).setView([lat,lng],zoom);

// Used to load and display tile layers on the map
// Most tile servers require attribution,which you can set under `Layer`
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',}).addTo(map);

// three coordinate
const centers = [{
    lat: 52.22990558765487,lng: 21.01168513298035
  },{
    lat: 52.22962958994604,lng: 21.011593937873844
  },{
    lat: 52.2297445891999,lng: 21.012012362480167
  }
]

// turf.circle option
const options = {
  steps: 64,units: 'meters',options: {}
}

// circle radius
const radius = 30;

// array polygons
let polygons = [];

// set marker,add 
centers.map(({
  lat,lng
}) => {
  const polygon = turf.circle([lng,lat],radius,options);

  // add cirkle polygon to map
  L.geoJSON(polygon,{
    color: "red",weight: 2
  }).addTo(map);

  // add object to array
  polygons.push(polygon);
})

// get intersection
const intersection = turf.intersect(...polygons);

// style intersection
const intersectionColor = {
  color: "yellow",weight: 2,opacity: 1,fillColor: "yellow",fillOpacity: 0.7
};

// adding an intersection to the map
// and styling to this element
L.geoJSON(intersection,{
  style: intersectionColor
}).addTo(map);

*,:after,:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

body,html,#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>

<div id="map"></div>