<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>3d建筑物</title>
<style>
html,
body,
#container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=****&plugin=Map3D"></script>
<script>
var map = new AMap.Map('container', {
viewMode: '3D',
showBuildingBlock: false,
expandZoomRange: true,
zooms: [3, 20],
pitch: 50,
zoom: 20,
isHotspot: false,
animateEnable: false,
mapStyle: '*****',
center: [108.872185968302404, 34.177322951784504]
});
var object3Dlayer = new AMap.Object3DLayer();
map.add(object3Dlayer);
var topColor1 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var topFaceColor1 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var bottomColor1 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var topColor2 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var topFaceColor2 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var bottomColor2 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var topColor3 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var topFaceColor3 = [255 / 255, 255 / 255, 255 / 255, 0.7];
var bottomColor3 = [255 / 255, 255 / 255, 255 / 255, 0.7];
fetch(
'./data/d3.geojson'
).then(res => res.json())
.then(data => {
console.log(data)
var features = data.features;
for (var j = 0; j < features.length; j++) {
//竖线
let VertiLine = new AMap.Object3D.Line();
VertiLine.backOrFront = 'both'; // 关键位置
let Lgeometry = VertiLine.geometry;
let lineBounds = [];
let lineHeight = [];
var s_height = features[j].properties.s_hegiht;
var e_height = features[j].properties.e_height;
var gastotal = features[j].properties.gastotal;
var coordinates = features[j].geometry.coordinates[0][0];
console.log(coordinates)
var segment = coordinates.length;
console.log(segment)
if (gastotal<=100) {
addRegularPrism(segment, coordinates, parseFloat(s_height) * 15, parseFloat(e_height) * 15, topColor1, bottomColor1, topFaceColor1)
}
else if (gastotal<= 200) {
addRegularPrism(segment, coordinates, parseFloat(s_height) * 15, parseFloat(e_height) * 15, topColor2, bottomColor2, topFaceColor2)
}
else{
addRegularPrism(segment, coordinates, parseFloat(s_height) * 15, parseFloat(e_height) * 15, topColor3, bottomColor3, topFaceColor3)
}
for (var n = 0; n < segment; n++) {
var lnglat = new AMap.LngLat(parseFloat(coordinates[n][0]), parseFloat(coordinates[n][1]));
let origin = map.lngLatToGeodeticCoord(lnglat);
Lgeometry.vertices.push(origin.x, origin.y, -s_height * 15);
Lgeometry.vertexColors.push(128 / 255, 128 / 255, 128 / 255, 1);
Lgeometry.vertices.push(origin.x, origin.y, -e_height * 15);
Lgeometry.vertexColors.push(128 / 255, 128 / 255, 128 / 255, 1);
lineBounds.push(lnglat);
}
object3Dlayer.add(VertiLine);
//横线
lineHeight.push(e_height * 15);
let HoriLine = new AMap.Object3D.MeshLine({
path: lineBounds,
height: lineHeight,
color: [128 / 255, 128 / 255, 128 / 255, 1],
width: 1.5
});
HoriLine.backOrFront = 'both'; // 关键位置
object3Dlayer.add(HoriLine);
}
object3Dlayer.on("click", function (evt) {
console.log(evt)
})
});
var addRegularPrism = function (segment, coordinates, startHeight, endHeight, topColor, bottomColor, topFaceColor) {
var cylinder = new AMap.Object3D.Mesh();
var geometry = cylinder.geometry;
var verticesLength = segment * 2;
var path = []
console.log(coordinates)
for (var i = 0; i < segment; i += 1) {
console.log(coordinates[i][0])
var lng = parseFloat(coordinates[i][0]);
var lat = parseFloat(coordinates[i][1]);
console.log(lng,lat)
var xy = map.lngLatToGeodeticCoord(new AMap.LngLat(lng, lat));
var x = xy.x;
var y = xy.y;
path.push([x, y]);
geometry.vertices.push(x, y, -startHeight); //底部顶点
geometry.vertices.push(x, y, -endHeight); //顶部顶点
geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //底部颜色
geometry.vertexColors.push.apply(geometry.vertexColors, topColor); //顶部颜色
var bottomIndex = i * 2;
var topIndex = bottomIndex + 1;
var nextBottomIndex = (bottomIndex + 2) % verticesLength;
var nextTopIndex = (bottomIndex + 3) % verticesLength;
geometry.faces.push(bottomIndex, topIndex, nextTopIndex); //侧面三角形1
geometry.faces.push(bottomIndex, nextTopIndex, nextBottomIndex); //侧面三角形2
}
// 构建顶面三角形,为了区分顶面点和侧面点使用不一样的颜色,所以需要独立的顶点
for (var i = 0; i < segment; i += 1) {
geometry.vertices.push.apply(geometry.vertices, geometry.vertices.slice(i * 6 + 3, i * 6 + 6)); //底部顶点
geometry.vertexColors.push.apply(geometry.vertexColors, topFaceColor);
}
console.log(path)
var triangles = AMap.GeometryUtil.triangulateShape(path);
var offset = segment * 2;
for (var v = 0; v < triangles.length; v += 3) {
geometry.faces.push(triangles[v] + offset, triangles[v + 2] + offset, triangles[v + 1] + offset);
}
cylinder.backOrFront = 'both'; // 关键位置
cylinder.transparent = true; // 如果使用了透明颜色,请设置true
object3Dlayer.add(cylinder);
};
</script>
</body>
</html>
效果图: