首先需要准备行政区划的JSON数据，可以在DataV获取省市区的JSON数据。
最终效果图
渲染地图
建立一个地图容器，注意要给宽高
<!-- 地图容器 --> <div id="map"></div>
请求JSON数据，渲染地图
$(function() { var mapChart = null // 请求地图JSON function 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 = null 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); }); } 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>
