绘制飞线图层

在这一节，我们将通过一个绘制飞线的实例了解一下引擎的使用流程：

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: [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", () => {
  addFlyLineLayer();
});

function addFlyLineLayer() {
  const flyLineLayer = joGISThree.addLayer({
    type: "flyLine",
    id: "flyLine-layer",
    altitude: 100000
  });

  flyLineLayer.setData({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [120.9417, 24.23321]
          ],
          properties: {
            name: "台北市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [101.778916, 36.623178]
          ],
          properties: {
            name: "西宁市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [103.82, 36.07]
          ],
          properties: {
            name: "兰州市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [91.132212, 29.660361]
          ],
          properties: {
            name: "拉萨市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [126.55, 43.83]
          ],
          properties: {
            name: "吉林市"
          }
        }
      }
    ]
  });
}

引入模块

首先，我们需要引入相应的模块：

import { JoGISThree } from "@jodvf/three-gis-map";

模块	说明
JoGISThree	JoGISThree 类为引擎主体，包含引擎初始化启动、运行渲染等核心方法

初始化引擎

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

监听地图初始化完成

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

初始化飞线图层

function addFlyLineLayer() {
  const flyLineLayer = joGISThree.addLayer({
    type: "flyLine",
    id: "flyLine-layer",
    altitude: 100000
  });

  flyLineLayer.setData({
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [120.9417, 24.23321]
          ],
          properties: {
            name: "台北市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [101.778916, 36.623178]
          ],
          properties: {
            name: "西宁市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [103.82, 36.07]
          ],
          properties: {
            name: "兰州市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [91.132212, 29.660361]
          ],
          properties: {
            name: "拉萨市"
          }
        }
      },
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [104.08510531052449, 30.636418650992663],
            [126.55, 43.83]
          ],
          properties: {
            name: "吉林市"
          }
        }
      }
    ]
  });
}

加载飞线图层

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