Echarts实现成都市地图下钻
1.首先获取成都市的json文件，以及成都市各个位置的json文件在mounted触发注意：vue-cli4获取json文件数据，使用相对位置获取mounted(){this.chengdu = "http://192.168.1.79:8082/static/chengdu.json";this.chenghuaqu = " http://192.168.1.79:8082/static/che
·
1.首先获取成都市的json文件，以及成都市各个位置的json文件
在mounted触发
注意：vue-cli4获取json文件数据，使用相对位置获取
mounted(){
this.chengdu = "http://192.168.1.79:8082/static/chengdu.json";
this.chenghuaqu = " http://192.168.1.79:8082/static/chenghuaqu.json";
this.chongzhoushi = " http://192.168.1.79:8082/static/chongzhoushi.json";
this.dayixian = " http://192.168.1.79:8082/static/dayixian.json";
this.dujiangyanshi = " http://192.168.1.79:8082/static/dujiangyanshi.json";
this.jianyangshi = " http://192.168.1.79:8082/static/jianyangshi.json";
this.jinjiangqu = " http://192.168.1.79:8082/static/jinjiangqu.json";
this.jinniuqu = " http://192.168.1.79:8082/static/jinniuqu.json";
this.jintangxian = " http://192.168.1.79:8082/static/jintangxian.json";
this.pengzhoushi = " http://192.168.1.79:8082/static/pengzhoushi.json";
this.piduqu = " http://192.168.1.79:8082/static/piduqu.json";
this.pujiangxian = " http://192.168.1.79:8082/static/pujiangxian.json";
this.qingbaijiangqu =
" http://192.168.1.79:8082/static/qingbaijiangqu.json";
this.qingyangqu = " http://192.168.1.79:8082/static/qingyangqu.json";
this.qionglaishi = " http://192.168.1.79:8082/static/qionglaishi.json";
this.wuhouqu = " http://192.168.1.79:8082/static/wuhouqu.json";
this.piduqu = " http://192.168.1.79:8082/static/piduqu.json";
this.xinjinxian = " http://192.168.1.79:8082/static/xinjinxian.json";
this.longquanqi = " http://192.168.1.79:8082/static/longquanyiqu.json";
this.xinduqu = " http://192.168.1.79:8082/static/xinduqu.json";
this.shaungliuxian = " http://192.168.1.79:8082/static/shuangliuqu.json";
this.wenjiangqu = " http://192.168.1.79:8082/static/wenjiangqu.json";
this.extendsMap();
}
methods:{
extendsMap(){
let that = this;
that.$echarts.extendsMap = function(id, opt) {
that.initData(opt);
that.mapChart.setOption(that.option);
// 添加事件
that.mapChart.on("click", function(params) {
var _this = this;
that.handleEcharts(that, params, _this);
});
};
// 页面初次加载
that.initMap();
},
}
initData(opt) {
this.mapChart = this.$echarts.init(document.getElementById("chartMap"));
this.cityMap = {
成华区: this.chenghuaqu,
崇州市: this.chongzhoushi,
大邑县: this.dayixian,
都江堰市: this.dujiangyanshi,
金牛区: this.jinniuqu,
金堂县: this.jintangxian,
锦江区: this.jinjiangqu,
龙泉驿区: this.longquanqi,
彭州市: this.pengzhoushi,
蒲江县: this.pujiangxian,
青白江区: this.qingbaijiangqu,
青羊区: this.qingyangqu,
双流区: this.shaungliuxian,
温江区: this.wenjiangqu,
武侯区: this.wuhouqu,
新都区: this.xinduqu,
新津县: this.xinjinxian,
邛崃市: this.qionglaishi,
郫都区: this.piduqu
};
this.curGeoJson = {};
this.geoCoordMap = {
成华区: [104.103077, 30.660275],
崇州市: [103.671049, 30.631478],
大邑县: [103.522397, 30.586602],
都江堰市: [103.627898, 30.99114],
金牛区: [104.043487, 30.692058],
金堂县: [104.415604, 30.858417],
锦江区: [104.080989, 30.657689],
龙泉驿区: [104.269181, 30.56065],
彭州市: [103.941173, 30.985161],
蒲江县: [103.511541, 30.194359],
青白江区: [104.25494, 30.883438],
青羊区: [104.055731, 30.667648],
双流区: [103.922706, 30.573243],
温江区: [103.836776, 30.697996],
武侯区: [104.05167, 30.630862],
新都区: [104.16022, 30.824223],
新津县: [103.812449, 30.414284],
邛崃市: [103.46143, 30.413271],
郫都区: [103.887842, 30.808752]
};
this.levelColorMap = {
"1": "rgba(241, 109, 115, .8)",
"2": "rgba(255, 235, 59, .7)",
"3": "rgba(147, 235, 248, 1)"
};
this.defaultOpt = {
mapName: "china", // 地图展示
goDown: false, // 是否下钻
bgColor: "#020933", // 画布背景色
activeArea: [], // 区域高亮,同echarts配置项
data: [],
// 下钻回调(点击的地图名、实例对象option、实例对象)
callback: function(name, option, instance) {}
};
if (opt) this.opt = this.extend(this.defaultOpt, opt);
// 层级索引
this.name = [this.opt.mapName];
this.idx = 0;
this.pos = {
leftPlus: 115,
leftCur: 150,
left: 198,
top: 50
};
this.line = [[0, 0], [8, 11], [0, 22]];
this.style = {
font: '18px "Microsoft YaHei", sans-serif',
textColor: "#eee",
lineColor: "#2ab8ff"
};
let that = this;
that.option = {
backgroundColor: that.opt.bgColor,
graphic: [
{
type: "group",
left: that.pos.left,
top: that.pos.top - 4,
children: [
{
type: "line",
left: 0,
top: -20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: that.style.lineColor
}
},
{
type: "line",
left: 0,
top: 20,
shape: {
x1: 0,
y1: 0,
x2: 60,
y2: 0
},
style: {
stroke: that.style.lineColor
}
}
]
},
{
id: that.name[that.idx],
type: "group",
left: that.pos.left + 2,
top: that.pos.top,
children: [
{
type: "polyline",
left: 90,
top: -12,
shape: {
points: that.line
},
style: {
stroke: "transparent",
key: that.name[0]
},
onclick: function() {
var name = this.style.key;
that.resetOption(that.mapChart, that.option, name);
}
},
{
type: "text",
left: 0,
top: "middle",
style: {
text: that.name[0] === "成都" ? "成都市" : that.name[0],
textAlign: "center",
fill: that.style.textColor,
font: that.style.font
},
onclick: function() {
that.resetOption(that.mapChart, that.option, "成都");
}
},
{
type: "text",
left: 0,
top: 10,
style: {
text: "CHENGDU",
textAlign: "center",
fill: that.style.textColor,
font: '12px "Microsoft YaHei", sans-serif'
},
onclick: function() {
that.resetOption(that.mapChart, that.option, "成都");
}
}
]
}
],
geo: {
map: that.opt.mapName,
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: "#fff"
}
},
emphasis: {
textStyle: {
color: "#fff"
}
}
},
itemStyle: {
normal: {
borderColor: "#2ab8ff",
borderWidth: 1,
areaColor: "#12235c",
shadowColor: "#182f68",
shadowOffsetX: 0,
shadowOffsetY: 25
},
emphasis: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green",
label: {
show: false
}
}
},
regions: that.opt.activeArea.map(function(item) {
if (typeof item !== "string") {
return {
name: item.name,
itemStyle: {
normal: {
areaColor: item.areaColor || "#013C62"
}
},
label: {
normal: {
show: item.showLabel,
textStyle: {
color: "#fff"
}
}
}
};
} else {
return {
name: item,
itemStyle: {
normal: {
borderColor: "#2ab8ff",
areaColor: "#12235c"
}
}
};
}
})
},
series: [
{
type: "effectScatter",
label: {
normal: {
show: true,
textStyle: {
color: "#fff"
}
},
emphasis: {
textStyle: {
color: "#fff"
}
}
},
coordinateSystem: "geo",
// symbol: 'diamond',
showEffectOn: "render",
rippleEffect: {
period: 15,
scale: 6,
brushType: "fill"
},
hoverAnimation: true,
itemStyle: {
normal: {
borderColor: "#2ab8ff",
borderWidth: 1.5,
areaColor: "#12235c"
},
emphasis: {
areaColor: "#2AB8FF",
borderWidth: 0,
color: "green"
}
},
data: that.initSeriesData(that.opt.data)
}
]
};
},
//对象扩展
extend(target, source) {
for (var p in source) {
if (source.hasOwnProperty(p)) {
target[p] = source[p];
}
}
return target;
},
handleEcharts(that, params, self) {
if (that.opt.goDown && params.name !== that.name[that.idx]) {
if (that.cityMap[params.name]) {
var url = that.cityMap[params.name];
axios.get(url).then(result => {
that.curGeoJson = result.data;
//绘制成都各区域的地图
that.$echarts.registerMap(params.name, result.data); //that===在最前面将全局this赋值给that
that.resetOption(self, that.option, params.name);
});
}
}
},
initMap() {
axios.get(this.chengdu).then(result => {
// 绘制成都的地图
this.$echarts.registerMap("成都", result.data);
var myChart = this.$echarts.extendsMap("chart-panel", {
bgColor: "#020933", // 画布背景色
mapName: "成都", // 地图名
goDown: true, // 是否下钻
// 下钻回调
callback: function(name, option, instance) {
// console.log(name, option, instance);
}
});
});
}
/**
* i 实例对象
* o option
* n 地图名
**/
resetOption(i, o, n) {
var breadcrumb = this.createBreadcrumb(n);
var num = this.name.indexOf(n);
var len = o.graphic.length;
if (num < 0) {
o.graphic.push(breadcrumb);
o.graphic[0].children[0].shape.x2 = 145;
o.graphic[0].children[1].shape.x2 = 145;
if (o.graphic.length > 2) {
for (let i = 0; i < this.opt.data.length; i++) {
if (n === this.opt.data[i].name + "市") {
o.series[0].data = this.initSeriesData([this.opt.data[i]]);
break;
} else {
o.series[0].data = [];
}
}
}
this.name.push(n);
this.idx++;
} else {
o.graphic.splice(num + 2, len);
if (o.graphic.length <= 2) {
o.graphic[0].children[0].shape.x2 = 60;
o.graphic[0].children[1].shape.x2 = 60;
o.series[0].data = this.initSeriesData(this.opt.data);
}
this.name.splice(num + 1, len);
this.idx = num;
this.pos.leftCur -= this.pos.leftPlus * (len - num - 1);
}
o.geo.map = n;
o.geo.zoom = 0.4;
i.clear();
i.setOption(o);
this.zoomAnimation();
this.opt.callback(n, o, i);
},
/**
* name 地图名=====包括设置地图名字的样式，和option对应的
**/
createBreadcrumb(name) {
var cityToPinyin = {
成华区: "chenghua",
崇州市: "chongzhou",
大邑县: "dayi",
都江堰市: "dujiangyan",
金牛区: "jinniu",
金堂县: "jintang",
锦江区: "jinjiang",
龙泉驿区: "longquan",
彭州市: "pengzhou",
蒲江县: "pujiang",
青白江区: "qingbaijiang",
青羊区: "qingyang",
双流区: "shaungliu",
温江区: "wenjiang",
武侯区: "wuhou",
新都区: "xindu",
新津县: "xinjin",
邛崃市: "qionglai",
郫都区: "pidu"
};
let that = this;
var breadcrumb = {
type: "group",
id: name,
left: that.pos.leftCur + that.pos.leftPlus,
top: that.pos.top + 3,
children: [
{
type: "polyline",
left: -90,
top: -5,
shape: {
points: that.line
},
style: {
stroke: "#fff",
key: name
},
onclick: function() {
var name = this.style.key;
that.resetOption(that.mapChart, that.option, name);
}
},
{
type: "text",
left: -68,
top: "middle",
style: {
text: name,
textAlign: "center",
fill: that.style.textColor,
font: that.style.font
},
onclick: function() {
var name = this.style.text;
that.resetOption(that.mapChart, that.option, name);
}
},
{
type: "text",
left: -68,
top: 10,
style: {
name: name,
text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : "",
textAlign: "center",
fill: that.style.textColor,
font: '12px "Microsoft YaHei", sans-serif'
},
onclick: function() {
var name = this.style.name;
that.resetOption(that.mapChart, that.option, name);
}
}
]
};
that.pos.leftCur += that.pos.leftPlus;
return breadcrumb;
},
// 设置effectscatter===坐标
initSeriesData(data) {
var temp = [];
for (let i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
temp.push({
name: data[i].name,
value: geoCoord.concat(data[i].value, data[i].level)
});
}
}
return temp;
},
zoomAnimation() {
var count = null;
let that = this;
var zoom = function(per) {
if (!count) count = per;
count = count + per;
// console.log(per,count);
that.mapChart.setOption({
geo: {
zoom: count
}
});
if (count < 1)
window.requestAnimationFrame(function() {
zoom(0.2);
});
};
window.requestAnimationFrame(function() {
zoom(0.2);
});
},
有最新成都地图JSON 包含高新区和天府新区
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献3条内容
所有评论(0)