时间戳

首页 > 解决方案 > 彩色相交传单圈

leaflet - 彩色相交传单圈

问题描述

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

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

标签： leafletfolium

解决方案

您可以为此使用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>

推荐阅读