简介一份海南省ECharts地图可视化配套数据包面向需要在前端页面中绘制海南省各市县地图的前端开发者和数据分析人员。压缩包共21个文件含20个GeoJSON文件和1个HTML示例覆盖海南省及海口、三亚、儋州等主要市县地理边界HTML示例演示了陵水黎族自治县乡镇区域的ECharts地图绘制方法。GeoJSON结构遵循开放地理数据规范可结合ECharts的map系列自由加载支持缩放、拖拽、区域高亮、数据标注等交互配置包体仅1.08MB适合政务展示、旅游导航、区位分析等可视化场景。已有1610人学习下载资源内各县级文件与省级总图配合良好命名简洁便于替换数据尤其适合需要快速获得海南省县级行政区划边界、减少地理数据处理工作量的开发者是一份省时省力的实用素材。 干了几年前端可视化地图这块儿基本绕不开一个东西——GeoJSON。不管你是做大屏指挥中心、政务数据平台还是电商区域销售分析只要地图落在浏览器里多半都要跟它打交道。最近正好在做海南全省的数据大屏需要把19个市县全部渲染到ECharts地图上顺手整理了一份海南省各市县的GeoJSON数据文件。这篇文章就把从数据获取、格式解析到ECharts实际加载的完整过程拆开讲一遍顺便把我在这个过程中踩过的坑、排查过的诡异问题一并写出来。先说结论这份海南省echart地图各市县geojson.zip里包含的是海南全省以及下面19个市县海口、三亚、儋州、琼海、文昌、万宁、五指山、东方、定安、屯昌、澄迈、临高、白沙、昌江、乐东、陵水、保亭、琼中、三沙的边界坐标数据文件格式是标准的GeoJSON可以直接配合ECharts的registerMap方法使用。如果你正卡在地图数据找不到、格式对不上、下钻做不出来这些问题上这篇应该能帮你省不少时间。1. 为什么海南省市县级地图可视化必须用GeoJSON1.1 ECharts地图的核心运行机制ECharts本身并不内置任何中国地图或省市地图的边界数据它只负责“画”。你要告诉它画什么它才有东西可画。那拿什么告诉它就是GeoJSON。大约在ECharts 4.x之后官方把地图数据彻底从主包里剥离了所有地图都是通过echarts.registerMap(地图名, geoJson)动态注册进去的。你注册的是海南全省它就能画海南你注册的是海口它就只能画海口。这种做法好处很明显——包体积小了按需加载但副作用也很直接第一次用的人基本都懵了官网示例里明明能显示中国地图怎么我复制过来就白屏原因就是你没有注册底图数据。1.2 GeoJSON到底是什么物事GeoJSON是一种基于JSON的开放地理信息编码格式专门用来描述点、线、面这些地理要素。它不属于任何一家公司也不是百度和高德的私有协议而是一个行业开放标准RFC 7946。对于ECharts地图来说我们最关心的是其中FeatureCollection类型的数据。一个完整的海南省市县级GeoJSON文件打开之后大体长这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: 海口市, adcode: 460100, center: [110.2, 20.05] }, geometry: { type: MultiPolygon, coordinates: [ [[[110.1, 20.1], [110.3, 20.15], [110.4, 20.05]]] ] } } ] }每个feature对应一个市县properties里存的是这个地方的属性信息名称、行政编码、中心点geometry里存的是它的轮廓坐标。坐标是经纬度对ECharts拿到这串坐标之后会通过墨卡托投影把它转换到屏幕上的平面坐标然后绘制成你看到的那个地图区域。这个浏览器里的地图其实就是一个大号的SVG或Canvas边界线本质上是一条一条闭合路径和你在PS里用钢笔工具画一个形状没什么区别。明白了这一点后面排查问题就会顺畅很多。1.3 海南地图数据的特殊性海南和其它省份最大的不同在于它是一个海岛省份还是一个多岛屿的省份。除了海南本岛还要处理周边的小岛、南海诸岛等区域。这就让数据文件在坐标处理上多了一些讲究。另外海南实行的是省直管县体制18个市县加三沙一共19个地级行政区域下面还挂着若干个区。如果你做大屏只需要展示到市县一级那份各市县.geojson就刚刚好——既比全省单独一个大Polygon精细得多又不需要再往乡镇派出所一级去拿数据。层级选对了能省掉很多不必要的麻烦。2. 海南省各市县GeoJSON数据的获取与处理2.1 如何判断拿到的数据文件是否靠谱网上搜海南省geojson能搜出不少资源但质量参差不齐。有的下载下来打开就是个空文件有的坐标精度极低放到地图上形状就跟狗啃过似的。我判断一份GeoJSON能不能用一般看三个地方第一看坐标系。正规的国标数据用的都是GCJ-02或WGS-84坐标系。如果文件里坐标长这样[110.199890, 20.044001]基本就是经纬度数据如果坐标是[12345678, 4567890]这种八位大数说明是投影坐标ECharts不认需要先转换。第二看properties字段里有没有name和adcode。name直接决定地图图例上显示什么名字adcode在联动后端数据的时候会非常有用。如果这两个字段缺失拿到代码里你还得手动去补很麻烦。第三看要素数量。海南全省加市县features数组的长度应该在20左右1个省级19个市县。如果文件里只有一个大feature那只能画全省轮廓画不了下钻。我当时整理的数据结构上就是标准的三层FeatureCollection-Feature-geometry每个市县在properties里都带上了adcode和中心点坐标方便做tooltip和散点图叠加。2.2 文件体积与坐标精度之间的取舍一份未经处理的海南省各市县GeoJSON原始大小可能有好几MB。这个体积放在内网项目里不在乎但如果是发布到公网上的网页加载3MB的JSON真的很痛苦尤其在移动端。坐标精度是影响体积的最大因素。经纬度小数点后面保留6位精度可以达到0.1米级别远超展示需求。但很多原始数据是从高精度测绘数据导出的一份海口市的边界文件就可能塞了上万个坐标点而这上万个点里绝大部分肉眼是分辨不出来的。我的处理办法是在保证边界形状肉眼无明显变化的前提下用简化算法把坐标点抽稀。推荐用turf.js的simplify方法或者直接使用在线工具MapShaper把文件拖进去拖动简化滑块看右边地图形状变化的临界点找到一个形变尚可接受但体积小一个量级的档位。海南全省加19个市县的数据经过处理后我压到了800KB以内再配合Gzip压缩实际网络传输量能到200KB左右完全够用。2.3 接口返回范围太大时的切割思路还有一种常见情况你从某个开放API拿到的是中国全境或全国所有市县的GeoJSON体积巨大而你只需要海南。这时候不要直接在ECharts里注册全量数据浪费性能。正确做法是在数据层就做裁剪。用turf.bbox算出目标区域的经纬度范围然后用turf.bboxClip把大文件裁剪出海南省周边一小块再过滤掉不在海南范围内的feature。这样后续无论是加载速度还是渲染性能都会好看得多。顺便提一句如果你只是要海南省这一个整体轮廓不细分市县可以用turf.merge把19个市县的polygon合并成一个大的MultiPolygon。做全省概览图的时候这个操作特别实用。3. ECharts加载海南省市县GeoJSON的完整实战3.1 基础配置从注册地图到渲染出图拿到geojson文件之后第一步是在ECharts里注册它。以Vue2项目为例我这里用的是limeui的echart封装但核心逻辑都一样import * as echarts from echarts; import hainanGeoJson from /assets/map/hainan.js; // 这份文件就是zip里解出来的 echarts.registerMap(hainan, hainanGeoJson); // 然后初始化图表 const chart echarts.init(document.getElementById(mapContainer)); chart.setOption({ tooltip: { trigger: item, formatter: function(params) { return params.name br/ (params.value ?? 暂无数据); } }, series: [{ type: map, map: hainan, roam: true, label: { show: true, fontSize: 10 }, itemStyle: { areaColor: #e0f2fe, borderColor: #0369a1 }, emphasis: { label: { color: #fff }, itemStyle: { areaColor: #0ea5e9 } }, data: [] }] });这段代码跑通之后页面上应该能看到海南省的完整轮廓并且鼠标移上去各市县会高亮。注意map: hainan这个名字必须和registerMap时传入的第一个参数保持一致一旦对不上ECharts不会报错只会默默画一个空白区域出来这是新手最容易遇到的情况。3.2 点击下钻从全省到市县热词里提到了echart结合高德地图绘制多条路线轨迹那是一个更复杂的场景后面我会专门讲。先说说地图下钻——这是地图可视化里最常用也最能出效果的功能。所谓下钻就是点击海南省地图上的海口市页面切换成海口市的详细地图展示该市内部的区级数据。实现原理很简单换一份GeoJSON重新注册然后再次调用setOption。在海南这个大屏项目里我的做法是双击进入下钻单击退回到上一级。具体这样处理chart.on(dblclick, function(params) { const name params.name; const targetGeoJson mapDataMap[name]; // 提前按市县名存好各自的geojson if (targetGeoJson) { echarts.registerMap(name, targetGeoJson); chart.setOption({ series: [{ map: name, data: currentData[name] }] }); } });这里有个细节进入下钻之后map属性已经变成了海口市如果你还想再往下一级钻就需要先判断当前处于哪个层级再决定加载哪份数据。我一般会在组件里维护一个mapStack数组记录当前的地图栈层级退回到上一级时pop出来重新注册就行。还有一个值得注意的坑注册地图时如果注册名和原来的冲突会覆盖掉旧地图。如果你用hainan这个名字注册了全省又用一个城市的GeoJSON去registerMap(hainan, cityJson)回过头再想显示全省必须重新注册一次全省的GeoJSON。不要偷懒省略这一步很多地图莫名消失了的问题就是这么来的。3.3 叠加散点与路线轨迹的进阶玩法结合热词里地图echart结合高德地图绘制多条路线轨迹的需求我直接把这个场景的配置也讲一下。ECharts地图本质上是一个坐标系它支持散点图、线图、飞线图等多种series在同一张地图上叠加。原理是geo坐标系或map系列在坐标转换上是一致的它们都基于同一个GeoJSON来做经纬度到屏幕像素的映射。所以当你需要在海南地图上画一条从海口到三亚的运输路线用series数组加一个lines类型即可{ series: [ { type: map, map: hainan, // ...基础样式 }, { type: lines, coordinateSystem: geo, data: [ { coords: [[110.2, 20.05], [109.5, 18.25]] } ], lineStyle: { color: #f59e0b, width: 3 }, effect: { show: true, period: 4, trailLength: 0.4, symbol: arrow } } ] }如果要画多条路线就在data数组里加多个对象。起点终点坐标需要是经纬度可以从高德API里通过AMap.Geocoder插件把具体地址转成经纬度也可以手动维护一份关键地点的坐标常量表。路线轨迹通常配合动画效果用effect配置即可不用额外引入其它库。这个场景适合做物流线路展示、客流路径分析、航线图等。唯一要注意的是map系列的地图在设置roam: false时lines系列的coordinateSystem要配成geo而不是map否则会有定位偏差。3.4 坐标轴缩放与放大的交互细节热词里还提到了echart坐标轴放大缩小滑动地图系列的缩放操作主要是通过roam属性和dataZoom组件实现的。series: [{ type: map, map: hainan, roam: true, // 开启鼠标滚轮缩放和平移 scaleLimit: { min: 1, max: 8 } }]roam设为true后用户可以通过鼠标滚轮缩放按住左键拖拽平移。如果想限制缩放范围用scaleLimit控制。但如果你用的是中国-省-市这种多级下钻方案每一级都套一个map系列缩放层级分别计算会比较繁琐。我个人的建议是顶级概览图用roam: false固定住做点击下钻/点击返回当进入某个市县之后再开启roam: true让用户自由缩放查看细节。这样既避免一开始就把地图拖得乱七八糟又保留了下钻后的交互自由度。如果你在图表的x轴或y轴上需要做放大缩小滑动比如散点图、柱状图那就要用到dataZoom组件dataZoom: [{ type: slider, xAxisIndex: 0, start: 0, show: true }]把xAxisIndex改成对应的轴索引再联动yAxisIndex就能实现框选一段数据放大查看的效果。4. 常见问题与排查技巧实录4.1 地图渲染不出来一片空白遇到这个问题的概率非常高十个用ECharts地图的人里至少有六个栽到这里。按我排错的经验优先级从高到低是第一确认registerMap是否在setOption之前执行并且注册的名字完全一致包括大小写。第二确认GeoJSON数据是否真的被正确import进来了Console里打印一下看看features数组是否为空。第三确认容器的宽高是否设置ECharts地图和图表一样容器没有高度直接什么都不显示。还有一个偏门的情况如果把GeoJSON文件直接改成.js后缀并导出module.exports {...}在Webpack里可能会因为Babel解析而报错。这种场景我建议改成export default {...}或者在vue.config.js里对.js文件加一条transpileDependencies规则。4.2 市县边界和实际地图对不上出现这种问题的原因九成在坐标系。如果拿到的GeoJSON是WGS-84坐标系GPS原始坐标而你的底图或者参考底图是GCJ-02高德、腾讯用的加密坐标系那地图边界整体会偏移几百米放大到高缩放级别时特别明显。解决方案有两种一是把GeoJSON坐标转换成GCJ-02网上有成熟的坐标偏移算法一个小函数就能搞定二是如果你不需要和高德底图做叠加用ECharts自己的地图渲染就无所谓坐标系问题直接展示即可。我的建议是除非你必须把ECharts地图叠加到高德瓦片图层上否则尽量不折腾坐标转换。少一层转换就少一个出错点展示形似的数据地图WGS-84完全够用。4.3 数据映射不上tooltip显示不出值数据映射不上多半是data数组里的name和GeoJSON里properties.name对不上。比如你的后端返回的数据叫海南三亚市而GeoJSON里叫三亚市ECharts就无法识别对应区域会变成空白或没有高亮。解决方法是统一名称。我习惯在拿到后端数据后先做一次名称归一化const adcodeMap { 460100: 海口市, 460200: 三亚市, // ...其他市县 }; // 后端返回的code字段直接映射成GeoJSON里的name const formattedData rawData.map(item ({ name: adcodeMap[item.regionCode], value: item.salesAmount }));使用adcode行政区划编码来做关联比用中文字符串匹配可靠得多。只要GeoJSON的properties里带了adcode后端也返回adcode就绝对不会出现中文名对不上的情况。4.4 海南地图里三沙市的特殊处理做海南地图还有一个绕不开的特殊点三沙市。三沙的管辖范围几乎覆盖整个南海如果按照真实边界去绘制它的地图范围会非常大。在一张全省地图里三沙的框可能会把整个南海区域都框进去视觉效果非常夸张。我通常的解决办法是在全省概览图中把三沙市简化成一个小的示意点放在南海右下角的位置类似中国地图右下角那个南海诸岛的小方框。具体做法是单独构造一个小的GeoJSON feature只画一个小小的方形或圆形轮廓标注三沙市三个字。这样做虽然在严格GIS意义上不严谨但做数据大屏展示可读性远比测绘严谨性重要。平时大屏上不强调三沙的数据时也可以直接在data里放{ name: 三沙市, value: 0 }让它显示为空白状态即可。4.5 性能优化大文件加载卡顿一个页面同时渲染几十个市县的地图边界如果每个边界的点数不简化帧率会肉眼可见地往下掉。这里我给出几个实用建议# 1. 简化坐标点数使用MapShaper或turf.simplify # 2. 加载方式改为异步使用动态import const loadMap async () { const geoJson await import(/assets/map/hainan.js); echarts.registerMap(hainan, geoJson.default); }; # 3. 设置animation: false地图切换和缩放时减少动画帧还有一个经验之谈同一个GeoJSON文件如果只加载一次可以用模块级变量缓存避免每次进入页面都重新import。我在vuex或者一个单独的mapLoader.js模块里统一管理所有GeoJSON的注册状态一次注册全局复用省心不少。5. 一些压箱底的避坑建议关于geojson文件用什么软件打开这个疑问我再多说几句。日常调试时除了直接打开JSON文本之外我还常用两个工具geojson.io和QGIS。geojson.io是一个在线工具把GeoJSON文件拖进去立刻就能看到地图边界渲染出来的效果还能直接编辑坐标点、查看feature属性。我每次拿到一份新的GeoJSON第一件事就是扔到geojson.io上看一眼形状对不对然后再接入项目。这一步能帮你过滤掉80%的无效数据。QGIS则是更专业的桌面GIS工具适合做复杂的空间数据处理比如合并多边形、裁切、重投影。如果你只是做前端可视化其实不太需要用QGIS一个geojson.io再加一个MapShaper基本够用一辈子了。最后再分享一个实操中的小技巧。在ECharts地图里各市县的label默认会直接显示在区域中心。因为海南的市县面积都不大特别是琼中、保亭这种山区县名字和名称会互相挤压。我一般会在数据量大的时候用富文本配置把label.formatter改成label: { show: true, formatter: function(param) { return param.name.replace(市, ); // 只显示前两个字 } }这样在地图上就不会出现海口市三个大字把整个小县城的图形区域都撑满的尴尬。在一些汇报场景下我还试过用labelLayout: { hideOverlap: true }来自动隐藏重叠标签效果也不错。实际做出这份海南省echart地图各市县geojson.zip的过程前前后后也折腾了不短时间。数据整理、坐标格式校验、加载性能调优、下钻逻辑调整每一步都不难但每一步都藏着小坑。希望这篇文章能帮你把这些坑提前填平让你把精力花在真正的业务可视化上而不是跟数据文件和无尽的边距对齐死磕。本文还有配套的精品资源点击获取
海南省市县GeoJSON数据获取与ECharts地图可视化实战指南
简介一份海南省ECharts地图可视化配套数据包面向需要在前端页面中绘制海南省各市县地图的前端开发者和数据分析人员。压缩包共21个文件含20个GeoJSON文件和1个HTML示例覆盖海南省及海口、三亚、儋州等主要市县地理边界HTML示例演示了陵水黎族自治县乡镇区域的ECharts地图绘制方法。GeoJSON结构遵循开放地理数据规范可结合ECharts的map系列自由加载支持缩放、拖拽、区域高亮、数据标注等交互配置包体仅1.08MB适合政务展示、旅游导航、区位分析等可视化场景。已有1610人学习下载资源内各县级文件与省级总图配合良好命名简洁便于替换数据尤其适合需要快速获得海南省县级行政区划边界、减少地理数据处理工作量的开发者是一份省时省力的实用素材。 干了几年前端可视化地图这块儿基本绕不开一个东西——GeoJSON。不管你是做大屏指挥中心、政务数据平台还是电商区域销售分析只要地图落在浏览器里多半都要跟它打交道。最近正好在做海南全省的数据大屏需要把19个市县全部渲染到ECharts地图上顺手整理了一份海南省各市县的GeoJSON数据文件。这篇文章就把从数据获取、格式解析到ECharts实际加载的完整过程拆开讲一遍顺便把我在这个过程中踩过的坑、排查过的诡异问题一并写出来。先说结论这份海南省echart地图各市县geojson.zip里包含的是海南全省以及下面19个市县海口、三亚、儋州、琼海、文昌、万宁、五指山、东方、定安、屯昌、澄迈、临高、白沙、昌江、乐东、陵水、保亭、琼中、三沙的边界坐标数据文件格式是标准的GeoJSON可以直接配合ECharts的registerMap方法使用。如果你正卡在地图数据找不到、格式对不上、下钻做不出来这些问题上这篇应该能帮你省不少时间。1. 为什么海南省市县级地图可视化必须用GeoJSON1.1 ECharts地图的核心运行机制ECharts本身并不内置任何中国地图或省市地图的边界数据它只负责“画”。你要告诉它画什么它才有东西可画。那拿什么告诉它就是GeoJSON。大约在ECharts 4.x之后官方把地图数据彻底从主包里剥离了所有地图都是通过echarts.registerMap(地图名, geoJson)动态注册进去的。你注册的是海南全省它就能画海南你注册的是海口它就只能画海口。这种做法好处很明显——包体积小了按需加载但副作用也很直接第一次用的人基本都懵了官网示例里明明能显示中国地图怎么我复制过来就白屏原因就是你没有注册底图数据。1.2 GeoJSON到底是什么物事GeoJSON是一种基于JSON的开放地理信息编码格式专门用来描述点、线、面这些地理要素。它不属于任何一家公司也不是百度和高德的私有协议而是一个行业开放标准RFC 7946。对于ECharts地图来说我们最关心的是其中FeatureCollection类型的数据。一个完整的海南省市县级GeoJSON文件打开之后大体长这样{ type: FeatureCollection, features: [ { type: Feature, properties: { name: 海口市, adcode: 460100, center: [110.2, 20.05] }, geometry: { type: MultiPolygon, coordinates: [ [[[110.1, 20.1], [110.3, 20.15], [110.4, 20.05]]] ] } } ] }每个feature对应一个市县properties里存的是这个地方的属性信息名称、行政编码、中心点geometry里存的是它的轮廓坐标。坐标是经纬度对ECharts拿到这串坐标之后会通过墨卡托投影把它转换到屏幕上的平面坐标然后绘制成你看到的那个地图区域。这个浏览器里的地图其实就是一个大号的SVG或Canvas边界线本质上是一条一条闭合路径和你在PS里用钢笔工具画一个形状没什么区别。明白了这一点后面排查问题就会顺畅很多。1.3 海南地图数据的特殊性海南和其它省份最大的不同在于它是一个海岛省份还是一个多岛屿的省份。除了海南本岛还要处理周边的小岛、南海诸岛等区域。这就让数据文件在坐标处理上多了一些讲究。另外海南实行的是省直管县体制18个市县加三沙一共19个地级行政区域下面还挂着若干个区。如果你做大屏只需要展示到市县一级那份各市县.geojson就刚刚好——既比全省单独一个大Polygon精细得多又不需要再往乡镇派出所一级去拿数据。层级选对了能省掉很多不必要的麻烦。2. 海南省各市县GeoJSON数据的获取与处理2.1 如何判断拿到的数据文件是否靠谱网上搜海南省geojson能搜出不少资源但质量参差不齐。有的下载下来打开就是个空文件有的坐标精度极低放到地图上形状就跟狗啃过似的。我判断一份GeoJSON能不能用一般看三个地方第一看坐标系。正规的国标数据用的都是GCJ-02或WGS-84坐标系。如果文件里坐标长这样[110.199890, 20.044001]基本就是经纬度数据如果坐标是[12345678, 4567890]这种八位大数说明是投影坐标ECharts不认需要先转换。第二看properties字段里有没有name和adcode。name直接决定地图图例上显示什么名字adcode在联动后端数据的时候会非常有用。如果这两个字段缺失拿到代码里你还得手动去补很麻烦。第三看要素数量。海南全省加市县features数组的长度应该在20左右1个省级19个市县。如果文件里只有一个大feature那只能画全省轮廓画不了下钻。我当时整理的数据结构上就是标准的三层FeatureCollection-Feature-geometry每个市县在properties里都带上了adcode和中心点坐标方便做tooltip和散点图叠加。2.2 文件体积与坐标精度之间的取舍一份未经处理的海南省各市县GeoJSON原始大小可能有好几MB。这个体积放在内网项目里不在乎但如果是发布到公网上的网页加载3MB的JSON真的很痛苦尤其在移动端。坐标精度是影响体积的最大因素。经纬度小数点后面保留6位精度可以达到0.1米级别远超展示需求。但很多原始数据是从高精度测绘数据导出的一份海口市的边界文件就可能塞了上万个坐标点而这上万个点里绝大部分肉眼是分辨不出来的。我的处理办法是在保证边界形状肉眼无明显变化的前提下用简化算法把坐标点抽稀。推荐用turf.js的simplify方法或者直接使用在线工具MapShaper把文件拖进去拖动简化滑块看右边地图形状变化的临界点找到一个形变尚可接受但体积小一个量级的档位。海南全省加19个市县的数据经过处理后我压到了800KB以内再配合Gzip压缩实际网络传输量能到200KB左右完全够用。2.3 接口返回范围太大时的切割思路还有一种常见情况你从某个开放API拿到的是中国全境或全国所有市县的GeoJSON体积巨大而你只需要海南。这时候不要直接在ECharts里注册全量数据浪费性能。正确做法是在数据层就做裁剪。用turf.bbox算出目标区域的经纬度范围然后用turf.bboxClip把大文件裁剪出海南省周边一小块再过滤掉不在海南范围内的feature。这样后续无论是加载速度还是渲染性能都会好看得多。顺便提一句如果你只是要海南省这一个整体轮廓不细分市县可以用turf.merge把19个市县的polygon合并成一个大的MultiPolygon。做全省概览图的时候这个操作特别实用。3. ECharts加载海南省市县GeoJSON的完整实战3.1 基础配置从注册地图到渲染出图拿到geojson文件之后第一步是在ECharts里注册它。以Vue2项目为例我这里用的是limeui的echart封装但核心逻辑都一样import * as echarts from echarts; import hainanGeoJson from /assets/map/hainan.js; // 这份文件就是zip里解出来的 echarts.registerMap(hainan, hainanGeoJson); // 然后初始化图表 const chart echarts.init(document.getElementById(mapContainer)); chart.setOption({ tooltip: { trigger: item, formatter: function(params) { return params.name br/ (params.value ?? 暂无数据); } }, series: [{ type: map, map: hainan, roam: true, label: { show: true, fontSize: 10 }, itemStyle: { areaColor: #e0f2fe, borderColor: #0369a1 }, emphasis: { label: { color: #fff }, itemStyle: { areaColor: #0ea5e9 } }, data: [] }] });这段代码跑通之后页面上应该能看到海南省的完整轮廓并且鼠标移上去各市县会高亮。注意map: hainan这个名字必须和registerMap时传入的第一个参数保持一致一旦对不上ECharts不会报错只会默默画一个空白区域出来这是新手最容易遇到的情况。3.2 点击下钻从全省到市县热词里提到了echart结合高德地图绘制多条路线轨迹那是一个更复杂的场景后面我会专门讲。先说说地图下钻——这是地图可视化里最常用也最能出效果的功能。所谓下钻就是点击海南省地图上的海口市页面切换成海口市的详细地图展示该市内部的区级数据。实现原理很简单换一份GeoJSON重新注册然后再次调用setOption。在海南这个大屏项目里我的做法是双击进入下钻单击退回到上一级。具体这样处理chart.on(dblclick, function(params) { const name params.name; const targetGeoJson mapDataMap[name]; // 提前按市县名存好各自的geojson if (targetGeoJson) { echarts.registerMap(name, targetGeoJson); chart.setOption({ series: [{ map: name, data: currentData[name] }] }); } });这里有个细节进入下钻之后map属性已经变成了海口市如果你还想再往下一级钻就需要先判断当前处于哪个层级再决定加载哪份数据。我一般会在组件里维护一个mapStack数组记录当前的地图栈层级退回到上一级时pop出来重新注册就行。还有一个值得注意的坑注册地图时如果注册名和原来的冲突会覆盖掉旧地图。如果你用hainan这个名字注册了全省又用一个城市的GeoJSON去registerMap(hainan, cityJson)回过头再想显示全省必须重新注册一次全省的GeoJSON。不要偷懒省略这一步很多地图莫名消失了的问题就是这么来的。3.3 叠加散点与路线轨迹的进阶玩法结合热词里地图echart结合高德地图绘制多条路线轨迹的需求我直接把这个场景的配置也讲一下。ECharts地图本质上是一个坐标系它支持散点图、线图、飞线图等多种series在同一张地图上叠加。原理是geo坐标系或map系列在坐标转换上是一致的它们都基于同一个GeoJSON来做经纬度到屏幕像素的映射。所以当你需要在海南地图上画一条从海口到三亚的运输路线用series数组加一个lines类型即可{ series: [ { type: map, map: hainan, // ...基础样式 }, { type: lines, coordinateSystem: geo, data: [ { coords: [[110.2, 20.05], [109.5, 18.25]] } ], lineStyle: { color: #f59e0b, width: 3 }, effect: { show: true, period: 4, trailLength: 0.4, symbol: arrow } } ] }如果要画多条路线就在data数组里加多个对象。起点终点坐标需要是经纬度可以从高德API里通过AMap.Geocoder插件把具体地址转成经纬度也可以手动维护一份关键地点的坐标常量表。路线轨迹通常配合动画效果用effect配置即可不用额外引入其它库。这个场景适合做物流线路展示、客流路径分析、航线图等。唯一要注意的是map系列的地图在设置roam: false时lines系列的coordinateSystem要配成geo而不是map否则会有定位偏差。3.4 坐标轴缩放与放大的交互细节热词里还提到了echart坐标轴放大缩小滑动地图系列的缩放操作主要是通过roam属性和dataZoom组件实现的。series: [{ type: map, map: hainan, roam: true, // 开启鼠标滚轮缩放和平移 scaleLimit: { min: 1, max: 8 } }]roam设为true后用户可以通过鼠标滚轮缩放按住左键拖拽平移。如果想限制缩放范围用scaleLimit控制。但如果你用的是中国-省-市这种多级下钻方案每一级都套一个map系列缩放层级分别计算会比较繁琐。我个人的建议是顶级概览图用roam: false固定住做点击下钻/点击返回当进入某个市县之后再开启roam: true让用户自由缩放查看细节。这样既避免一开始就把地图拖得乱七八糟又保留了下钻后的交互自由度。如果你在图表的x轴或y轴上需要做放大缩小滑动比如散点图、柱状图那就要用到dataZoom组件dataZoom: [{ type: slider, xAxisIndex: 0, start: 0, show: true }]把xAxisIndex改成对应的轴索引再联动yAxisIndex就能实现框选一段数据放大查看的效果。4. 常见问题与排查技巧实录4.1 地图渲染不出来一片空白遇到这个问题的概率非常高十个用ECharts地图的人里至少有六个栽到这里。按我排错的经验优先级从高到低是第一确认registerMap是否在setOption之前执行并且注册的名字完全一致包括大小写。第二确认GeoJSON数据是否真的被正确import进来了Console里打印一下看看features数组是否为空。第三确认容器的宽高是否设置ECharts地图和图表一样容器没有高度直接什么都不显示。还有一个偏门的情况如果把GeoJSON文件直接改成.js后缀并导出module.exports {...}在Webpack里可能会因为Babel解析而报错。这种场景我建议改成export default {...}或者在vue.config.js里对.js文件加一条transpileDependencies规则。4.2 市县边界和实际地图对不上出现这种问题的原因九成在坐标系。如果拿到的GeoJSON是WGS-84坐标系GPS原始坐标而你的底图或者参考底图是GCJ-02高德、腾讯用的加密坐标系那地图边界整体会偏移几百米放大到高缩放级别时特别明显。解决方案有两种一是把GeoJSON坐标转换成GCJ-02网上有成熟的坐标偏移算法一个小函数就能搞定二是如果你不需要和高德底图做叠加用ECharts自己的地图渲染就无所谓坐标系问题直接展示即可。我的建议是除非你必须把ECharts地图叠加到高德瓦片图层上否则尽量不折腾坐标转换。少一层转换就少一个出错点展示形似的数据地图WGS-84完全够用。4.3 数据映射不上tooltip显示不出值数据映射不上多半是data数组里的name和GeoJSON里properties.name对不上。比如你的后端返回的数据叫海南三亚市而GeoJSON里叫三亚市ECharts就无法识别对应区域会变成空白或没有高亮。解决方法是统一名称。我习惯在拿到后端数据后先做一次名称归一化const adcodeMap { 460100: 海口市, 460200: 三亚市, // ...其他市县 }; // 后端返回的code字段直接映射成GeoJSON里的name const formattedData rawData.map(item ({ name: adcodeMap[item.regionCode], value: item.salesAmount }));使用adcode行政区划编码来做关联比用中文字符串匹配可靠得多。只要GeoJSON的properties里带了adcode后端也返回adcode就绝对不会出现中文名对不上的情况。4.4 海南地图里三沙市的特殊处理做海南地图还有一个绕不开的特殊点三沙市。三沙的管辖范围几乎覆盖整个南海如果按照真实边界去绘制它的地图范围会非常大。在一张全省地图里三沙的框可能会把整个南海区域都框进去视觉效果非常夸张。我通常的解决办法是在全省概览图中把三沙市简化成一个小的示意点放在南海右下角的位置类似中国地图右下角那个南海诸岛的小方框。具体做法是单独构造一个小的GeoJSON feature只画一个小小的方形或圆形轮廓标注三沙市三个字。这样做虽然在严格GIS意义上不严谨但做数据大屏展示可读性远比测绘严谨性重要。平时大屏上不强调三沙的数据时也可以直接在data里放{ name: 三沙市, value: 0 }让它显示为空白状态即可。4.5 性能优化大文件加载卡顿一个页面同时渲染几十个市县的地图边界如果每个边界的点数不简化帧率会肉眼可见地往下掉。这里我给出几个实用建议# 1. 简化坐标点数使用MapShaper或turf.simplify # 2. 加载方式改为异步使用动态import const loadMap async () { const geoJson await import(/assets/map/hainan.js); echarts.registerMap(hainan, geoJson.default); }; # 3. 设置animation: false地图切换和缩放时减少动画帧还有一个经验之谈同一个GeoJSON文件如果只加载一次可以用模块级变量缓存避免每次进入页面都重新import。我在vuex或者一个单独的mapLoader.js模块里统一管理所有GeoJSON的注册状态一次注册全局复用省心不少。5. 一些压箱底的避坑建议关于geojson文件用什么软件打开这个疑问我再多说几句。日常调试时除了直接打开JSON文本之外我还常用两个工具geojson.io和QGIS。geojson.io是一个在线工具把GeoJSON文件拖进去立刻就能看到地图边界渲染出来的效果还能直接编辑坐标点、查看feature属性。我每次拿到一份新的GeoJSON第一件事就是扔到geojson.io上看一眼形状对不对然后再接入项目。这一步能帮你过滤掉80%的无效数据。QGIS则是更专业的桌面GIS工具适合做复杂的空间数据处理比如合并多边形、裁切、重投影。如果你只是做前端可视化其实不太需要用QGIS一个geojson.io再加一个MapShaper基本够用一辈子了。最后再分享一个实操中的小技巧。在ECharts地图里各市县的label默认会直接显示在区域中心。因为海南的市县面积都不大特别是琼中、保亭这种山区县名字和名称会互相挤压。我一般会在数据量大的时候用富文本配置把label.formatter改成label: { show: true, formatter: function(param) { return param.name.replace(市, ); // 只显示前两个字 } }这样在地图上就不会出现海口市三个大字把整个小县城的图形区域都撑满的尴尬。在一些汇报场景下我还试过用labelLayout: { hideOverlap: true }来自动隐藏重叠标签效果也不错。实际做出这份海南省echart地图各市县geojson.zip的过程前前后后也折腾了不短时间。数据整理、坐标格式校验、加载性能调优、下钻逻辑调整每一步都不难但每一步都藏着小坑。希望这篇文章能帮你把这些坑提前填平让你把精力花在真正的业务可视化上而不是跟数据文件和无尽的边距对齐死磕。本文还有配套的精品资源点击获取
