threejs绘制多个多边形

bidepanm

已于 2022-08-26 11:41:33 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签：地图

于 2022-08-24 18:31:33 首次发布

本文链接：https://blog.csdn.net/bidepanm/article/details/126510330

points格式：
在这里插入图片描述

drawPolygon(points, index) {
        const coordinates = points.map(item => {
            return [item.x, item.y];
        });
       
        const shape = new THREE.Shape();
        coordinates.forEach(( v, j) => {
        	// 左边转换工具
            const coord = this.customCoords.lngLatToCoord(v);
            if( j === 0) {
                shape.moveTo(...coord);
            } else {
                shape.lineTo(...coord);
            }
        });
        const geometry = new THREE.ShapeGeometry(shape);
        // 材质
        this.roadMaterial = new THREE.MeshPhongMaterial( {
                color: 'rgba(0, 224, 150)',
                // 增加透明度
                transparent: true,
                opacity: 0.5,
                polygonOffset: true,
                polygonOffsetFactor: -0.1,
                polygonOffsetUnits: -2.9
            });