//实例化地图对象
let map = new maptalks.Map("map",{
center: [13.416935229170008, 52.529564137540376],
zoom: 20,
dragPitch : true,
//allow map to drag rotating, true by default
dragRotate : true,
//enable map to drag pitching and rotating at the same time, false by default
dragRotatePitch : true,
baseLayer: new maptalks.TileLayer('base', {
urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
// features to draw
//将Buildings中的数据,添加到features中
let features = [];
buildings.forEach(function (b) {
console.log(b.features);
features = features.concat(b.features);
});
// the ThreeLayer to draw buildings
let threeLayer = new ThreeLayer('t', {
forceRenderOnMoving : true,
forceRenderOnRotating : true
});
threeLayer.prepareToDraw = function (gl, scene, camera) {
let me = this;
let light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, -10, 10).normalize();
scene.add(light);
features.forEach(function (g) {
let heightPerLevel = 5;
let levels = g.properties.levels || 1;
let color = 0x2685a7
let m = new THREE.MeshPhongMaterial({color: color, opacity : 0.7});
//change to back side with THREE <= v0.94
// m.side = THREE.BackSide;
let mesh = me.toExtrudeMesh(maptalks.GeoJSON.toGeometry(g), heightPerLevel, m, heightPerLevel);
if (Array.isArray(mesh)) {
scene.add.apply(scene, mesh);
} else {
scene.add(mesh);
}
});
};
threeLayer.addTo(map);
vue集成maptalk实现geojson3D渲染
最新推荐文章于 2024-08-10 08:26:07 发布