Object3D 的拾取

使用 getObject3DByContainerPos 方法，对 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">
    <title>Object3D 的拾取</title>
    <meta name="description" content="使用 getObject3DByContainerPos 方法，对 Object3D 对象进行拾取。">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container { margin: 0; width: 100%; height: 100%; }
        .info span { color: #0288d1; }
    </style>
</head>
<body>
<div id="container"></div>
<div class="info" style="min-width: 350px;">
    <h4>Object3D 拾取信息</h4>
    <p>选中的 Mesh ID：<span id="mesh-id">--</span></p>
    <p>选中的 face 所在的索引：<span id="face-index">--</span></p>
    <p>交叉点距透视原点的距离：<span id="distance">--</span></p>
    <p>与拾取对象的交叉点：
        <span id="cross-point">--</span>
    </p>
</div>
<script src="//cache.amap.com/lbs/static/es5.min.js"></script>
<script src="//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.910215],
        features: ['bg', 'road'],
        zoom: 15
    });

    map.AmbientLight = new AMap.Lights.AmbientLight([1, 1, 1], 0.5);
    map.DirectionLight = new AMap.Lights.DirectionLight([1, -1, 2], [1, 1, 1], 0.8);

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

    var meshes = [];

    // 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中
    var paths = [
        [
            [116.395951, 39.907129],
            [116.399127, 39.907178],
            [116.399534, 39.900413],
            [116.396316, 39.900331]
        ],
        [
            [116.391531, 39.922912],
            [116.401938, 39.923241],
            [116.402431, 39.913334],
            [116.398354, 39.913103],
            [116.398311, 39.912659],
            [116.396273, 39.912643],
            [116.396101, 39.913108],
            [116.392067, 39.912959]
        ]
    ];

    // Object3D.Mesh 的 color 分别是[r, g, b, a]，每个分量只支持 [0 - 1] 区间，
    var color = [100 / 255, 150 / 255, 230 / 255, 0.9];
    var selectColor = [255 / 255, 245 / 255, 47 / 255, 0.9];

    function initMesh() {

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

            // 创建 Object3D.Mesh 对象
            var mesh = new AMap.Object3D.Mesh();
            meshes.push(mesh);
            var geometry = mesh.geometry;
            var vertices = geometry.vertices;
            var vertexColors = geometry.vertexColors;
            var faces = geometry.faces;
            var vertexLength = bounds.length * 2;

            var verArr = [];

            // 设置侧面
            bounds.forEach(function (lngLat, index) {
                var g20 = map.lngLatToGeodeticCoord(lngLat);
                verArr.push([g20.x, g20.y]);
                // 构建顶点-底面顶点
                vertices.push(g20.x, g20.y, 0);
                // 构建顶点-顶面顶点
                vertices.push(g20.x, g20.y, -1000);

                // 设置底面顶点颜色
                vertexColors.push.apply(vertexColors, color);
                // 设置顶面顶点颜色
                vertexColors.push.apply(vertexColors, color);

                // 设置三角形面
                var bottomIndex = index * 2;
                var topIndex = bottomIndex + 1;
                var nextBottomIndex = (bottomIndex + 2) % vertexLength;
                var nextTopIndex = (bottomIndex + 3) % vertexLength;

                //侧面三角形1
                faces.push(bottomIndex, topIndex, nextTopIndex);
                //侧面三角形2
                faces.push(bottomIndex, nextTopIndex, nextBottomIndex);
            });

            // 设置顶面，根据顶点拆分三角形
            var triangles = AMap.GeometryUtil.triangulateShape(verArr);
            for (var v = 0; v < triangles.length; v += 3) {
                var a = triangles[v];
                var b = triangles[v + 2];
                var c = triangles[v + 1];
                faces.push(a * 2 + 1, b * 2 + 1, c * 2 + 1);
            }

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

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

    }

    function updateMesh(obj) {
        var mesh = meshes.find(function (mesh) {
            return mesh == obj;
        });

        // 重置 Mesh 颜色
        meshes.forEach(function (mesh) {
            updateMeshColor(mesh, color);
        });

        // 更新选中 Mesh 的 vertexColors
        if (mesh) {
            updateMeshColor(mesh, selectColor);
        }

    }

    function updateMeshColor(mesh, color) {
        var vertexColors = mesh.geometry.vertexColors;
        var len = vertexColors.length;
        for (var i = 0; i < len / 4; i++) {
            var r = color[0];
            var g = color[1];
            var b = color[2];
            var a = color[3];
            // 不能重新赋值，只允许修改内容
            vertexColors.splice(i * 4, 4, r, g, b, a);
        }

        mesh.needUpdate = true;
        mesh.reDraw();
    }

    // prism 拾取
    map.on('mousemove', function (ev) {
        var pixel = ev.pixel;
        var px = new AMap.Pixel(pixel.x, pixel.y);
        var obj = map.getObject3DByContainerPos(px, [object3Dlayer], false) || {};

        // 选中的 face 所在的索引
        var index = obj.index;
        // 选中的 object3D 对象，这里为当前 Mesh
        var object = obj.object;
        // 被拾取到的对象和拾取射线的交叉点的3D坐标
        var point = obj.point;
        // 交叉点距透视原点的距离
        var distance = obj.distance;

        updateInfo(obj);
        updateMesh(object);
    });

    function updateInfo(obj) {
        var $meshId = document.getElementById('mesh-id');
        var $faceIndex = document.getElementById('face-index');
        var $crossPoint = document.getElementById('cross-point');
        var $distance = document.getElementById('distance');

        $meshId.innerHTML = (!isNil(obj.object) && !isNil(obj.object.id)) ? obj.object.id : '--';
        $faceIndex.innerHTML = !isNil(obj.index) ? obj.index : '--';
        $distance.innerHTML = !isNil(obj.distance) ? obj.distance : '--';
        var p = '--';
        if (obj.point) {
            p = [
                '',
                'X: ' + obj.point[0],
                'Y: ' + obj.point[1],
                'Z: ' + obj.point[2]
            ].join('<br>');
        }

        $crossPoint.innerHTML = p;
    }

    function isNil(obj) {
        return obj == undefined;
    }

    initMesh();
//    updateMeshColor(meshes[0], selectColor);


</script>
</body>
</html>
        
控制台
清空
示例
中心常见
问题智能
客服