0

app.component.html

<div id="map" style="height: 100%; width: 100%;"></div>

// 我有任务在我们的地图中执行 idw。这个 idw 基于地图上的 aqi 和我们的设备 lat lng。我创建了 idw，它工作正常。但问题是它会为所有地图着色。我只希望 idw 影响我作为 idw 层中的数据传递的那个区域。

app.component.ts

initIdwMap(devices) {
    
    let idw_data = {
      points: [],
    };

    if(devices === undefined){
      return;
    }

    // declare latlngBounds.
    let latlngBounds = L.latLngBounds();

    for (let i = 0; i < devices.length; i++) {
      let devType = devices[i].deviceType;
      if (devType === "POLLUDRON_PRO") {
        let idw_d = [devices[i].latitude, devices[i].longitude, devices[i].aqi];
        latlngBounds.extend({ lat: devices[i].latitude, lng: devices[i].longitude });
        idw_data.points.push(idw_d);
      }
    }

    // Declare map with mapoptions.
    let mapOptions = {
      preferCanvas: true,
      zoomControl: true,
      attributionControl: false,
      maxZoom: 16,
      minZoom: 11,
    };

    let map = L.map("map", mapOptions).setView([idw_data.points[0][0], idw_data.points[0][1]]);

    map.flyToBounds(map.fitBounds(latlngBounds));

    // Declare baselayer
    let osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { opacity: 0.8 }).addTo(map);

    let Stamen_Terrain = L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}{r}.{ext}", {
      subdomains: "abcd",
      ext: "png",
    });

    let baselayers = {
      osm: osm,
      // openTopoMap: OpenTopoMap,
      // stamen_watercolor: Stamen_Watercolor,
      Stamen_Terrain: Stamen_Terrain,
    };

    // Declare overlays
    let idwGradient = {
      // 0  : "#f9f9f9",
      0.1: "#6ecc58",
      0.2: "#bbcf4c",
      0.4: "#eac736",
      0.6: "#ed9a2e",
      0.8: "#e8633a",
      1: "#d63636",
    };

    let idw = new L.idwLayer(idw_data.points, {
      opacity: 0.5,
      maxZoom: mapOptions.maxZoom,
      cellSize: 5,
      exp: 4,
      max: 500,
      gradient: idwGradient,
      minVal: 0,
      maxVal: 500
    }).addTo(map);

    let overLays = {
      idw: idw,
    };

    L.control.layers(baselayers, overLays, { position: "topright" }).addTo(map);

正如您在图像中看到的那样，整个地图都涂有紫色，但我不想要那样。我希望 idw 仅对我作为数据传递以执行 idw 的特定纬度和经度产生 影响

4

0 回答 0