用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项

由于国家测绘部门的一些相关法律规定,现在版本的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/81295961this.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}
}

用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项相关推荐

Echarts中对地图的指定区域文字展示指定的颜色
Echarts中对地图的指定区域文字展示指定的颜色项目场景: 为提高客户满意度,修改地图中某个区域的文字颜色解决方案: 通过修改series-map.data.label.color属性参考链接 ...
echarts中中国地图的显示
1.如果引用echarts,则需引入china.js,文档在我的资源页中有. 2.代码如下,然后具体的配置,如颜色之类的配置问题到echarts中官网查找(https://echarts.baidu. ...
echarts中在地图上显示label时的阴影问题
先来贴一张最终效果图: 对应的option是这样的 option = {backgroundColor: 'rgb(55, 105, 0, .2)',title: [{text: '测试',left: ...
中高德地图只显示某一城市_小O地图 - 城市交通态势数据查询及下载
小O地图是一款互联网地图数据挖掘.分析.图表软件.具有专业.稳定.高效的特点.提供地图功能多达30余项,并持续更新中. 感兴趣的朋友可以登录官网下载使用 .www.GIS9.com [概述] 本文介绍 ...
echarts中的地图与Axure交互
1.将echarts中的地图嵌入Axure中实现可视化https://echarts.apache.org/examples/zh/editor.html?c=map-polygon. 2.将echa ...
php excel 下拉菜单,使用 PHPExcel 遇到的一个问题：下拉列表的数据来源过长时，显示了别的正常的下拉列表的数据来源...
遇到的问题: 我们还是先来看手册是怎么说的: It is important to remember that any string participating in an Excel formula ...
中高德地图只显示某一城市_干货 | 如何快速制作数据地图？让你的可视化逼格再高一级！...
在数据可视化中,地图可视化是高频应用的一种.我们在一些新闻报道和商业杂志上,会经常看到运用地图来分析展示商业现象,这样的利用地图来反映和分析数据的形式叫数据地图. 数据地图可以最直观的表达出数据之间的 ...
中高德地图只显示某一城市_Excel实用知识：从零开始，一步步制作属于你自己的三维演示地图...
说明本文是视频内容的图文整理版. 原版视频可以在文末观看三维地图操作详解这是一份原始表格,点击表内任意一个单元格,使用Ctrl和T,将这张表转换为动态表,点击插入,三维地图. 重命名图层为销售 ...
echarts中设置地图背景图片
1.geo设置背景 (设置 color) 官方属性说明实现效果: options配置: options: {tooltip: {triggerOn: `onmousemove`,trigger: ` ...

用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项

用echarts 中的地图来显示区域分布情况(vue),包括地理数据来源生成的制作注意事项相关推荐

最新文章

热门文章