由于国家测绘部门的一些相关法律规定,现在版本的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"; //"/examples/data-gl/asset/data/buildings.json"; szdistrict// 显示加载动画效果,可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 hideLoading 隐藏加载动画。/GRAY_KEY/article/details/81295961this.chart.showLoading();$.get(uploadedDataURL, function(usaJson) {self.chart.hideLoading();echarts.registerMap("USA", usaJson);let option = {title: {text: "",subtext: "",sublink: "/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}}
如果觉得《用echarts 中的地图来显示区域分布情况(vue) 包括地理数据来源生成的制作注意事项》对你有帮助，请点赞、收藏，并留下你的观点哦！
