在传单中修改地图移动

Question

我正在使用 leaflet 创建带有自定义声音层的地图。每个图块中都有一个 <audio> 元素，我正在寻找一种方法来在用户在地图上移动时改变音频播放（具体来说，根据到中心的距离改变音量）。

到目前为止，我在地图对象上找到了 move 事件，但我想知道是否有办法将它传递到我的自定义网格层，然后再传递到图块 - 是否有可能对事件做出反应的图块？

可能我走的路不对，还是写个Handler ?

Answer 1

或者使用这个库的不同方法，https://turfjs.org/docs/#squareGrid 创建一个覆盖整个地图的网格，将每个单元格的大小设置为图块的大小。之后和这样的细胞交互应该就没有问题了。

// config map
let config = {
  minZoom: 1,
  maxZoom: 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);

// ------------------------------
const bbox = [17, 54, 23, 50];
const cellSide = 50;
const options = { units: "kilometers" };

const squareGrid = turf.squareGrid(bbox, cellSide, options);

//addToMap
const addToMap = [squareGrid];

const gridLayers = L.geoJSON(addToMap, {
  onEachFeature: function (feature, layer) {
    layer.on("mouseover", function (e) {
      // show voivodeship

      this.setStyle({
        fillColor: "#eb4034",
        weight: 2,
        color: "red",
        fillOpacity: 0.7,
      });
    });
    layer.on("mouseout", function () {
      this.setStyle({
        fillColor: "#3388ff",
        weight: 2,
        color: "#3388ff",
        fillOpacity: 0.2,
      });
    });
  },
}).addTo(map);

map.setView(gridLayers.getBounds().getCenter(), 7);

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

html {
  height: 100%;
}

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

body {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Turf.js/6.5.0/turf.min.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" rel="stylesheet"/>
<div id="map"></div>

另一种解决方案是使用具有适当图层的 FeatureCollections 创建，您将能够为它们中的每一个添加声音、颜色或任何参数，并且每次单击或鼠标悬停都会触发适当的操作。

在传单中修改地图移动

Modifying on map move in leaflet

javascript

leaflet