vue中使用伪3d散点地图

最新推荐文章于 2024-06-19 11:06:09 发布
最新推荐文章于 2024-06-19 11:06:09 发布
阅读量659 收藏 8
点赞数 1
分类专栏： vue 大屏 地图 文章标签： vue 前端 大屏 echarts地图 散点图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43614064/article/details/126303801
版权
vue 同时被 3 个专栏收录
3 篇文章 1 订阅
订阅专栏
大屏
2 篇文章 0 订阅
订阅专栏
地图
1 篇文章 0 订阅
订阅专栏

效果图：

在这里插入图片描述
在这里插入图片描述
地图是2d的，加了阴影有种3d地图的感觉。代码如下：

全部代码

<template>
  <div class="content">
    <div ref="charts" style="width: 100%; height: 80vh"></div>
  </div>
</template>

<script>
function test(num){
  let count = 0;
  if( !num ){
    return 1 
  }else{
    while(num != 0) {
      count++;   //统计位数；
      num = parseInt(num/10); //赋值给 num 以备下次循环使用；
    }
    return count
  }
}
var points = [
  {name:'丽水市南明湖',value:[119.923691,28.434421,120],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'丽水市高铁站',value:[119.953388,28.441793,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'丽水市白云国家森林公园',value:[119.917785,28.497991,160],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'处州府城',value:[119.91875,28.437695,120],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'九龙国家湿地公园',value:[119.819104,28.367558,120],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'箬寮原始林景区',value:[119.29192,28.297614,120],itemStyle:{color:'rgb(239,221,49)'}},
  {name:'双童山景区',value:[119.487821,28.410143,120],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'大木山茶园景区',value:[119.377139,28.5254,120],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'松阴溪景区',value:[119.47587,28.440384,120],itemStyle:{color:'rgb(239,221,49)'}},
	{name:'宝溪',value:[118.77541,28.032403,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'住龙',value:[118.90023,28.17522,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'青瓷小镇',value:[118.848847,27.931823,12],itemStyle:{color:'rgb(73,213,194)'}},
  {name:'百山祖国家公园·龙泉山景区',value:[119.093471,27.994061,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'遂昌金矿国家矿山公园',value:[119.428491,28.619012,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'遂昌南尖岩景区',value:[119.083804,28.339892,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'遂昌神龙谷景区',value:[119.140524,28.34905,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'遂昌千佛山景区',value:[119.023469,28.456701,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'仙都景区',value:[120.132571,28.691502,1200],itemStyle:{color:'rgb(226,148,66)'}},
  {name:'黄龙山景区',value:[120.068089,28.707576,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'河阳古民居景区',value:[120.007947,28.724553,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'中国石雕文化旅游区',value:[120.325222,28.065488,1200],itemStyle:{color:'rgb(226,148,66)'}},
	{name:'石门洞4A级景区',value:[120.111999,28.276767,12000],itemStyle:{color:'rgb(213,62,82)'}},
	{name:'百山祖4A级景区',value:[119.20169,27.74802,12000],itemStyle:{color:'rgb(213,62,82)'}},
	{name:'巾子峰4A级景区',value:[118.997971,27.656742,12000],itemStyle:{color:'rgb(213,62,82)'}},
  {name:'中国畲乡之窗4A景区',value:[119.570456,27.939503,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'云中大漈4A级景区',value:[119.617272,27.800866,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'东西岩景区',value:[119.717997,28.523882,12],itemStyle:{color:'rgb(73,213,194)'}},
  {name:'古堰画乡景区',value:[119.739248,28.298502,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'云和梯田景区',value:[119.476577,28.044554,12],itemStyle:{color:'rgb(73,213,194)'}},
	{name:'云和湖仙宫景区',value:[119.521689,28.208425,12],itemStyle:{color:'rgb(73,213,194)'}},
  ]
import lishui from "@/assets/geo/lishui.json"
export default {
	data() {
		return {
			points,
			name:'',
      test
		}
	},
	created () {
		this.$nextTick(() => {
		this.initCharts();
		})
	},
  methods: {
    initCharts() {
      const myChart = this.$echarts.init(this.$refs["charts"]);
		// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。	
			// 图表配置项		
		var option = {
       visualMap: {
          min: 0,
          max: 10000,
          left: 10,
          bottom: 15,
          showLabel: !0,
          padding:8,
          // text: ["高", "低"],
          pieces: [
            {
              gte: 0,
              lte: 50,
              label: "舒适",
              color: "#1DE9B6",
            },
            {
              gte: 50,
              lte: 100,
              label: "适中",
              color: "#ebde41",
            },
            {
              gte: 100,
              lte: 200,
              label: "拥挤",
              color: "#db9649",
            },
            {
              gte: 200,
              lte: 300,
              label: "预警",
              color: "#cd4554",
            },
          ],
          show: !0,
          textStyle: {
            color: "#ffffff",
          },
           backgroundColor:'#172b63'
        },
      tooltip : {
        trigger: 'item'
      },
      geo: {
        map: 'lishui',
        aspectScale: 1.1, //长宽比
        zoom: 1.1,
        roam: false,
        itemStyle: {
          normal: {
            areaColor: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [{
                offset: 0,
                color: '#09132c' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#274d68'  // 100% 处的颜色
              }],
              globalCoord: true // 缺省为 false
            },
            shadowColor:'rgb(58,115,192)',
            shadowOffsetX: 5,
            shadowOffsetY: 5,
          },
          emphasis: {
            areaColor: '#2AB8FF',
            borderWidth: 0,
            color: 'green',
            label: {
              show: false
            }
          }
        },
      },
        series: [
          {
            type: "map",
            aspectScale: 1.1, //长宽比
            roam: false,
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            tooltip : {
              show:false,
              trigger: 'item'
            },
            itemStyle: {
              normal: {
               borderColor: 'rgb(147, 235, 248)',
                borderWidth: 1,
                areaColor: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [{
                      offset: 0,
                      color: '#09132c' // 0% 处的颜色
                  }, {
                      offset: 1,
                      color: '#274d68'  // 100% 处的颜色
                  }],
                  globalCoord: true // 缺省为 false
                },
              },
              emphasis: {
                areaColor: '#6c9ebf',
                borderWidth: 0.1
                }
            },
            zoom: 1.1,
            map: 'lishui' //使用
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            showEffectOn: 'render',
            zlevel:1,
            rippleEffect: {
              period: 15,
              scale: 3,
              brushType: 'fill'
            },
            hoverAnimation: true,
            label: {
              normal: {
                show:false,
                formatter: '{b}',
                position: 'right',
                offset: [15, 0],
                color: '#1DE9B6',
                textStyle: {
                  color: "#fff",
                },
              },
            },
            selectedMode: false,
             tooltip: {
              padding: 0,
              enterable: true,
              transitionDuration: 1,
              textStyle: {
                color: "#000",
                decoration: "none",
              },
              formatter: function (params) {
                console.log(params);
                var tipHtml = "";
                tipHtml =`
                <div style="background-color:rgba(0,0,0,.5);padding:1vh 1vw;">
                  <div style="display: flex;align-items:center;justify-content:space-between">
                    <span id="town" style="color: #fff; font-size: 1vw;">${params.name}</span>
                  </div>
                  <ul style="display: flex;flex-direction: column;margin-top: 1vh;font-size: 0.7vw;color:#fff">
                    <li>
                    客流量:<span style="color:#8eefff">100</span>
                    </li>
                    <li style="display:flex">
                    饱和度：<div>
  <span style="display: inline-block;background-color: rgb(73,213,194);width: 1vh;height: 1vh;border-radius: 50%;"></span>
  <span style="color:#8eefff">舒适</span>
</div>
                    </li>
                    <li>
                    实时监控
                    </li>
                    
                  </ul>
                  </div>`
                return tipHtml;
              },
            },
            itemStyle: {
              normal: {
                color: "#1DE9B6",
                shadowBlur: 10,
                shadowColor: "#333",
              },
            },
            symbolSize:function (val) {
              if(test(val[2])<=2){
                return 10
              }else if(test(val[2])<=3){
                return 12
              }else if(test(val[2])<=4){
                return 14
              }else{
                return 16
              }
            },
            data: points,
            zoom: 1.22,
            map: "lishui", //使用
          },
       
        ],
      };
      this.$echarts.registerMap("lishui", lishui);
      // 隐藏动画加载效果。
      // myChart.hideLoading();
      // 设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过setOption完成，ECharts 会合并新的参数和数据，然后刷新图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>```
虚诚
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
从零开始Vue项目中使用MapboxGL开发三维地图教程（一）MapboxGL介绍以及前期vue项目的搭建
tigerhhzz的博客
06-11 3404
1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如：百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶，同时也有开源的一些地图引擎如：openlayers、mapboxgl、Leaflet等。
vue使用echarts与echarts-gl实现3d地图与 3d柱状图
weixin_48464215的博客
07-17 6382
主要使用vue+echarts+echarts-gl实现3d地图效果，以及3d柱状图效果
【vue】Echarts3D地图下钻
m0_68324632的博客
04-13 9361
地图下钻是一个非常常见的功能需求，本篇文章会细致讲解如何在Vue3中使用Eharts-gl渲染出3D地图，并且实现地图下钻和返回上级地图的完整功能。
vue3中实现3D地图——three.js
最新发布
xiaoququ的博客
06-19 572
【代码】vue3中实现3D地图——three.js。
vue3可视化项目——3D地图的使用
weixin_62639453的博客
02-14 2177
3D地图的使用，与二维地图大差不差，但是多了一点，我接着我在上一篇的基础上进行拓展。建议看完上篇再看这一篇。
【3d地图】vue中使用echarts geo3D
热门推荐
m0_68324632的博客
06-24 1万+
想必对于一个前端来说，大家对echarts并不陌生，本次文章主要记录了我在使用echarts 渲染3d地图过程中的一点心得，本文代码包含详细的配置项注释~
vue2+three.js做出一个精美的3D地图——1.搭建基础场景
Tx的博客
08-24 1124
使用vue2+three.js帮你快速打造一个精美的3D可视化地图。
vue项目中使用百度地图的方法
08-27
Vue 项目中使用百度地图的方法 Vue 项目中使用百度地图的方法主要介绍了在 Vue 项目中使用百度地图的方法。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下。 一、在百度...
在vue中使用天地图dome
05-31
在Vue.js项目中集成天地图（Tianditu）是一个常见的前端开发任务，特别是在构建地理信息系统（GIS）应用时。天地图是中国国家基础地理信息中心提供的免费地图服务，它提供了丰富的地图资源，包括矢量地图、影像地图...
vue项目中使用天地图
01-08
下面将详细介绍如何在Vue项目中使用天地图，以及实现一些基本的地图操作。 首先，你需要在天地图的官方网站（http://lbs.tianditu.gov.cn/home.html）注册一个账号，并申请API密钥（Key），这是使用天地图服务的...
详解vue在项目中使用百度地图
10-17
主要介绍了vue在项目中使用百度地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
简单聊聊Echarts伪3D地图实现的相关配置
是小宗啊？的博客
04-28 3058
简单聊聊Echarts伪3D地图实现的相关配置
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
qq_45234022的博客
11-16 4144
整理了一下Echarts做3D地图的vue组件
vue2+three.js做出一个精美的3D地图——2.创建地图
Tx的博客
08-25 2572
创建地图
vue+echarts实现3d地图——引入3d地图,加点,加点击事件
$
03-10 1万+
先看效果图: 1,获取相当于的json文件,推荐一个获取各个市县的json文件地址点击前往 将下载好的josn文件重命名,简短点. 一共就三个文件 第一个就是json文件, 第二个是myMap.js (function(root, factory) { if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. define(['exports',.
Vue中如何实现城市3D分布图
itclanCoder
09-07 1034
cityfenbu.vue<template> <div> <el-cardclass="seriesmap-box-card"> <divslot="header"class="clearfix"> <span>城市分布图 (点击可下钻到县)</...
vue3使用高德地图实现3d地图
weixin_71893790的博客
11-20 1535
vue3实现高德地图
vue2-echarts5.x-3D地图
xudechuan的博客
09-13 706
这个例子是基于echarts5.x版本的。
vue中Echarts实现伪3D地图
q_qman的博客
10-21 3782
1.需求3d切面地图，颜色渐变，选中阴影，可切换地市，点击时展示地理数据，由于echarts 3d地图无法渐变，地图比例大小效果不好改成理想效果，所以通过伪3d方式实现。最终实现如下图： 2.代码 <template> <div ref="myEchart" class="map-echart"> </div> </template> <script> import echarts from 'echarts' export def
vue中使用echarts3D地图禁止旋转
05-12
可以通过设置 `roam` 属性为 `false` 来禁止echarts3D地图的旋转。具体实现方法为： ``` <template> <div id="chart"></div> </template> <script> import echarts from 'echarts' export default { mounted() { let chart = echarts.init(document.getElementById('chart')) chart.setOption({ // 其他option配置 globe: { roam: false // 禁止旋转 } }) } } </script> ``` 在以上代码中，我们设置了 `globe.roam` 属性为 `false`，这样就可以禁止echarts3D地图的旋转。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值