Vue Echarts 显示地图且根据坐标设置标注点

哎哟我去

我就想用Echarts在页面上画一张地图，这张地图显示全国，然后我有几个坐标点的经纬度信息，需要在这个地图上根据经纬度标注在Echarts图表上，再有一个就是当我点击省份的时候，地图可以切换到省份的子区域里面，接这么简单。

实现

之前从来没接触过，现在懵逼的一比，靠了！

好在借助网上的资源或者说博客把我想实现的功能都是实现了。哎哟，顺便吐槽一下，现在真的是一家原创万家抄袭的博客世界，也不验证能不能成功就是一顿狂粘狂发表，真棒！

下载 geojson 文件

首先，我用的是 geojson 文件，没有用 js.
下载地址：http://datav.aliyun.com/tools/atlas/#&lat=32.287132632616384&lng=101.1181640625&zoom=4

Html代码

首先在页面上写一个div用来放地图

<template><div><h1>这里打算写地图</h1><div id="main" style="width: 900px;height:800px;border:1px solid red"></div></div>
</template>

ts代码

首先得装 echarts 插件。

npm install echarts --save

在使用 echarts 组件中引入 echarts 插件。

import echarts from 'echarts'

还需要 axios 插件，用来读取 geojson 文件。

npm install axios  --save

引入axios插件。

import axios from 'axios'

首先在组件里面引入中国的json文件。

const chinaJson = require("../../public/mapJson/china.json");

在data里面创建一个Echarts对象和配置对象。

  data(){return{myChart:'',distributionOptions:''}},

创建一个方法，用来配置 Echarts 的 Options 参数。

changeOptions (name) {// 经纬度数据const seriesList = [{data: [{ value: [106.9, 27.7] },{ value: [105.29, 27.32] },{ value: [106.04, 27.03] },{ value: [104.82, 26.58] },{ value: [107.82, 20.58] }]},{data: [{value: [107.43, 28.56]}]},{data: [{value: [107.5, 27.76]}]}];// 图标const series = seriesList.map(v => {return {type: "scatter", //配置显示方式为用户自定义coordinateSystem: "geo",data: v.data};});// optionsthis.distributionOptions = {tooltip: {        // 提示框组件show: true,     // 显示提示框组件trigger: "item",     // 触发类型triggerOn: "mousemove",  // 出发条件formatter: "名称:{b}<br/>坐标:{c}"},series,  // 数据geo: {map: name || 'china',  // 引入地图 省份或者 国家layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效layoutSize: "45%",roam: true, //开启鼠标缩放和漫zoom: 2,label: {normal: {//静态的时候展示样式show: true, //是否显示地图省份得名称textStyle: {color: "#fff",fontSize: 10,fontFamily: "Arial"}},emphasis: {  // 高亮状态下的样式//动态展示的样式color: "#fff"}},itemStyle: {   // 地图区域的多边形 图形样式。normal: {borderColor: "#07919e",  // 边框颜色areaColor: "#1c2f59",    //  区域颜色textStyle: {             // 文字颜色color: "#fff"},shadowBlur: 10,          // 图形阴影的模糊大小shadowOffsetX: 10        // 阴影水平方向上的偏移距离。},emphasis: {areaColor: "#1c2f59",color: "#fff"}}}};},

然后创建一个方法初始化地图数据。

 // 初始化地图数据init() {echarts.registerMap("china", chinaJson);this.changeOptions("china")this.myChart = echarts.init(document.getElementById("main"));this.myChart.setOption(this.distributionOptions);// 上边应该都懂，下面就是创建了一个点击事件，目的是点击省份子区域的时候可以切换到省份地图，省份的json文件自己下载。this.myChart.on("click", chinaParam => {let code = provinces[provincesText.indexOf(chinaParam.name)] || 100000this.getProvinceMapOpt(code,provincesName[provincesText.indexOf(chinaParam.name)])});window.onresize = function() {this.myChart.resize();};},

上面用到了三个参数，在项目里面定义一下，一定要对应起来，不要出错。

var provinces = ['310000', '130000','140000','150000','210000','220000','230000','320000','330000','340000','350000','360000','370000','410000','420000','430000','440000','450000','460000','510000','520000','530000','540000','610000','620000','630000','640000','650000', '110000', '120000', '500000', '810000', '820000', '710000'];
var provincesText = ['上海', '河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省','黑龙江省',  '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省','河南省', '湖北省', '湖南省', '广东省', '广西省', '海南省', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区', '北京市', '天津市', '重庆市', '香港', '澳门', '台湾省'];
var provincesName = ['shanghai', 'hebei','shanxi','neimenggu','liaoning','jilin','heilongjiang','jiangsu','zhejiang','anhui','fujian','jiangxi','shandong','henan','hubei','hunan','guangdong','guangxi','hainan','sichuan','guizhou','yunnan','xizang','shanxi1','gansu','qinghai','ningxia','xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];

在点击事件里面用到了一个方法，目的就是切换子区域重新加载Echarts的作用。

//显示各省地图
getProvinceMapOpt(provinceAlphabet, name){var path = '/mapJson/province/'+provinceAlphabet+'.json'if( provinceAlphabet === 100000 ){path = '/mapJson/china.json'}axios.get(path).then((s)=>{echarts.registerMap(name, s.data)this.changeOptions(name)this.myChart.setOption(this.distributionOptions, true);})
},

最后，初始化地图。

  mounted() {this.init();},

就出来上边的效果了。就这样。

还有许多的不足，后期慢慢改。

项目源码参考：https://gitee.com/wjw1014/vue_learning_vuex/blob/master/src/components/myEcharts.vue