vue+echarts实现3d地图——引入3d地图,加点,加点击事件

杨同学*

已于 2023-02-17 14:46:37 修改

阅读量1.2w

点赞数 15

分类专栏： echarts 文章标签： echarts vue.js javascript

于 2022-03-10 15:30:54 首次发布

本文链接：https://blog.youkuaiyun.com/m0_52539553/article/details/123399650

版权

echarts 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用ECharts将JSON文件转换为地图，并添加交互功能。首先，下载并重命名JSON文件，然后通过ECharts的registerMap方法注册地图。接着，在Vue组件中引入地图并设置地图样式，包括缩放、颜色等。在mounted阶段初始化ECharts实例，结合接口数据动态展示散点。最后，为散点添加点击事件监听。这是一个简单的ECharts地图可视化的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
先看效果图:

1,获取相当于的json文件,推荐一个获取各个市县的json文件地址点击前往
将下载好的josn文件重命名,简短点.
一共就三个文件
第一个就是json文件,

第二个是myMap.js

(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['exports', 'echarts'], factory);
  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
    // CommonJS
    factory(exports, require('echarts'));
  } else {
    // Browser globals
    factory({}, root.echarts);
  }
})(this, function(exports, echarts) {
  var log = function(msg) {
    if (typeof console !== 'undefined') {
      console && console.error && console.error(msg);
    }
  };
  if (!echarts) {
    log('ECharts is not Loaded');
    return;
  }
  if (!echarts.registerMap) {
    log('ECharts Map is not loaded');
    return;
  }

  // 获取地图数据,这个json就刚刚下载的那个json文件
  let json = require('./shenzhen.json');
  
  // 注册地图,第一个参数就是最后一个文件里面相应的的参数
  echarts.registerMap('广东深圳', json);
});

第三个文件,组件页面

<template>
   <div id="myMap"></div>
</template>
import '@/util/myMap.js'; //引入注册地图的js
let myChartMap = null;//地图
export default {
	data() {
		return {
			optionMap:{
				geo: {
				map: '广东深圳',
				roam: true,
				zoom: 1.2,
				scaleLimit: {  //缩放级别限制
					min: 1,
					// max: 12
				},
				aspectScale: 1.1, //地图的长宽比
				itemStyle: {
					borderWidth: 2,
					borderColor: '#0090fe', //边框颜色
					areaColor: '#003399', //地图区域颜色
					shadowColor: '#182f68',
					shadowOffsetX: 0,
					shadowOffsetY: 15
				},
				label: {
					color: '#fff',
					fontWeight: 'bold',
					show: true,
				},
				emphasis: {
					itemStyle: {
						show: 'true',
						borderWidth: 4,
						borderColor: '#b2163c', //边框颜色
						areaColor: '#531f67', //鼠标移上去的颜色
					},
					label: {
						color: '#fff',
						fontWeight: 'bold',
						show: true,
					}
				},
			  },
		      series: [{
		          type: 'scatter',
		          coordinateSystem: 'geo',
		          data:[],
		          symbolSize: '20',
		          symbol: 'circle',
		          itemStyle: { color: "orange"}
		       }],
			}
		}
	},
	methods:{
	  secaorange() {
  		myChartMap = echarts.init(document.getElementById('myMap'));
	    myChartMap.setOption(this.optionMap);
		window.addEventListener("resize",()=> {
			myChartMap.resize();
		});
      }
    },
    mounted(){
		this.secaorange()
	}
}

到这就可以成功引入地图了,下面进行其他需求
加点
函数里面改下就可以了,调接口获取[{}]格式的数据进行处理

    secaorange() {
      myChartMap = echarts.init(document.getElementById('myMap'));
      organizationQueryWithPage().then(data=>{
        var dataObj = {}
        data.result.records.map(v=>{
          dataObj = {
            name:v.name,
            value:[Number(v.longitude),Number(v.latitude),v.id],
          }
          this.optionMap.series[0].data.push(dataObj);
        })
        this.optionMap.series[0].data = JSON.parse(JSON.stringify(this.optionMap.series[0].data))
        window.addEventListener("resize",()=> {
          myChartMap.resize();
        });
        myChartMap.setOption(this.optionMap);
      })
    },

给点添加点击事件
添加一个click就可以了.

myChartMap.on('click', (data) => {
	// console.log(data);
});

📢没了，结束了，是不是很简单呐，如有问题，欢迎留言。
📢如果此篇博文对您有帮助，还请动动小手点赞 👍 收藏 ⭐留言 📝呐~，谢谢 ~ ~