用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GIS的获取和制作应该都不是什么大问题,只需将相关区域的地理要素转换成geojson即可,如果不知道怎么转换,我的文章WebGIS常用的空间分析,地图发布,底图自定义,QGIS插件,地理矢量数据格式转换工
由于国家测绘部门的一些相关法律规定,现在版本的ecahrts 中的地图资源已经不能制作和直接使用,只能通过自己注册地图regiseterMap(name,json),来实现地图的区域,这些数据,学GIS的获取和制作应该都不是什么大问题,只需将相关区域的地理要素转换成geojson即可,如果不知道怎么转换,我的文章WebGIS常用的空间分析,地图发布,底图自定义,QGIS插件,地理矢量数据格式转换工具等资源汇总里面有相关的介绍,但是数据生成还是需要注意以下几点:
1.echarts 加载地图时注意geojson文件中的feature的propertis中的name字段名称一定要为name,
2.并且必须带有name的属性,不然echarts加载不到json中的地图,name不能大写,或者的单个字母大写,否则就会出错.
有了数据之后生成效果图就很方便了找到echarts的相关的配置和demo 进行设施即可,官方文档自己网上看就是了,我直接上我的效果地址):http://47.106.197.17/zhongshanUniversity/#/GIS/chartmap 和组件相关代码如下:
<template>
<div style="height:80%;width:100%;background:#1e1e1e"/>
</template>
<script>
import echarts from "echarts";
import $ from "jquery";
import { debounce } from "@/utils";
export default {
props: {
className: {
type: String,
default: "chart"
},
datalist: {
type: [Object, Array],
default: {
gmq_count: 10,
ftq_count: 20,
dpxq_count: 30,
lhq_count: 40,
ytq_count: 1000,
baq_count: 500,
nsq_count: 60,
lhuq_count: 90,
lgq_count: 80,
psq_count: 10
}
},
name: {
type: Array
}
},
data() {
return {
chart: null,
maxrangeV: ""
};
},
mounted() {
this.initChart();
this.getMaxrange();
this.__resizeHanlder = debounce(() => {
if (this.chart) {
this.chart.resize();
}
}, 100);
window.addEventListener("resize", this.__resizeHanlder);
},
beforeDestroy() {
if (!this.chart) {
return;
}
window.removeEventListener("resize", this.__resizeHanlder);
this.chart.dispose();
this.chart = null;
},
watch: {
datalist() {
this.initChart();
this.getMaxrange();
}
},
methods: {
initChart() {
let self = this;
this.chart = echarts.init(this.$el);
this.chart.on("click", function(param) {
self.$emit("clickfunc", param);
// alert(param.name);
});
var uploadedDataURL = "static/map/map.geojson"; //"http://echarts.baidu.com/examples/data-gl/asset/data/buildings.json"; szdistrict
// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。https://blog.csdn.net/GRAY_KEY/article/details/81295961
this.chart.showLoading();
$.get(uploadedDataURL, function(usaJson) {
self.chart.hideLoading();
echarts.registerMap("USA", usaJson);
let option = {
title: {
text: "",
subtext: "",
sublink: "https://blog.csdn.net/qq_26991807",
left: "right"
},
tooltip: {
trigger: "item",
showDelay: 0,
transitionDuration: 0.2,
formatter: function(params) {
var value = (params.value + "").split(".");
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,");
return params.seriesName + "<br/>" + params.name + ": " + value;
}
},
visualMap: {
left: "right",
min: 0,
max: self.maxrangeV,
inRange: {
color: [
"#313695",
"#4575b4",
"#74add1",
"#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
/*
'#29FF6C',
'#29FF7E',
'#29FF90',
' #29FFA2',
'#29FFB4',
'#29FFC6',
'#29FFD7',
'#29FFE9',
'#29FFFB',
'#29F1FF',
'#29DFFF',
'#29CDFF',
'#29BCFF',
'#29AAFF',
'#2998FF',
'#2986FF',
' #2974FF',
'#2962FF',
'#2950FF',
'#293FFF',
'#292DFF' */
]
},
text: ["High", "Low"], // 文本,默认为数值文本
calculable: true,
textStyle: {
color: "#fff"
}
},
toolbox: {
show: true,
//orient: 'vertical',
left: "right",
top: "top",
feature: {
// dataView: { readOnly: true },
restore: {},
saveAsImage: {}
},
iconStyle: {
borderColor: "#fff"
}
},
series: [
{
name: "深圳",
type: "map",
roam: true,
map: "USA",
center: [114.16315, 22.60894],
zoom: 1.1,
itemStyle: {
emphasis: { label: { show: true } },
normal: {
label: {
show: true,
formatter: function(params) {
var value = (params.value + "").split(".");
value = value[0].replace(
/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
"$1,"
);
return params.name + ":" + value;
},
textStyle: {
color: "#fff",
align: "left",
fontSize: 16
}
}
}
},
// 文本位置修正
textFixed: {
// Alaska: [20, -20]
},
data: [
{ name: "福田区", value: self.datalist.ftq_count },
{ name: "罗湖区", value: self.datalist.lhuq_count },
{ name: "龙华区", value: self.datalist.lhq_count },
{ name: "龙岗区", value: self.datalist.lgq_count },
{ name: "南山区", value: self.datalist.nsq_count },
{ name: "坪山区", value: self.datalist.psq_count },
{ name: "盐田区", value: self.datalist.ytq_count },
{ name: "大鹏新区", value: self.datalist.dpxq_count },
{ name: "光明新区", value: self.datalist.gmq_count },
{ name: "宝安区", value: self.datalist.baq_count }
]
}
]
};
self.chart.setOption(option);
// self.chart.on("click", function(params) {
// alert(params.name + params.value);
// });
});
},
getMaxrange() {
let v1 = 0;
for (let v in this.datalist) {
if (this.datalist[v] > v1) {
v1 = this.datalist[v];
}
}
this.maxrangeV = v1;
}
}
};
</script>
地图的geojson格式示意如下:
{"type":"Feature",
"geometry":{"type":"Polygon","coordinates":[[[114.07240271810434,22.591215901890433],
[114.07277218853474,22.59022699132922],[114.07345287044389,22.58930674419094],
[114.07358415928655,22.589101366040097],...]]]},
"properties":{"stroke":"#555555","stroke-width":2,"stroke-pacity":1,"fill":"#555555","fill-
opacity":0.5,"name":"罗湖区","height":1.1}
}
更多推荐
所有评论(0)