以下用到的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);},// 數據展示}); });

總結

以上是生活随笔為你收集整理的江苏省省市地图下钻的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。