高德地图 JS API示例-Object3D 图形- ›立体 Mesh- ›基础 Mesh

<!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>基础 Mesh</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=您申请的key值&plugin=Map3D"></script>
<script>
    var map = new AMap.Map('container', {
        viewMode: '3D',
        showBuildingBlock: false,
        expandZoomRange: true,
        zooms: [3, 20],
        pitch: 50,
        zoom: 16.5,
        center: [116.250766, 39.932931]
    });

    var object3Dlayer = new AMap.Object3DLayer();
    map.add(object3Dlayer);

    var center_3d = map.lngLatToGeodeticCoord(map.getCenter());

    var topColor = [0, 1, 1, 0.9];
    var topFaceColor = [0, 1, 1, 0.4];
    var bottomColor = [0, 0, 1, 0.9];

    //添加一个圆柱体
    var addRegularPrism = function (center, segment, height, radius) {

        var cylinder = new AMap.Object3D.Mesh();
        var geometry = cylinder.geometry;
        var verticesLength = segment * 2;
        var path = []
        for (var i = 0; i < segment; i += 1) {
            var angle = 2 * Math.PI * i / segment;
            var x = center.x + Math.cos(angle) * radius;
            var y = center.y + Math.sin(angle) * radius;
            path.push([x, y]);
            geometry.vertices.push(x, y, 0); //底部顶点
            geometry.vertices.push(x, y, -height); //顶部顶点

            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);
        }

        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.transparent = true; // 如果使用了透明颜色，请设置true
        object3Dlayer.add(cylinder);
    };

    addRegularPrism(center_3d.add(new AMap.Pixel(-1500, 0)), 3, 800, 500) //三棱柱

    addRegularPrism(center_3d, 5, 1200, 500)//五棱柱

    addRegularPrism(center_3d.add(new AMap.Pixel(1500, 0)), 32, 1600, 500)//圆柱
</script>

</body>
</html>
0 0 投票数
文章评分