基于高德地图js v1.4.15绘制三维户室效果

最新推荐文章于 2024-01-26 14:17:36 发布
L.傲骨雄风
最新推荐文章于 2024-01-26 14:17:36 发布
阅读量765
点赞数
分类专栏： js 高德地图文章标签： javascript 前端 html
本文链接：https://blog.csdn.net/xlp789/article/details/128387749
版权
高德地图同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
2 篇文章 0 订阅
订阅专栏
<!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>
效果图：