江苏省省市地图下钻

admin管理员组

文章数量:1487745

江苏省省市地图下钻

以下用到的json数据可在我的资源中下载：geojson地图数据

江苏省省市地图下钻

1、首先需要在china.json中找到省份代码再去找地区，拿到对应的json数据(可私信我发你)

2、需要引用到echarts.min.js，利用echarts和我们的json数据渲染页面，进行区块事件的监听

具体js代码如下：路径可以按自己的来

var jiangsu = "../json/jiangsu.json";
var yancheng = "../json/yancheng.json";
var xuzhou = "../json/xuzhou.json";
var nantong = "../json/nantong.json";
var huaian = "../json/huaian.json";
var suzhou = "../json/suzhou.json";
var suqian = "../json/suqian.json";
var lianyungang = "../json/lianyungang.json";
var yangzhou = "../json/yangzhou.json";
var nanjing = "../json/nanjing.json";
var taizhou = "../json/taizhou.json";
var wuxi = "../json/wuxi.json";
var changzhou = "../json/changzhou.json";
var zhenjiang = "../json/zhenjiang.json";echarts.extendsMap = function (id, opt) {// 实例var chart = this.init(document.getElementById(id));var curGeoJson = {};var cityMap = {宿迁市: suqian,扬州市: yangzhou,苏州市: suzhou,连云港市: lianyungang,南通市: nantong,盐城市: yancheng,泰州市: taizhou,南京市: nanjing,徐州市: xuzhou,无锡市: wuxi,淮安市: huaian,常州市: changzhou,镇江市: zhenjiang,};var geoCoordMap = {宿迁市: [118.55, 33.78],扬州市: [119.46, 32.82],苏州市: [120.65, 31.4],连云港市: [119.12, 34.55],南通市: [121.1, 32.16],盐城市: [120.22, 33.56],泰州市: [120.06, 32.55],南京市: [118.81, 31.92],徐州市: [117.52, 34.33],无锡市: [120.3442, 31.5527],淮安市: [118.92, 33.4],常州市: [119.4543, 31.5582],镇江市: [119.4763, 31.9702],};var levelColorMap = {"1": "rgba(241, 109, 115, .8)","2": "rgba(255, 235, 59, .7)","3": "rgba(147, 235, 248, 1)",};var defaultOpt = {mapName: "china", // 地图展示goDown: false, // 是否下钻bgColor: "#404a59", // 画布背景色activeArea: [], // 区域高亮,同echarts配置项data: [],// 下钻回调(点击的地图名、实例对象option、实例对象)callback: function (name, option, instance) {},};if (opt) opt = this.util.extend(defaultOpt, opt);// 层级索引var name = [opt.mapName];var idx = 0;var pos = {leftPlus: 115,leftCur: 150,left: 198,top: 50,};var line = [[0, 0],[8, 11],[0, 22],];// stylevar style = {font: '18px "Microsoft YaHei", sans-serif',textColor: "#eee",lineColor: "rgba(147, 235, 248, .8)",};var handleEvents = {/*** i 实例对象* o option* n 地图名**/resetOption: function (i, o, n) {var breadcrumb = this.createBreadcrumb(n);var j = name.indexOf(n);var l = o.graphic.length;if (j < 0) {o.graphic.push(breadcrumb);o.graphic[0].children[0].shape.x2 = 145;o.graphic[0].children[1].shape.x2 = 145;if (o.graphic.length > 2) {for (var x = 0; x < opt.data.length; x++) {if (n === opt.data[x].name + "市") {o.series[0].data = handleEvents.initSeriesData([opt.data[x]]);break;} else o.series[0].data = [];}}name.push(n);idx++;} else {o.graphic.splice(j + 2, l);if (o.graphic.length <= 2) {o.graphic[0].children[0].shape.x2 = 60;o.graphic[0].children[1].shape.x2 = 60;o.series[0].data = handleEvents.initSeriesData(opt.data);}name.splice(j + 1, l);idx = j;pos.leftCur -= pos.leftPlus * (l - j - 1);}o.geo.map = n;o.geo.zoom = 0.4;i.clear();i.setOption(o);this.zoomAnimation();opt.callback(n, o, i);},/*** name 地图名**/createBreadcrumb: function (name) {var cityToPinyin = {宿迁市: "suqian",扬州市: "yangzhou",苏州市: "suzhou",连云港市: "lianyungang",南通市: "nantong",盐城市: "yancheng",泰州市: "taizhou",南京市: "nanjing",徐州市: "xuzhou",无锡市: "wuxi",淮安市: "huaian",常州市: "changzhou",镇江市: "zhenjiang",};var breadcrumb = {type: "group",id: name,left: pos.leftCur + pos.leftPlus,top: pos.top + 3,children: [{type: "polyline",left: -90,top: -5,shape: {points: line,},style: {stroke: "#fff",key: name,// lineWidth: 2,},onclick: function () {var name = this.style.key;handleEvents.resetOption(chart, option, name);},},{type: "text",left: -68,top: "middle",style: {text: name,textAlign: "center",fill: style.textColor,font: style.font,},onclick: function () {var name = this.style.text;handleEvents.resetOption(chart, option, name);},},{type: "text",left: -68,top: 10,style: {name: name,text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : "",textAlign: "center",fill: style.textColor,font: '12px "Microsoft YaHei", sans-serif',},onclick: function () {// console.log(this.style);var name = this.style.name;handleEvents.resetOption(chart, option, name);},},],};pos.leftCur += pos.leftPlus;return breadcrumb;},// 设置effectscatterinitSeriesData: function (data) {var temp = [];for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name];if (geoCoord) {temp.push({name: data[i].name,value: geoCoord.concat(data[i].value, data[i].level),});}}return temp;},zoomAnimation: function () {var count = null;var zoom = function (per) {if (!count) count = per;count = count + per;// console.log(per,count);chart.setOption({geo: {zoom: count,},});if (count < 1)window.requestAnimationFrame(function () {zoom(0.2);});};window.requestAnimationFrame(function () {zoom(0.2);});},};var option = {tooltip: {},backgroundColor: opt.bgColor,graphic: [{type: "group",left: pos.left,top: pos.top - 4,children: [{type: "line",left: 0,top: -20,shape: {x1: 0,y1: 0,x2: 60,y2: 0,},style: {stroke: style.lineColor,},},{type: "line",left: 0,top: 20,shape: {x1: 0,y1: 0,x2: 60,y2: 0,},style: {stroke: style.lineColor,},},],},{id: name[idx],type: "group",left: pos.left + 2,top: pos.top,children: [{type: "polyline",left: 90,top: -12,shape: {points: line,},style: {stroke: "transparent",key: name[0],},onclick: function () {var name = this.style.key;handleEvents.resetOption(chart, option, name);},},{type: "text",left: 0,top: "middle",style: {text: name[0] === "江苏" ? "江苏省" : name[0],textAlign: "center",fill: style.textColor,font: style.font,},onclick: function () {handleEvents.resetOption(chart, option, "江苏");},},{type: "text",left: 0,top: 10,style: {text: "jiangsu",textAlign: "center",fill: style.textColor,font: '12px "Microsoft YaHei", sans-serif',},onclick: function () {handleEvents.resetOption(chart, option, "江苏");},},],},],geo: {map: opt.mapName,// roam: true,zoom: 1,label: {normal: {show: true,textStyle: {color: "#4AC0FF",},},emphasis: {textStyle: {color: "#fff",},},},itemStyle: {normal: {borderColor: "#fff",borderWidth: 1,areaColor: "transparent",},emphasis: {// 高亮状态下的样式areaColor: "rgba(41,171,226,0.3)",borderColor: "#00FFFF",},},regions: opt.activeArea.map(function (item) {if (typeof item !== "string") {return {name: item.name,itemStyle: {normal: {areaColor: item.areaColor || "#389BB7",},},label: {normal: {show: item.showLabel,textStyle: {color: "#fff",},},},};} else {return {name: item,itemStyle: {normal: {borderColor: "#91e6ff",areaColor: "#389BB7",},},};}}),},series: [{type: "effectScatter",map: opt.mapName,tooltip: {show: true,formatter: "{b}",},coordinateSystem: "map",// symbol: "diamond",showEffectOn: "render",rippleEffect: {period: 15,scale: 6,brushType: "fill",},hoverAnimation: true,data: handleEvents.initSeriesData(opt.data),zoom: 1,label: {normal: {show: true,textStyle: {color: "#4AC0FF",},},emphasis: {textStyle: {color: "#fff",},},},itemStyle: {normal: {borderColor: "#fff",borderWidth: 1,areaColor: "transparent",},emphasis: {// 高亮状态下的样式areaColor: "rgba(41,171,226,0.3)",borderColor: "#00FFFF",},},regions: opt.activeArea.map(function (item) {if (typeof item !== "string") {return {name: item.name,itemStyle: {normal: {areaColor: item.areaColor || "#389BB7",},},label: {normal: {show: item.showLabel,textStyle: {color: "#fff",},},},};} else {return {name: item,itemStyle: {normal: {borderColor: "#91e6ff",areaColor: "#389BB7",},},};}}),},],};chart.setOption(option);// 添加事件chart.on("click", function (params) {console.log(params);var _self = this;if (opt.goDown && params.name !== name[idx]) {if (cityMap[params.name]) {var url = cityMap[params.name];$.get(url, function (response) {// console.log(response);curGeoJson = response;echarts.registerMap(params.name, response);handleEvents.resetOption(_self, option, params.name);});}}});chart.setMap = function (mapName) {var _self = this;if (mapName.indexOf("市") < 0) mapName = mapName + "市";var citySource = cityMap[mapName];if (citySource) {var url = "./map/" + citySource + ".json";$.get(url, function (response) {// console.log(response);curGeoJson = response;echarts.registerMap(mapName, response);handleEvents.resetOption(_self, option, mapName);});}// handleEvents.resetOption(this, option, mapName);};return chart;
};
var mapChart;$.getJSON(jiangsu, function (geoJson) {console.log(geoJson);echarts.registerMap("江苏", geoJson);mapChart = echarts.extendsMap("provincesmap", {bgColor: "", // 画布背景色mapName: "江苏", // 地图名goDown: true, // 是否下钻// 下钻回调callback: function (name, option, instance) {console.log(name, option, instance);},// 数据展示});
});

本文标签： 江苏省省市地图下钻