ExtrudeRegionLayer

---

import { Map } from "maplibre-gl";
import { ThreeGISMap } from "@jodvf/three-gis-map";
import * as maplibregl from "maplibre-gl";
import { Color } from "three";

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: [104.07410531052449, 30.656418650992663],
  pitch: 50,
  zoom: 2.5
});

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

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

function addExtrudeRegionLayer() {
  const extrudeRegionLayer = joGISThree.addLayer({
    type: "extrudeRegion",
    id: "extrudeRegion-layer",
    minzoom: 1,
    region: {
      style: {
        lineOpacity: 1,
        lineWidth: 1,
        lineColor: "#BCF3FB",
        extrudeHeight: 100000,
        topOpacity: 1,
        sideOpacity: 1,
        gradients: [
          [0, "#D9FBFE"],
          [1, "#4A94D9"]
          // [1, '#195D96'],
          // [2, '#0B4864'],
        ],
        topTexture: "./images/bg2.png",
        sideTexture: "./images/side.png",
        sideType: "texture",
        topType: "texture",
        sideColor: "rgba(255,255,255,0.3)",
        topColor: "rgba(255,255,0,0.3)"
      },
      hoverStyle: {
        topColor: "rgb(255,255,0)",
        sideColor: "rgb(200,200,100)",
        offsetY: 5
      }
    }
  });

  fetch("./assets/json/china.json")
    .then((res) => res.json())
    .then((data) => {
      extrudeRegionLayer.setData(data, "EPSG:4326");
    });
  let select: any[] = [];

  const resetExtrudeSelect = () => {
    if (select.length > 0) {
      // @ts-ignore
      select[0].extrude.mesh.material.flatShading = true;
      // @ts-ignore
      select[0].extrude.mesh.material = extrudeRegionLayer.extrudeMaterial;
      // @ts-ignore
      select[0]._group.position.z -= 2000;
      select = [];
    }
  };
  extrudeRegionLayer.on("extrude:click", (selectedObj) => {
    const { obj } = selectedObj;
    const hoverExtrudeMaterial = obj.extrude.mesh.material.clone();
    resetExtrudeSelect();
    hoverExtrudeMaterial.uniforms["topColor"].value = new Color("#ff0000");
    hoverExtrudeMaterial.uniforms["sideColor"].value = new Color("#ff0000");
    hoverExtrudeMaterial.uniforms["topTexture"].value =
      extrudeRegionLayer.topTexture;
    hoverExtrudeMaterial.uniforms["sideTexture"].value =
      extrudeRegionLayer.sideTexture;
    hoverExtrudeMaterial.flatShading = true;
    obj.extrude.mesh.material = hoverExtrudeMaterial;
    obj._group.position.z += 2000;

    select.push(obj);
  });

  map.on("click", (e) => {
    const intersects = extrudeRegionLayer._intersect(e);
    if (!intersects || intersects.length <= 0) {
      resetExtrudeSelect();
    }
  });
}