HeatMap3D

/*
 * @Author: jiegiser changjie@jouav.com
 * @Date: 2023-11-28 11:48:40
 * @LastEditors: jiegiser changjie@jouav.com
 * @LastEditTime: 2023-11-28 11:48:46
 * @Description: 请填写简介
 */
/*
 * @Author: jiegiser changjie@jouav.com
 * @Date: 2023-11-28 11:28:29
 * @LastEditors: jiegiser changjie@jouav.com
 * @LastEditTime: 2023-11-28 11:28:29
 * @Description: 请填写简介
 */
import { Map } from "maplibre-gl";
import { ThreeGISMap } from "@jodvf/three-gis-map";
import * as maplibregl from "maplibre-gl";

const container = document.createElement("div");
container.style.width = "100%";
container.style.height = "100%";
document.body.appendChild(container);

const map = new Map({
  container: container,
  style:
    "https://api.maptiler.com/maps/b01b290f-bdf7-452e-9a34-f6e300dacc4f/style.json?key=MNqni2pVxL0GkkL0hgYb", // stylesheet location
  maxPitch: 85,
  center: [114.028375, 22.54325519641227],
  pitch: 50,
  zoom: 14
});

window.maplibregl = maplibregl;
const joGISThree = new ThreeGISMap(map, maplibregl, {
  projection: "EPSG:3857"
});

joGISThree.on("jogisthree.load", () => {
  addHeatMap3D();
});

function addHeatMap3D() {
  const heatMap3DLayer = joGISThree.addLayer({
    type: "heatMap3D",
    id: "heatMap3D-layer",
    beforeLayerId: "",
    minzoom: 2,
    altitude: 0
  });

  fetch(
    "https://gw.alipayobjects.com/os/basement_prod/513add53-dcb2-4295-8860-9e7aa5236699.json"
  )
    .then((r) => r.json())
    .then((res) => {
      heatMap3DLayer.setData(res);
    });
}
HeatMap3D ​

HeatMap3D
