vue使用maptalks-gl-layer.js加载三维地图

• 版本：
  vue：2.7.14
  vue-cli：3.2.1
• 参考文档：
  http://examples.maptalks.com/vtLayer/3dPolygonStyle/approachAnimation
• 若有不清楚的地方可以参考我的另一篇文章：vue使用maptalks绘制地图教程

1. 复制下面的内容到vue项目中public/index.html文件里

  <link rel="stylesheet" href="https://maptalks.com/api/maptalks.css" />
  <script type="text/javascript" src="https://maptalks.com/api/maptalks.min.js"></script>
  <script type="text/javascript" src="https://maptalks.com/api/maptalks-gl-layers.js"></script>
  <script type="text/javascript" src="https://maptalks.com/api/dat.gui.min.js"></script>

2. 在.vue文件的中写下面的代码：

<template>
	<div id="map" class="container"></div>
</template>

3. 将官网中script中的内容（也就是下面的代码），复制到.vue的mounted函数中

const map = new maptalks.Map("map", {
      center: [-74.00912099912109, 40.71107610933129],
      zoom: 16,
    });

    const vt = new maptalks.VectorTileLayer("vt", {
      urlTemplate: "http://tile.maptalks.com/test/planet-single/{z}/{x}/{y}.mvt",
      spatialReference: "preset-vt-3857",
    });

    const style = {
      style: [{
        filter: [
          "all",
          ["==", "$layer", "building"],
          ["==", "$type", "Polygon"],
        ],
        renderPlugin: {
          dataConfig: {
            type: "3d-extrusion",
            altitudeProperty: "height",
            minHeightProperty: "min_height",
            altitudeScale: 1,
            defaultAltitude: 10,
            topThickness: 0,
            top: true,
            side: true,
          },
          sceneConfig: {
            animation: "swing",
            animationDuration: 800,
          },
          type: "lit",
        },
        symbol: {
          bloom: false,
          ssr: false,
          polygonOpacity: 1,
          material: {
            baseColorTexture: null,
            baseColorFactor: [0.53, 0.73, 0.48, 1],
            hsv: [0, 0, 0],
            baseColorIntensity: 1,
            contrast: 1,
            outputSRGB: 1,
            metallicRoughnessTexture: null,
            roughnessFactor: 1,
            metallicFactor: 1,
            normalTexture: null,
            noiseTexture: null,
            uvScale: [1, 1],
            uvOffset: [0, 0],
            uvRotation: 0,
            uvOffsetAnim: [0, 0],
            normalMapFactor: 1,
            normalMapFlipY: 0,
            bumpTexture: null,
            bumpScale: 0.02,
            clearCoatThickness: 5,
            clearCoatFactor: 0,
            clearCoatIor: 1.4,
            clearCoatRoughnessFactor: 0.04,
            occlusionTexture: null,
            emissiveTexture: null,
            emissiveFactor: [0, 0, 0],
            emitColorFactor: 1,
            emitMultiplicative: 0,
          },
        },
      }, ],
    };
    vt.setStyle(style);

    const sceneConfig = {
      postProcess: {
        enable: true,
        antialias: {
          enable: true
        }
      },
    };

    const groupLayer = new maptalks.GroupGLLayer("group", [vt], {
      sceneConfig,
    });
    groupLayer.addTo(map);

container随便设置一个想要的大小，比如：

.container{width:1000px;height:800px;margin: 50px;}

4. 编译运行后的效果：