Three.js click map dynamic annotation

First look at the effect 

This is the effect so far. Achieving this effect also borrows a lot of other people's code, here I just talk about how the dynamic addition comes from.

First of all, it must create a ray to get the area you clicked, and at the same time add the corresponding mesh and center to the mesh object when generating the map itself. Here I use the provincial capitals of various administrative divisions.

var loader = new THREE.FileLoader()
        loader.setResponseType('json');
        loader.load("http://26.26.26.1:8099/china.json", (data) => {
            data.features.forEach((middle) => {
                var height1 = 2
                var height2 = -0.2
                var name = middle.properties.name
                var center = middle.properties.center
...
                meshGroup.add(ExtrudeMesh(middle.geometry.coordinates, height1, name, center))
            })
        })

    var mesh = new THREE.Mesh(geometry, material);
    mesh.name = name
    mesh.center = center
    return mesh;

Then add aperture, prism and label to the corresponding position when clicking

        var label;
        var mesh;
        var lengzhu;
        var chooseMesh = null;//标记鼠标拾取到的mesh
        function choose(event) {
            scene.remove(mesh)
            scene.remove(lengzhu)
            scene.remove(label)
...
            var pos;
            // 光圈
            pos = intersects[0].object.center
            var size = 1.2;//大小根据地图尺寸范围设置或者说相机渲染范围
            mesh = cityPointMesh(size, pos[0], pos[1]);
            mesh.position.z = 2 + 2 * 0.01;

            // 棱锥
            lengzhu = ConeMesh(size, pos[0], pos[1])
            lengzhu.position.z = 2 + 2 * 0.01;

            // 标注
            label = CreateDivByCSS2(intersects[0].object.name, pos[0], pos[1], 2.1)
           
            scene.add(mesh)
            scene.add(lengzhu)
            scene.add(label)
        }
        addEventListener('click', choose); // 监听窗口鼠标单击事件

Each click removes the corresponding object of the previous click to ensure that there is only one prism, label and aperture in the entire screen.