使用three.js + geojson 完成广西地图的绘制（下篇）

最新推荐文章于 2024-10-18 13:35:33 发布

zhuoyunluo77

最新推荐文章于 2024-10-18 13:35:33 发布

阅读量1k

点赞数

分类专栏： three.js 文章标签： javascript 前端

本文链接：https://blog.csdn.net/w__qwwq/article/details/126727515

版权

本文介绍如何使用three.js和geojson在前端完成广西地图的绘制，并通过CSS2DRenderer实现在地图上标注城市名称，确保标签始终平行于屏幕。内容包括展示最终效果以及关键代码实现。

摘要由CSDN通过智能技术生成

一、效果图：

在地图上的每个城市模块中标注名称

二、在地图上标注名字标签

为了实现名字标签始终是平行于屏幕的，因此这里使用到了CSS2DRenderer.js。基于上一篇已经绘制好的地图，我使用CSS2DRenderer在地图的每个城市名字标签，主要实现代码如下L:

labelRenderer = new THREE.CSS2DRenderer();
labelRenderer.setSize( window.innerWidth, window.innerHeight );
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0px';
labelRenderer.domElement.style.pointerEvents = 'none';
document.body.appendChild( labelRenderer.domElement );

在生成地图的initMap(guangxiJson)方法中&