前言

上周老板要我写个地图小工具，说要给其他员工用于制作PPT，提了几点需求：

1、输入城市名或省份名就能显示相应的地图

2、能够突出显示某地区

3、图片得高清、巨高清！

我打开了csdn给他东拼西凑出了这么个东西，感觉效果还行

效果图

功能

输入省份或地级市的区划代码即可显示行政区域地图

可通过点击区域实现高亮并显示标签，再次点击可取消高亮，修改代码可调整底色及高亮色

右上角保存图片按钮可保存当前图片，修改代码可调整图片清晰度

资源

引入了百度echarts和jquery，均为在线版本，省去下载js文件，这样可以在任意一台联网的电脑上使用

Echarts : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js

jquery: https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js

此外使用了阿里云的地图选择器：阿里云

代码

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>行政区划小工具</title><!-- 引入 echarts.js 文件--><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head><body><div id="main" style="width: 1000px;height:800px;"></div><script>function start(){city = document.getElementById("data").value;city_url = "https://geo.datav.aliyun.com/areas_v3/bound/" + String(city) +"_full.json";alert(city_url);};</script><script type="text/javascript">var city=window.prompt("请输入省份或城市行政代码：");var city_url = "https://geo.datav.aliyun.com/areas_v3/bound/" + String(city) +"_full.json";chart = echarts.init(document.getElementById('main'));$.get(city_url,function (mapjson){mapdata = mapjson.features.map((item) =>{return {name: item.properties.name,value : "0",label: {show:false},}});echarts.registerMap('citymap', mapjson);var option ={title: {text: '行政区划',x:'center',},toolbox: {show : true,feature : {myTool1: {show: true,title: "还原",onclick: () => {const chart = echarts.init(document.getElementById('main'));// 还原chart.clear();chart.setOption(option);// 传值this.$emit("init");console.log('click');},},dataView : {show: true},// restore : {show: true},padding: 5,saveAsImage : {pixelRatio: 10}  //值越大分辨率越高}},visualMap: {show:false,left: 'right',categories: ['1','0'],inRange: {color: ['#004986','#DAE3F3']},text:['High','Low'],  // 文本，默认为数值文本calculable: true},series:[{name:'地图',type:'map',map:'citymap',aspectScale: 1,itemStyle: {normal: {areaColor: '#afdfe4',borderColor: '#ffffff',borderWidth: 2},emphasis: {show: true,areaColor: '#2b4490'}},label: {normal: {show: false,textStyle: {color: "#ffffff",fontSize: 14,},},emphasis:{show: true,textStyle: {color: "#ffffff",fontSize: 14,},},},avoidLabelOverlap: true,data : mapdata,}],};chart.setOption(option);
chart.off('click')
//地图点击事件---高亮
chart.on('click', function(params){console.log(params);//此处写点击事件内容for(var i=0;i<mapdata.length;i++){//  mapdata[i].value="0";// mapdata[i].label.show=false;if(params.name == mapdata[i].name){if (mapdata[i].value=="1"){mapdata[i].value="0";mapdata[i].label.show=false;}else{ mapdata[i].value="1";mapdata[i].label.show=true;};}}chart.setOption(option);});});</script>
</body></html>

总结

参考了很多其他博主的代码，没有系统学过相关知识所以代码就不写注释误人子弟了，各位自行研究吧

如有侵权联系我删除

利用Echarts+阿里云地图选择器绘制可交互的行政区划地图相关推荐

echarts结合阿里云地图json选择器展示地图
效果: 1:引入echarts的官方JS:上手echarts文档使用示例: 2:配套你的地图json用这个,但是只到区:阿里云地图json选择器使用示例: 3:(1)推荐一个可以精确到镇街的地图选 ...
微信早安，利用uniCloud阿里云的云函数实现定时推送
最近比较火的微信早安,看了一下小红书 @猪咪不是猪的教程,也动手做了一下,并做了一下实现定时的优化与符合我自己需求的修改.由于本人并不很熟悉python,所以部分修改是基于教程源码做修改的,在此也感谢 ...
运用阿里云地图实现经纬度转换为省市县
最近在写的一个项目需要进行一个经纬度转换为地理位置的工具类然后写在博客里面提供给大家使用 /*** 经纬度转换地址json* @param lat 经度* @param log 纬度* @retur ...
Android开发之百度地图(soso地图，搜狗地图，阿里云地图)转高德地图经纬度的方法
//将百度地图经纬度转换为高德地图经纬度CoordinateConverter converter = new CoordinateConverter(this);// CoordType.BAIDU ...
Echarts结合百度地图API绘制热力图
最近项目中需要使用echarts与百度地图API结合来绘制事故发生热力图,在将其与百度地图结合的过程中遇到了一些问题,现将其过程与解决方案记录下,以供日后参考.echarts中结合百度地图API的热力 ...
【安信可NB-IoT模组EC系列AT指令应用笔记④】将设备位置接入阿里云地图，实现空间数据可视化
一. 前言安信可EC-01G模块内置了GPS定位芯片,可以将定位信息导入到云阿里平台,实现空间数据的可视化. 更多资料请见阿里云官方文档:https://help.aliyun.com/docume ...
利用Python+阿里云实现DDNS(动态域名解析)
引子我想大家应该都很熟悉DNS了,这回在DNS前面加了一个D又变成了什么呢?这个D就是Dynamic(动态),也就是说,按照传统,一个域名所对应的IP地址应该是定死的,而使用了DDNS后,域名所对应 ...
阿里云地图添加点线面
1.参考实例网址:http://ditu.aliyun.com/jsdoc/map/examples.html 2.实例代码: /*** --------add marker------------- ...
整合腾讯云地图的绘制和编辑几何图形
官方绘制案例:https://lbs.qq.com/webDemoCenter/glAPI/glEditor/toolDraw 官方编辑案例:https://lbs.qq.com/webApi/jav ...
echarts在中国地图上绘制各省指标
先看效果图: 下面看实现方法: html中主要代码 <script src="../static/js/jquery-3.3.1.min.js" ></scrip ...

利用Echarts+阿里云地图选择器绘制可交互的行政区划地图

前言

效果图

功能

资源

代码

总结

利用Echarts+阿里云地图选择器绘制可交互的行政区划地图相关推荐

最新文章

热门文章