我有一个关于传单/folium 的问题。我在地图上有多个圆圈。 所有这些圆圈确实有一些重叠。 Wat我想要做的是用不同的颜色绘制一条线/多边形,所有圆圈都在这里相遇(相交)。
这是我想要实现的example。蓝线是交点,需要不同的颜色。这在大叶或纯传单中可能吗?如果是这样,我该怎么做?
答案 0 :(得分:0)
您可以为此使用 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: '© <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>