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

zhuoyunluo77

已于 2022-09-06 16:02:07 修改

阅读量3.1k

点赞数 2

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

于 2022-09-06 15:51:25 首次发布

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

版权

本文介绍了如何结合three.js库和geojson数据来绘制广西地图。首先展示了绘制效果，接着讲解了准备geojson数据的步骤，并详细阐述了使用three.js进行地图绘制的过程，包括创建div、初始化场景、制作星空背景、加载并转换地理数据以及实现鼠标交互功能，显示城市标签。

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

一、效果如下：

three.js + geojson 绘制广西地图

二、事先准备好要使用的数据

首先要准备好广西地图的geojson数据，可以通过阿里云的Data.GeoAtlas地理小工具获取想要的地理位置数据，我这里获取的是json文件。
three.js在使用时会受版本影响，我所使用的有效js文件：阿里云盘

三、使用geojson绘制地图

1、首先创建需要的div和设置样式

 <style>
        html body{
     
            width: 100%;
            height: 100%;
            margin:0;
            padding:0;
            overflow: hidden;
        }
        #backgroundImage{
     
            position: absolute;
            width: 100%;
            height: 100%;
            /*background: url("picture/bg.png") no-repeat center;*/
            z-index:-100;
            background-size: 100% 100%;
        }
        #cityInfo{
     
            position: abs