vue中实现地图下钻

首先说下需求和数据格式，需求是实现中国地图的下钻，下钻到省市区三级，对于直辖市下钻到二级，首先定义了三个数组存放省市区的数据：代码如下

initChart() {let chart = $echarts.init(document.getElementById("main"));let _self = this;$axios.get("/static/public/map/china.json").then(function(res) {let d = [];for (var i = 0; i < res.data.features.length; i++) {for(let j in _self.mapData01){if(_self.mapData01[j].province == res.data.features[i].properties.name){d.push({ //格式化省份的数据name: res.data.features[i].properties.name,value: _self.mapData01[j].num,selected:true,//数据区域高亮显示色块latitude: _self.mapData01[j].latitude,longitude: _self.mapData01[j].longitude,});} else {}}}_self.mapdata = d;_self.originalValue = d;//注册地图$echarts.registerMap("china", res.data);//绘制地图_self.renderMap("china", d,1);});//地图点击事件chart.on("click", function(params) {// console.log( params.name );if (params.name in provinces) {//如果点击的是34个省、市、自治区，绘制选中地区的二级地图$axios.get("/static/public/map/province/" + provinces[params.name] + ".json").then(function(res) {$echarts.registerMap(params.name, res.data);var d = [];// console.log( params.name );if (_self.special.indexOf(params.name) >= 0) {// debuggerfor (var i = 0; i < res.data.features.length; i++) {for(let j in _self.mapData03){if(_self.mapData03[j].zone2 == res.data.features[i].properties.name){d.push({name: res.data.features[i].properties.name,value: _self.mapData03[j].num,selected:true,//echarts 绘制地图设置其中某些板块高亮（颜色）latitude: _self.mapData03[j].latitude,longitude: _self.mapData03[j].longitude,});} else {}}}// console.log(11);// console.log(d);} else {// console.log(22);for (var i = 0; i < res.data.features.length; i++) {for(let j in _self.mapData02){if(_self.mapData02[j].zone1 == res.data.features[i].properties.name){d.push({name: res.data.features[i].properties.name,value: _self.mapData02[j].num,selected:true,latitude: _self.mapData02[j].latitude,longitude: _self.mapData02[j].longitude,});} else {}}}}_self.renderMap(params.name, d,2);}).catch(err => {// //注册地图// console.log(11);// $echarts.registerMap("china", res.data);// //绘制地图// _self.renderMap("china", d,1);});} else if (params.seriesName in provinces) {//如果是【直辖市/特别行政区】只有二级下钻if (_self.special.indexOf(params.seriesName) >= 0) {_self.renderMap("china", _self.mapdata,1);} else {//显示县级地图if(cityMap[params.name] == undefined){  //点击第二级向第三级的时候找不到json文件时回到全国地图// console.log(11);_self.renderMap("china", _self.originalValue,1);} else {$axios.get("/static/public/map/city/" + cityMap[params.name] + ".json").then(function(res) {$echarts.registerMap(params.name, res.data);var d = [];for (var i = 0; i < res.data.features.length; i++) {for(let j in _self.mapData03){if(_self.mapData03[j].zone2 == res.data.features[i].properties.name){d.push({name: res.data.features[i].properties.name,value: _self.mapData03[j].num,selected:true,//echarts 绘制地图设置其中某些板块高亮（颜色）latitude: _self.mapData03[j].latitude,longitude: _self.mapData03[j].longitude,});} else {}}}// debugger_self.renderMap(params.name, d,3); });}}} else {_self.renderMap("china", _self.originalValue,1);}});},renderMap(map, data,number) {// console.log(map);// console.log(number);// console.log(data);if(number == 2){this.backMapName = map;}this.backMapNumber = number;// console.log(this.backMapName);// console.log(this.backMapNumber);let chart = $echarts.init(document.getElementById("main"));// this.option.title.subtext = map;//上方下钻标题this.geoData = [];this.geoCoordMap = {};this.geoTitle = "";//为空不显示热力点，let zoom = 1.1;//这点控制地图的大小，因为有的地图下钻很大就需要缩小if(number == 1){zoom = 1.1;this.geoTitle = "";} else if(number == 2){if(map == "重庆" || map == "北京" || map == "天津" || map == "上海"){zoom = 1.2;} else if(map == "内蒙古" || map == "黑龙江" || map == "广东" || map == "河南" || map == "辽宁" || map == "福建" || map == "甘肃") {zoom = 0.7;} else {zoom = 1.0;}this.geoTitle = "";} else if(number == 3){zoom = 1.0;for (var i = 0; i < data.length; i++) {this.geoData.push({name: data[i].name,value: data[i].value,});this.geoCoordMap[data[i].name] = [data[i].longitude,data[i].latitude];}// setTimeout(function (){//   this.geoTitle = map;// },20);if(data.length != 0){this.geoTitle = map;//我的需求是第三级显示热力点} else {this.geoTitle = "";}// console.log(this.geoCoordMap);} else if(number == 4){zoom = 1.1;this.geoTitle = "";}// console.log(this.geoCoordMap);this.option.geo =  {map: this.geoTitle,show: false,roam: false,label: {normal: {show: true,textStyle: {color: "#F0F8FB"}},emphasis: {// 对应的鼠标悬浮效果show: false,textStyle: {color: "#F0F8FB"}}},itemStyle: {normal: {show: false,areaColor: "#0d202e",//有数据第三级背景色borderColor: "rgba(0, 0, 0, 0.2)",},emphasis: {areaColor: "#00c86c"}}};this.option.series = [{tooltip: {trigger: "item",formatter: p => {//自定义提示信息let dataCon = p.data;let txtCon =dataCon.name + " " + "场站数" + " : " + dataCon.value[2];return txtCon;}},show: false,roam: false,type: "effectScatter",//热力点属性值coordinateSystem: "geo",showAllSymbol: true,symbolSize: 20,symbolRotate: 35,label: {normal: {formatter: "",// position: "right",show: false,textStyle: {fontSize: 10,},},emphasis: {show: true}},itemStyle: {normal: {fontSize: 10,areaColor: "#00C76C"}},data: this.convertData(this.geoData)},{name: map,type: "map",mapType: map,roam: false,zoom:zoom,//地图缩放比例tooltip: {trigger: "item",textStyle: {align: "left"},formatter: function(a, b, c) {// console.log(a);var txtCon = "";if (isNaN(a.value)) {txtCon = a.name + " " + "场站数" + " : " + 0;} else {txtCon = a.name + " " + "场站数" + " : " + a.value.toFixed(0);}return txtCon;}},nameMap: {china: "中国"},label: {normal: {show: true,textStyle: {color: "#ffffff",//地图文字颜色// fontSize:this.width<689?10:10,//地图文字大小// fontSize:this.width<689?10:10,//地图文字大小fontSize: 10,//地图文字大小}},emphasis: {// 对应的鼠标悬浮效果show: true,textStyle: {color: "#F0F8FB",}}},itemStyle: {normal: {areaColor: "#3280d5",//整个地图背景色borderColor: "rgba(0, 0, 0, 0.2)",},emphasis: {label:{show:true},areaColor: "#01C86D",//鼠标悬停背景色}},data: data}];//渲染地图chart.setOption(this.option);},
//热力点数据格式化
convertData(data) {// console.log(data);var res = [];for (var i = 0; i < data.length; i++) {var geoCoord = this.geoCoordMap[data[i].name];if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}// console.log(res);return res;},

个人写法，仅供参考，json文件可去“我的下载”下载文件，json文件放在static文件夹下。

vue中实现地图下钻相关推荐

vue是否可以做行车轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue中谷歌地图标记点、聚合点图标自定义
vue中谷歌地图标记点.聚合点图标自定义标记点自定义聚合点自定义完整代码最近用vue+谷歌地图做国外项目,地图需要有标记点和聚合点. 标记点:1,图标样式自定义 2,点击更换图标聚合点:1, ...
vue人员轨迹_在vue中高德地图引入和轨迹的绘制的实现
高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图,并在main.js中进行全局配置.(百度上有高德地图引入与配置方法,这里就不详细介绍): 1)npm install vue-am ...
vue中百度地图使用及自定义点聚合样式
百度地图使用及点聚合功能由于后台固定了百度地图,百度地图和高德地图经纬度转换有次数限制,不能满足项目的正常运行,所以切换了百度地图,下面对使用中遇到的问题进行记录: 安装及使用百度地图: npm i ...
【Vue+Mapbox】Vue中mapbox地图的使用（一）
唉,之前写的代码找不到了,码一下,方便自己以后使用. STEP 1(安装mapbox使用包): 官网提示[Module bundler] 在Vue终端执行上述操作,直到出现成功提示. STEP 2(在 ...
Vue中百度地图（vue-baidu-map）的使用
1.开始 vue-map-baidu:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 百度地图开发者平台申请密钥详见: h ...
vue中echarts 实现下钻（饼图为例）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 1.echarts图是以子组件的形式引入 import comChart from "/components/com-cha ...
vue中Echarts地图组件+城市json文件
效果图要求是鼠标悬停在地图上,阴影显示,但悬停区域颜色不变,鼠标离开后阴影消失完整代码 <template><div id="app"><div ...
【Vue+Mapbox】Vue中mapbox地图的使用（二）—— 自定义Geojson地图数据
很多时候,我们在使用地图的时候,用的并不是mapbox提供的底图,而是我们自己的数据. 这里以Geojson(json)数据为例. STEP 1 (数据定义) 将自己的数据加载,同时赋予名称. imp ...

vue中实现地图下钻

vue中实现地图下钻相关推荐

最新文章

热门文章