Echarts渲染行政区划，实现聚焦高亮交互
首先需要准备行政区划的JSON数据，可以在DataV获取省市区的JSON数据。
最终效果图
渲染地图
建立一个地图容器，注意要给宽高
<!-- 地图容器 -->
<div id="map"></div>
请求JSON数据，渲染地图
$(function() {var mapChart = null// 请求地图JSONfunction getGeo(level, adcode) {const url = `../map/${level}/${adcode}.json`;$.get(url, function (geoJson) {var seriesData = geoJson.features.map(function (item) {return {name: item.properties.name,value: item.properties.adcode,level: item.properties.level,childrenNum: item.properties?.childrenNum,parentCode: item.properties.parent.adcode,};});renderMap(seriesData, geoJson);});}getGeo("city", "52");// 渲染地图function renderMap(seriesData, geoJson) {echarts.registerMap("geo", { geoJSON: geoJson });mapChart = echarts.init(document.getElementById('map'))mapChart.setOption({// 阴影层，让地图有点立体效果geo: [{map: "geo",aspectScale: 0.75,zoom: 1.12,silent: true,itemStyle: {areaColor: '#072329',shadowColor: '#062025',shadowBlur: 0,shadowOffsetX: 2,shadowOffsetY: 6,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},},],series: [{type: "map",map: "geo",selectedMode: false,itemStyle: {borderWidth: 1,borderColor: "#417079",areaColor: {type: "linear",x: 0,y: 800,x2: 200,y2: 0,colorStops: [{offset: 0.5,color: "#37616b",},{offset: 1,color: "#0c2a31",},],global: true,},},zoom: 1.1,label: {show: false,color: "#fff",},emphasis: {focus: true,label: {show: false,},itemStyle: {areaColor: "#4b8491",},},data: seriesData,}]});}
})
绘制标注信息
标注信息是通过Echarts的散点绘制的，通过自定义图片实现
// 在请求JSON函数中，处理散点数据
function getGeo(level, adcode) {const url = `../map/${level}/${adcode}.json`;$.get(url, function (geoJson) {// 散点数据const coverData = geoJson.features.map((item) => {const { properties } = item;return {name: properties.name,value: properties.centroid,peopleNum: 10000,income: 50000};});var seriesData = geoJson.features.map(function (item) {return {name: item.properties.name,value: item.properties.adcode,level: item.properties.level,childrenNum: item.properties?.childrenNum,parentCode: item.properties.parent.adcode,};});renderMap(seriesData, geoJson, coverData);});
}// 渲染地图中加入散点数据
function renderMap(seriesData, geoJson, coverData) {echarts.registerMap("geo", { geoJSON: geoJson });mapChart = echarts.init(document.getElementById('map'))mapChart.setOption({// 阴影层geo: [{map: "geo",aspectScale: 0.75,zoom: 1.12,silent: true,itemStyle: {areaColor: '#072329',shadowColor: '#062025',shadowBlur: 0,shadowOffsetX: 2,shadowOffsetY: 6,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},},],series: [{type: "map",map: "geo",selectedMode: false,itemStyle: {borderWidth: 1,borderColor: "#417079",areaColor: {type: "linear",x: 0,y: 800,x2: 200,y2: 0,colorStops: [{offset: 0.5,color: "#37616b",},{offset: 1,color: "#0c2a31",},],global: true,},},zoom: 1.1,label: {show: false,color: "#fff",},emphasis: {focus: true,label: {show: false,},itemStyle: {areaColor: "#4b8491",},},data: seriesData,},{type: "scatter",coordinateSystem: "geo",symbol: function (value, params) {return "image://imgs/mark-line.png"; // 自定义图片},symbolSize: [38, 56],symbolRotate: -4,label: {show: true,offset: [-2, 0],position: "top",backgroundColor: "#204047",padding: [4, 8],borderRadius: 4,formatter: (param) => {return ["{name|" + param.name + "}","{line|}","{text|村民人数："+ param.data.peopleNum +"人}","{text|年均收入："+ param.data.income +"元}",].join("\\n");},// 富文本给label添加样式rich: {name: {color: "#18f6df",padding: [0, 0, 4, 0],},line: {width: "100%",height: 0,borderWidth: 1,borderColor: "#18f6df",},text: {color: "#fff",padding: [6, 0, 0, 0],},},},emphasis: {focus: true,blurScope: "global",},z: 3,data: coverData,},],});
地图块和标注高亮
只设置focus时发现，只有地图块会有聚焦效果，这里需要通过echarts的dispatchAction方法来实现
mapChart.on("mouseover", function (param) {mapChart.dispatchAction({type: "highlight",name: param.name,});
});
mapChart.on("mouseout", function (param) {mapChart.dispatchAction({type: "downplay",});
});
这里感觉立体效果还是差点意思，我给地图设置了一点旋转
#map {transform: rotateX(32deg) rotateY(-6deg) scale(1.125);
}
完整示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>map</title><style>* {margin: 0;padding: 0;}body {background-color: #000;overflow: hidden;}html, body, #map {width: 100%;height: 100%;}#map {transform: rotateX(32deg) rotateY(-6deg) scale(1.125);}</style>
</head>
<body><div id="map"></div><script src="./js/jqueyr.min.js"></script><script src="./js/echarts.min.js"></script><script>$(function() {var mapChart = nullfunction getGeo(level, adcode) {const url = `../map/${level}/${adcode}.json`;$.get(url, function (geoJson) {// 散点数据const coverData = geoJson.features.map((item) => {const { properties } = item;return {name: properties.name,value: properties.centroid,// 显示数据peopleNum: 10000,income: 50000};});var seriesData = geoJson.features.map(function (item) {return {name: item.properties.name,value: item.properties.adcode,level: item.properties.level,childrenNum: item.properties?.childrenNum,parentCode: item.properties.parent.adcode,};});renderMap(seriesData, geoJson, coverData);});}getGeo("city", "52");// 渲染地图function renderMap(seriesData, geoJson, coverData) {echarts.registerMap("geo", { geoJSON: geoJson });mapChart = echarts.init(document.getElementById('map'))mapChart.setOption({// 阴影层geo: [{map: "geo",aspectScale: 0.75,zoom: 1.12,silent: true,itemStyle: {areaColor: '#072329',shadowColor: '#062025',shadowBlur: 0,shadowOffsetX: 2,shadowOffsetY: 6,borderColor: 'rgba(0, 0, 0, 0.7)',borderWidth: 0.5,},},],series: [{type: "map",map: "geo",selectedMode: false,itemStyle: {borderWidth: 1,borderColor: "#417079",areaColor: {type: "linear",x: 0,y: 800,x2: 200,y2: 0,colorStops: [{offset: 0.5,color: "#37616b",},{offset: 1,color: "#0c2a31",},],global: true,},},zoom: 1.1,label: {show: false,color: "#fff",},emphasis: {focus: true,label: {show: false,},itemStyle: {areaColor: "#4b8491",},},data: seriesData,},{type: "scatter",coordinateSystem: "geo",symbol: function (value, params) {return "image://imgs/mark-line.png";},symbolSize: [38, 56],symbolRotate: -4,label: {show: true,offset: [-2, 0],position: "top",backgroundColor: "#204047",padding: [4, 8],borderRadius: 4,formatter: (param) => {console.log('param: ', param);return ["{name|" + param.name + "}","{line|}","{text|村民人数："+ param.data.peopleNum +"人}","{text|年均收入："+ param.data.income +"元}",].join("\\n");},rich: {name: {color: "#18f6df",padding: [0, 0, 4, 0],},line: {width: "100%",height: 0,borderWidth: 1,borderColor: "#18f6df",},text: {color: "#fff",padding: [6, 0, 0, 0],},},},emphasis: {focus: true,blurScope: "global",},z: 3,data: coverData,},],});// 联动高亮mapChart.on("mouseover", function (param) {mapChart.dispatchAction({type: "highlight",name: param.name,});});mapChart.on("mouseout", function (param) {mapChart.dispatchAction({type: "downplay",});});}})</script>
</body>
</html>