中国地图省市下钻描点

本文介绍如何使用Echarts实现从中国地图点击后下钻到省级地图,并在省级地图上显示散点。难点在于下钻后的散点描绘和后台经纬度数据处理。通过监听点击事件,结合resetOption方法更新series数据为散点坐标,解决了下钻后描点问题。同时,解析后台传来的经纬度数据,将其转换为Echarts所需的json格式,实现了散点的绘制。
摘要由CSDN通过智能技术生成

接到一个需求,要从中国地图点击后下钻到省,在省地图上显示散点。遇到两个有困难的地方,一个是下钻后再省地图描点,再就是后台传经纬度直接画点。

我找了一些资料只找到下钻的,没有下钻后再画散点的只能自己玩了。其实也不难就是先找到点击事件再找到点击事件中根据对应省json画地图的地方就可以了,代码如下


var zhongguo = 'assets/json/china.json';
var hainan = "assets/json/hainan.json";
var xizang = "assets/json/xizang.json";
var zhejiang = "assets/json/zhejiang.json";
var yunnan = "assets/json/yunnan.json";
var xinjiang = "assets/json/xinjiang.json";
var tianjin = "assets/json/tianjin.json";
var sichuan = "assets/json/sichuan.json";
var shanxi = "assets/json/shanxi.json";
var shangxi = "assets/json/shanxi1.json";
var shanghai = "assets/json/shanghai.json";
var shangdong = "assets/json/shandong.json";
var qinghai = "assets/json/qinghai.json";
var ningxia = "assets/json/ningxia.json";
var neimenggu = "assets/json/neimenggu.json";
var liaoning = "assets/json/liaoning.json";
var jilin = "assets/json/jilin.json";
var jiangxi = "assets/json/jiangxi.json";
var jiangsu = "assets/json/jiangsu.json";
var hunan = "assets/json/hunan.json";
var hubei = "assets/json/hubei.json";
var henan = "assets/json/henan.json";
var heilongjiang = "assets/json/heilongjiang.json";
var hebei = "assets/json/hebei.json";
var guizhou = "assets/json/guizhou.json";
var guangxi = "assets/json/guangxi.json";
var guangdong = "assets/json/guangdong.json";
var gansu = "assets/json/gansu.json";
var chongqing = "assets/json/chongqing.json";
var aomen = "assets/json/aomen.json";
var anhui = "assets/json/anhui.json";
var beijing = "assets/json/beijing.json";
var fujian = "assets/json/fujian.json";
var xianggang = "assets/json/xianggang.json";

echarts.extendsMap = function(id, opt) {
    // 实例
    var chart = this.init(document.getElementById(id));
    var geoCoordMap = {
    	    '北碚': [106.50,29.81]
    }
    var geoCoordMap = {
    		   '北京':[116.4,39.9],
    		    '张家口':[114.9,40.8],
    		    '上海':[121.5,31.2],
    		    '佛山':[113.1,23],
    		    '惠州':[114.4,23.1],
    		    '嘉兴':[120.8,30.7],
    		    '黔西南州':[104.9,25.1],
    		    '湖州':[120.1,30.9],
    		    '苏州':[120.6,31.3],
    		    '无锡':[120.3,31.5],
    		    '南京':[118.8,32.1],
    		    '太原':[112.5,37.9],
    		    '晋中':[112.7,37.7],
    		    '西安':[108.9,34.3],
    		    '长沙':[112.9,28.2],
    		    '株洲':[113.2,27.8],
    		    '武汉':[114.3,30.6],
    		    '荆州':[112.2,30.3],
    		    '黄石':[115,30.2],
    		    '合肥':[117.2,31.8],
    		    '九华山':[117.8,30.5],
    		    '泉州':[118.7,24.9],
    		    '福州':[119.3,26.1],
    		    '南昌':[115.9,28.7],
    		    '九江':[116,29.7],
    		    '仙桃':[113.4,30.4],
    		    '天门':[113.2,30.7],
    		    '东戴河':[119.9,40],
    		    '广州':[113.3,23.1],

    		    '大庆':[125.03,46.58],
    		    '新疆': [86.61 , 40.79],
    		    '西藏':[89.13 , 30.66],
    		    '黑龙江':[128.34 , 47.05],
    		    '吉林':[126.32 , 43.38],
    		    '辽宁':[123.42 , 41.29],
    		    '内蒙古':[112.17 , 42.81],
    		    '北京':[116.40 , 40.40 ],
    		    '宁夏':[106.27 , 36.76],
    		    '山西':[111.95,37.65],
    		    '河北':[115.21 , 38.44],
    		    '天津':[117.04 , 39.52],
    		    '青海':[97.07 , 35.62],
    		    '甘肃':[103.82 , 36.05],
    		    '山东':[118.01 , 36.37],
    		    '陕西':[108.94 , 34.46],
    		    '河南':[113.46 , 34.25],
    		    '安徽':[117.28 , 31.86],
    		    '江苏':[120.26 , 32.54],
    		    '上海':[121.46 , 31.28],
    		    '四川':[103.36 , 30.65],
    		    '湖北':[112.29 , 30.98],
    		    '浙江':[120.15 , 29.28],
    		    '重庆':[107.51 , 29.63],
    		    '湖南':[112.08 , 27.79],
    		    '江西':[115.89 , 27.97],
    		    '贵州':[106.91 , 26.67],
    		    '福建':[118.31 , 26.07],
    		    '云南':[101.71 , 24.84],
    		    '台湾':[121.01 , 23.54],
    		    '广西':[108.67 , 23.68],
    		    '广东':[113.98 , 22.82],
    		    '海南':[110.03 , 19.33]
    		};
    
    var data = [
                { name: '新疆', value: 57 },
                { name: '张家口', value: 47 },
                { name: '上海', value: 3 },
                { name: '上海', value: 3 },
                { name: '佛山', value: 22 },
                { name: '嘉兴', value: 6 },
                { name: '黔西南州', value: 17 },
                { name: '湖州', value: 34 },
                { name: '苏州', value: 33 },
                { name: '无锡',  value: 5},
                { name: '南京', value: 5 },
                { name: '太原', value: 55 },
                { name: '晋中', value: 23 },
                { name: '西安', value: 4 },
                { name: '长沙', value: 49 },
                { name: '株洲', value: 17 },
   
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值