l7plot怎么绘制3D地图？

Question

有大佬知道l7plot怎么绘制3D地图吗？类似这种下面带阴影的

Answer 1

你可以使用L7Plot的3D模式来绘制类似的地图，多看看文档就好了：

import { Mapbox } from '@antv/l7plot';
import { MapboxScene } from '@antv/l7';
import { ThreeLayer } from '@antv/l7plot-3d';

const scene = new MapboxScene({
  id: 'container',
  map: new Mapbox({
    style: 'dark',
    pitch: 60,
    center: [121.507674, 31.223043],
    zoom: 15.5,
  }),
});

const threeLayer = new ThreeLayer({
  enableMultiPassRenderer: true,
});
scene.addLayer(threeLayer);

threeLayer.add(new THREE.AmbientLight(0xffffff));

const loader = new THREE.GLTFLoader();
loader.load(
  'https://gw.alipayobjects.com/os/bmw-prod/8a74c1d3-16f3-4719-94c6-1a459f2b3190.gltf',
  function (gltf) {
    const mesh = gltf.scene;
    mesh.scale.set(0.01, 0.01, 0.01);
    mesh.position.set(121.507674, 31.223043, 0);
    threeLayer.add(mesh);
  },
);

Answer 2

假设您的地图数据已经存储在一个叫做mapData的数组中，其中每一个元素代表一个三角形片段，该数组是被import MapData from 'mapData'引入的。
我们可以在mounted()方法中对mapData数据进行过滤，只保留属于某一个省份的数据，然后根据这些数据绘制对应的地图。代码如下：

<template>
  <div ref="container"></div>
</template>
<script>
import { Viewport, Camera, Vector3D, Polygon, Shadow, l7 } from 'l7plot';
import MapData from 'mapData';
export default {
  mounted() {
    // 挑选属于该省份的地图数据
    const data = MapData.filter((item) => item.province === '广东省');
    // 定义视窗
    const container = this.$refs.container;
    const width = container.clientWidth;
    const height = container.clientHeight;
    const viewport = new Viewport(0, 0, width, height);
    // 定义相机位置和朝向
    const eye = new Vector3D(0, 0, 500);
    const target = new Vector3D(0, 0, 0);
    const up = new Vector3D(0, 1, 0);
    const camera = new Camera(eye, target, up, 30, width / height, 1, 10000);
    // 绘制地图表面
    const polygons = [];
    for (let i = 0; i < data.length; i++) {
      const polygon = new Polygon(data[i].points);
      polygon.SetShadingMode(true);
      polygon.SetTexture('#000');
      polygons.push(polygon);
    }
    l7.BeginScene(viewport, camera);
    for (let i = 0; i < polygons.length; i++) {
      polygons[i].Draw();
    }
    // 绘制阴影
    const shadow = new Shadow();
    const polyhedron = new l7.Polyhedron(data);
    shadow.CreateShadowVolume(polyhedron, 5000);
    const vertices = shadow.GetShadowVolume(camera);
    const shadowPolygons = [];
    for (let i = 0; i < vertices.length; i += 3) {
      const polygon = new Polygon([vertices[i], vertices[i + 1], vertices[i + 2]]);
      polygon.SetShadingMode(true);
      polygon.SetTexture('#999');
      shadowPolygons.push(polygon);
    }
    for (let i = 0; i < shadowPolygons.length; i++) {
      shadowPolygons[i].Draw();
    }
    l7.EndScene();
  },
}
</script>

以上代码会根据mapData中的数据，只显示广东省的地图，其他省份的地图将被忽略。其中，data变量中存储的就是属于广东省的三角形片段数据。