高德地图 JS API示例-Object3D 图形- ›通用接口- ›Object3D 的添加/移除

<!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">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <title>Object3D 的添加/移除</title>
    <meta name="description" content="对 Object3D 对象进行添加和移除的基本操作。">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container"></div>
<div class="input-card" style="width: auto;">
    <div class="input-item">
        <button id="add-obj3d-btn" class="btn">添加 Object3D</button>
    </div>
    <div class="input-item">
        <button id="rm-obj3d-btn" class="btn">移除 Object3D</button>
    </div>
</div>
<!-- 加载地图JSAPI脚本 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D"></script>
<script>
    // 创建 3D 底图
    var map = new AMap.Map('container', {
        viewMode: '3D', // 开启 3D 模式
        pitch: 55,
        rotation: 35,
        center: [116.39756, 39.904215],
        features: ['bg', 'road'],
        zoom: 16
    });

    // 添加 Object3DLayer 图层，用于添加 3DObject 对象
    var object3Dlayer = new AMap.Object3DLayer();
    map.add(object3Dlayer);

    // 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中
    var paths = [
        [116.395951,39.907129],
        [116.399127,39.907178],
        [116.399534,39.900413],
        [116.396316,39.900331]
    ];

    var bounds = paths.map(function(path) {
        return new AMap.LngLat(path[0], path[1]);
    });

    // 创建 Object3D 对象
    var prism = new AMap.Object3D.Prism({
        path: bounds,
        height: 500,
        color: 'rgba(100, 150, 230, 0.7)' // 支持 #RRGGBB、rgb()、rgba() 格式数据
    });

    // 开启透明度支持
    prism.transparent = true;

    // 添加至 3D 图层
    object3Dlayer.add(prism);

    //绑定按钮事件
    document.querySelector("#add-obj3d-btn").onclick = function() {
        // 添加至 3D 图层
        object3Dlayer.add(prism);
    };

    document.querySelector("#rm-obj3d-btn").onclick = function() {
        // 从 3D 图层中移除
        object3Dlayer.remove(prism);
    };
</script>
</body>
</html>

0 0 投票数

文章评分