web3d地图开发时，经常需要在3d地图上添加一些图片标注
矩形贴图标注位置实例
添加标注
// 引入three.js
import * as THREE from 'three/build/three.module.js';
import {modelUrl} from "@/config/config.js";
// 矩形平面网格模型设置背景透明的png贴图
var geometry = new THREE.PlaneBufferGeometry(1, 1); //默认在XOY平面上
var textureLoader = new THREE.TextureLoader(); // TextureLoader创建一个纹理加载器对象
var texture = textureLoader.load(modelUrl + 'assets/biaozhu.png');
var material = new THREE.MeshBasicMaterial({
map: texture,
transparent: true, //使用背景透明的png贴图，注意开启透明计算
// side: THREE.DoubleSide, //双面可见
});
// 所有矩形平面mesh材质material和几何体geometry可以共享
// size:矩形平面Mesh的尺寸
// x，y表示矩形平面在一个平面上位置坐标
function cityPointMesh(size, x, y) {
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(size, size, size);//设置mesh大小
mesh.position.set(x, y, 0);//设置mesh位置
return mesh;
}
export {cityPointMesh};
标注行政中心
var mapHeight = 0.8;//拉伸高度
lineGroup.position.z = mapHeight + mapHeight * 0.1;//适当偏移解决深度冲突
// 加载./china.json，结构和world.json 一样，省份对应国家
loader.load(modelUrl + 'json/china.json', function (data) {
// 访问所有省份边界坐标数据：data.features
data.features.forEach(function (area) {
// "Polygon"：省份area有一个封闭轮廓
//"MultiPolygon"：省份area有多个封闭轮廓
if (area.geometry.type === "Polygon") {
// 把"Polygon"和"MultiPolygon"的geometry.coordinates数据结构处理为一致
area.geometry.coordinates = [area.geometry.coordinates];
}
// 解析所有封闭轮廓边界坐标area.geometry.coordinates
lineGroup.add(metesBounds(area.geometry.coordinates));//省份边界轮廓插入组对象mapGroup
// height：根据行政区尺寸范围设置，比如高度设置为地图尺寸范围的2%、5%等，过小感觉不到高度，过大太高了
meshGroup.add(ExtrudeMesh(area.geometry.coordinates, mapHeight));//省份轮廓拉伸Mesh插入组对象mapGroup
// 标注出来省份的行政中心
var pos = area.properties.center;//每个省份行政中心位置经纬度
var size = 1.2;//大小根据地图尺寸范围设置或者说相机渲染范围
var mesh = cityPointMesh(size, pos[0], pos[1]);
mesh.position.z = mapHeight + mapHeight * 0.01;
mapGroup.add(mesh);
});
// 地图底部边界线
var lineGroup2 = lineGroup.clone();
mapGroup.add(lineGroup2);
lineGroup2.position.z = -mapHeight * 0.1;//适当偏移解决深度冲突
})
