<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地圖下鑽</title> <style> body { margin: 0 auto; } #main { position: fixed; left: 0; right: 0; top: 0; bottom: 0; } </style> </head> <body> <div id="main"></div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script> <script> let publicUrl = 'https://geo.datav.aliyun.com/areas_v2/bound/'; async function initChart() { let chart = echarts.init(document.getElementById('main')); let alladcode = await getGeoJson('all.json') let chinaGeoJson = await getGeoJson('100000_full.json') initEcharts(chinaGeoJson, '中國', chart, alladcode) } initChart(); // 每個地區的數據 let mapData = [{ name: "河南省", value: 1000 }, { name: "山東省", value: 500 }, { name: "安徽省", value: 700 }, { name: "山西省", value: 200 }, { name: "湖南省", value: 600 }, { name: "四川省", value: 1600 } ] //echarts繪圖 function initEcharts(geoJson, name, chart, alladcode) { //獲取當前顯示地圖下方地市的坐標點數據； 用於氣泡顯示 let geoCoordMap = {}; // 獲取地區詳細信息 let mapFeatures = geoJson.features; // 遍歷獲取每個地區的經緯度 mapFeatures.forEach(function (v, i) { // 獲取當前地區名 let name = v.properties.name; if (name) { // 獲取當前地區的經緯度 geoCoordMap[name] = v.properties.center; } }); //將data數據進入方法，取需要的參數； 用於氣泡顯示 let convertData = function (data) { var res = []; data.forEach(item => { // 獲取當前省份的經緯度坐標 let geoCoord = geoCoordMap[item.name]; if (geoCoord) { res.push({ // name 表示地區名稱 name: item.name, // value數據格式為：[113.665412, 34.757975, '200'] value: geoCoord.concat(item.value) }); } }) return res; }; echarts.registerMap(name, geoJson); var option = { title: { text: name, left: 'center', }, //鼠標經過展示數據方法 tooltip: { triggerOn: "mousemove", formatter: function (params) { if (isNaN(params.value)) { params.value = 0 } if (params.seriesName === '散點') { params.value = params.data.value[2] } var html = '<span>' + params.name + '：</span><br/>' html += '<span>值：' + params.value + '</span><br/>' return html }, backgroundColor: 'rgba(29, 38, 71)', // 額外附加的陰影 extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)', }, geo: { show: true, top: '15%', map: name, label: { normal: { show: false }, emphasis: { show: false, color: "#fff", } }, roam: true, itemStyle: { normal: { areaColor: '#116bda', borderColor: '#fff', }, emphasis: { areaColor: '#113cda', } } }, //進行氣泡標點 series: [{ type: 'map', map: mapData, geoIndex: 0, aspectScale: 0.75, //長寬比 showLegendSymbol: false, // 存在legend時顯示 label: { normal: { show: true }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#3B5077', }, emphasis: { areaColor: '#2B91B7' } }, animation: true, data: mapData }, { name: '散點', // 自定義名稱 type: 'effectScatter', // scatter effectScatter coordinateSystem: 'geo', // 設置坐標系類型 data: convertData(mapData), // 設置散點位置和數據 symbolSize: function (val) { // 設置散點大小 return 15 }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, // 是否顯示鼠標懸浮動畫 label: { // 靜態顯示時的樣式 normal: { show: true, // 顯示地區名稱 formatter: function (data) { // 顯示模板 return data.value[2] }, position: 'bottom', // 顯示位置 }, // 鼠標懸浮上去的樣式 emphasis: { show: true, // 顯示地區名稱 color: "red", }, }, itemStyle: { normal: { color: function (res) { let value = res.value[2] //根據value值對標點進行不同顏色顯示 if (value < 500) { return '#ff3859' } else if (value < 1000) { return '#4ed7fa' } else if (value < 1500) { return '#fac531' } else { return '#01ff5b' } }, shadowBlur: 10, }, // 鼠標懸浮上去的樣式 emphasis: { color: "red", }, }, zlevel: 3 } ] }; chart.setOption(option); // 解綁click事件 chart.off("click"); //給地圖添加監聽事件 chart.on('click', async params => { // 獲取當前點擊的地圖code let clickRegion = alladcode.find(areaJson => areaJson.name === params.name); // 獲取要獲取地圖的json名稱 let regionJsonName = clickRegion.adcode + '_full.json' // 獲取點擊的區域名稱 let cityName = params.name // 判斷當前點擊的地圖等級,如果是區級，則再次點擊時重新回到全國的數據 if (clickRegion.level === 'district') { regionJsonName = '100000_full.json' cityName = '山東省' } // 根據地圖code獲取 getGeoJson(regionJsonName).then((result) => { initEcharts(result, cityName, chart, alladcode) }) }) } //獲取地圖json數據 async function getGeoJson(jsonName) { return await $.get(publicUrl + jsonName) } </script> </body> </html>
效果
