基于echarts制作的洛阳市3D地图

最新推荐文章于 2025-10-22 11:19:45 发布

原创

最新推荐文章于 2025-10-22 11:19:45 发布 · 5.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#3dmap #echarts

本文介绍如何利用Echarts制作3D地图，以洛阳市为例，分享了制作过程并提供完整代码下载链接，帮助读者掌握3D地图的创建技巧。

由于工作需要，最近在学习3d地图的制作方法，在网上查找了一些相关的资料过后，大致有了一些系统的了解，这里以洛阳市的3d地图为例子来进行说明，上面是效果图。

下面贴上代码：

map.html:

<!DOCTYPE html>
<html>
<head>
<title>洛阳市3D地图</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.min.js"></script>

<script src="js/luoyang.js"></script>
<script src="js/luoyangxiao.js"></script>

<style type="text/css">
#main1 {
width:100%;
border: 0;
height: 600px;
}
#main2{
width: 100%;
border: 0;
height: 600px;
}
</style>

</head>

<body>
<div id="main" style="width: 100%;">
<div id="main1" style="width: 70%;float: left;"></div>
<div id="main2" style="width: 30%;float: left;"></div>
</div>


<script type="text/javascript">
var city=[
{name:'吉利区',value:[20,'户']},
{name:'洛宁县',value:[40,'户']},
{name:'孟津县',value:[60,'户']},
{name:'新安县',value:[80,'户']},
{name:'伊川县',value:[100,'户']},
{name:'宜阳县',value:[120,'户']},
{name:'偃师市',value:[140,'户']},
&n

最低0.47元/天解锁文章

1 条评论

Better丶G 2019.09.12
.con_info_details audio/*商城首页*/ .wrap { width: 100%; display: inline-block; } .wrap .content { width: 1200px; margin: 0 auto; } .goods_con { overflow: hidden; /*height: 650px;*/ border: 1px solid #dddddd; padding-top: 40px; margin-top: 60px; } .goods_show { width: 530px; overflow: hidden; float: left; text-align: center; } .goods_bpic { width: 428px; height: 428px; /*line-height: 428px;*/ align-items: center; overflow: hidden; display: flex; border: 1px solid #dddddd; margin: 0 auto; } .goods_bpic img{ display: block; margin: 0 auto; } #video { width: 428px; height: 428px!important; display: none; cursor: pointer; background-size: 100%; background-repeat: no-repeat; text-align: center; } .goods_bpic video { width: 428px; height: 428px; /* object-fit:fill!important; */ background-color: #fff!important; } #pic { width:100%; /*height:100%;*/