vue使用maptalks-gl-layer.js加载三维地图
- 版本:
vue:2.7.14
vue-cli:3.2.1- 参考文档:
http://examples.maptalks.com/vtLayer/3dPolygonStyle/approachAnimation- 若有不清楚的地方可以参考我的另一篇文章:vue使用maptalks绘制地图教程
- 复制下面的内容到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>
- 将官网中
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;}
- 编译运行后的效果: