开始想使用npm的形式安装mapbox和maptalks,但是不知道是不是maptalks只是html5的文件,总是报错,无奈只有在public文件夹使用cdn的方式引入mapbox和maptalks,先引入mapbox后引入maptalks,然后在具体的vue文件中使用
Map.on("load", function () {
glMap.addLayer({
id: "buildings",
type: "fill-extrusion",
minzoom: 1,
source: {
type: "geojson",
//楼宇坐标,层级 json文件
data: build,
},
layout: {
visibility: "visible",
},
paint: {
"fill-extrusion-color": ["get", "color"],
"fill-extrusion-height": ["get", "height"],
"fill-extrusion-base": ["get", "baseHeight"],
"fill-extrusion-opacity": 0.6,
},
});
build是楼宇的数据
数据格式大致为
export const build={
"features":[
{
"type":"Feature",
"properties":{
"name":null,
"type":"building",
"key":"1",
"height":60,
"color":"#00cec9",
"baseHeight":0,
"floor":"1"
},
"geometry":{
"type":"MultiPolygon",
"coordinates":[
[
[
[
121.57791602,
31.26885628
],
[
121.57791642,
31.26454417
],
[
121.57791602,
31.26885628
]
]
]
]
}
},
],
"type":"FeatureCollection"
}