简介海南省ECharts地图各市县GeoJSON压缩包专为前端开发者与数据可视化爱好者准备适用于地理数据分析、智慧城市展示、旅游导航等场景。包内包含海南省完整的hainan.json以及海口、三亚、儋州、文昌、陵水等市县独立JSON文件配合1个HTML示例页面以陵水黎族自治县乡镇边界为例可快速掌握在网页中利用ECharts加载GeoJSON并渲染地图的流程。资源共21个文件压缩包仅1.08MB便于下载与集成。JSON文件遵循GeoJSON开放地理数据格式结构涵盖类型、几何对象与属性可直接作为ECharts地图的数据源支持区域着色、缩放、tooltip交互等常见效果能够灵活实现按地域统计、分布热力图等业务需求。已有1621人学习下载适合希望在项目中快速落地海南省级地图、市县分级展示并在此基础上自定义视觉样式的前端和数据可视化开发者参考。1. 海南省ECharts地图geojson做数据可视化前先把地图数据这块硬骨头啃下来做数据可视化的人应该都有这个经历项目要展示海南省市县维度的数据ECharts官网的示例倒是很漂亮但真要自己动手第一步就卡住了——海南省的geojson数据去哪找网上搜出来的要么是旧版的全国数据里带上海南要么是某个仓库里零散的单个市县文件边界精度良莠不齐甚至有的拿到手连海口市的边界都对不齐。这个Zip包解决的就是这个问题里面是按市县分好的geojson文件直接注册进ECharts就能用。适合谁做政务大屏、旅游数据分析、物流区域看板的开发者还有需要快速出图交付、不想在地图数据上耗时间的从业者。这篇文章会把文件结构、代码接入、标注配置和边界坑一次说清。2. 从文件结构到数据格式先看懂geojson再动手2.1 包里的文件到底长什么样解压后你会看到一组文件名如“海口市.json”“三亚市.json”“儋州市.json”这样的文件加上一个汇总的“海南省.json”每个文件对应一个海南省市县级行政区划。文件格式是GeoJSON本质上是JSON结构的文本描述的是每个市的边界坐标串。海南省一共有19个市县含三沙市包内文件覆盖情况需要解压后核对一遍我在用的时候会单独检查三沙市和下面几个县的边界是否完整。2.2 GeoJSON的字段结构boundary数据藏在哪打开任一个文件你会看到典型的GeoJSON结构最外层的type是“FeatureCollection”features数组里每个元素包含properties和geometry两个部分。properties里的name字段就是注册地图后显示的区域名geometry.type通常是Polygon或MultiPolygoncoordinates里装的就是经纬度坐标串。比如在js里读取时你可能需要这样检查一下数据是否完整// 用fetch读取本地geojson文件需要本地服务器环境直接file://协议会跨域 fetch(geojson/海口市.json) .then(response response.json()) .then(data { const featureCount data.features.length; console.log(当前文件包含区县数量, featureCount); // 通常一个市的文件里只有一个feature坐标层级决定边界是否完整 });这里的featureCount是判断文件是否完整的直接依据。如果某个市的json文件里features数组是空的或者coordinates字段里的坐标串只有一层正常应该是多层嵌套数组说明这个文件在制作过程中就出了问题。我一般会先跑一遍这个检查再开始写大屏代码比等到渲染出来发现少个岛再排查要省事得多。2.3 坐标参考系为什么有的图位置偏移地理数据最怕坐标系不一致。国内大多数公开的geojson数据用的都是GCJ-02火星坐标系或WGS-84原始GPS坐标而ECharts默认按WGS-84处理。如果你的数据源混用了不同坐标系注册进地图后会出现整体偏移——海南岛可能整体往左下角偏几十公里三亚的标注点位也会对不上海南岛的轮廓。拿到数据后可以先在简单的地图预览工具里看下整体形状是否符合认知再决定是否要做坐标纠偏。包里这批文件从坐标形态上看应该是一致的WGS-84/GCJ-02但不同批次下载的数据混用是常态所以我一贯的建议是接第三方数据前先抽一个文件用经纬度取点验证。3. 让地图跑起来ECharts注册与渲染的完整流程3.1 注册地图的正确姿势ECharts渲染地图分三步加载geojson数据、用registerMap注册、在option里指定map属性。完整流程可以直接抄!DOCTYPE html html langzh-CN head meta charsetUTF-8 title海南省市县地图示例/title script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script /head body div idmap stylewidth: 900px; height: 640px;/div script // 1. fetch读取本地geojson文件 fetch(./geojson/海南省.json) .then(res res.json()) .then(hainanJson { // 2. 注册地图第一个参数是注册名第二个参数是geojson对象 echarts.registerMap(hainan, hainanJson); // 3. 初始化图表实例 const chart echarts.init(document.getElementById(map)); const option { tooltip: { trigger: item, formatter: {b}br/数值{c} }, visualMap: { min: 0, max: 100, left: 20, bottom: 20, text: [高, 低] }, series: [{ type: map, map: hainan, roam: true, label: { show: true, fontSize: 10, color: #333 }, data: [ { name: 海口市, value: 85 }, { name: 三亚市, value: 92 } ] }] }; chart.setOption(option); }); /script /body /html这段代码里的关键点registerMap的第二个参数必须是解析后的JSON对象不能是字符串路径map属性值要和注册名保持一致data数组里每个对象的name必须和geojson里properties.name完全一致差一个字都匹配不上——这是ECharts地图最常见的翻车点。visualMap用来映射数值到颜色区间如果你的数据是离散数值就设成对应的min/max。3.2 单独加载单个市县文件按需注册省一级地图g能一次性展示全部市县但如果你只关注某个市的内部数据可以单独加载对应文件。比如只加载“海口市.json”注册名改成‘haikou’map属性也用‘haikou’这样页面加载更快。多个地图文件共存时用不同注册名即可// 多地图文件注册示例 fetch(./geojson/三亚市.json) .then(res res.json()) .then(sanyaJson { echarts.registerMap(sanya, sanyaJson); // 这个图专门展示三亚 });注册多个地图时要注意内存占用。如果你在一个大屏里同时注册了省、市、县三级地图数据量大的时候页面初次渲染会有明显卡顿。我一般会通过动态注册的方式只在切换到对应层级时再加载数据而不是一次性全注册。省文件加载完再按需拉取市文件切换时销毁旧实例再初始化新的。3.3 数据与地图联动写业务数据的注意点地图只是底层画布真正让大屏活起来的是数据绑定。上面示例里data数组用的是name匹配实际开发中后端返回的往往是code和value字段。比如全国的行政区划代码是四位海南省在海口是4601开头后两位是市县编码。很多同事直接在data里写中文名结果数据库里用的是code对不上就全部渲染成空白。我的做法是先建立code到name的映射表// 行政区划代码映射到地图name const codeMap { 4601: 海口市, 4602: 三亚市, 4690: 儋州市 // 其他市县依此类推 }; // 后端返回的数据用code关联前端转成name再塞给ECharts const mappedData apiData.map(item ({ name: codeMap[item.code], value: item.value }));这种映射方式也方便后续扩展如果要下钻到区县级只需把map表换成更细粒度的。全国区划代码规则是固定的海南省找省后两位对应市县看到code就能猜出是哪个市比硬记中文名靠谱。4. 让地图更好看标注、样式的进阶配置4.1 给市县叠加自定义标注点地图光有边界很单调业务上通常还要标出机场、港口、数据中心位置。ECharts里可以用series的effectScatter类型叠加标注点坐标来自geojson里对应的经纬度// 叠加标注点的完整series配置 series: [ { type: map, map: hainan, roam: true }, { type: effectScatter, coordinateSystem: geo, // 使用registerMap时标注点会自动映射到geo坐标系 data: [ { name: 海口美兰, value: [110.35, 19.97] }, { name: 三亚凤凰, value: [109.41, 18.24] } ], symbolSize: 12, rippleEffect: { period: 3, scale: 2.5 } } ]这里的coordinateSystem必须写成geo否则标注点不会映射到地图坐标上。effectScatter会自带涟漪动画效果symbolSize控制点的大小rippleEffect里的period是动画周期秒scale是扩散范围倍数。如果你发现标注点位置偏了优先检查经纬度是否有逗号交换顺序的习惯——有人习惯写经度在前有人习惯纬度在前混用就是点跑到海里。4.2 调整地图配色和边界线默认的地图样式偏素大屏场景需要更高对比度。通过option里的visualMap和series下的itemStyle可以控制区域颜色、边界线颜色和宽度series: [{ type: map, map: hainan, itemStyle: { areaColor: #091c3d, // 区域底色 borderColor: #1a5fb4, // 边界线颜色 borderWidth: 1.5 // 边界线宽度 }, emphasis: { itemStyle: { areaColor: #0f4b8a // 鼠标悬浮高亮色 } } }]大屏背景多数是深蓝色系所以区域底色、边界色都用偏冷的颜色悬浮高亮时稍微提亮一点视觉上不突兀。如果做的是浅色系后台管理系统areaColor可以用浅色系的配色borderWidth也可以放宽到2便于区分相邻市县。4.3 地图缩放与旋转限制ECharts的roam参数控制缩放平移但有时误触会拖乱布局。可以用roam: false禁用或者用zoom和center手动设定初始视角series: [{ type: map, map: hainan, roam: true, zoom: 1.2, // 初始缩放比例 center: [109.5, 19.2], // 初始中心点坐标海南岛平均经纬度 scaleLimit: { min: 0.8, max: 5 // 限制只能缩放到0.8到5倍 } }]center和zoom这两个参数在巡航模式下很好用比如大屏放映时先整体展示海南岛再自动缩放到某个市县。scaleLimit能避免用户把地图放大到只有两条边界线的尴尬状态。这几个参数不写也不会报错但写清楚了观感会专业很多。5. 常见问题与避坑记录边界对不上、区域空白、坐标偏移5.1 地图渲染为空白区域现象图表有坐标系但整个海南岛区域是空的tooltip也不出数据。原因大概率是geojson文件没加载成功或者registerMap传入的不是解析后的对象而是字符串路径。另一个常见原因是你用了某些打包工具静态json被打包成模块fetch路径写错找不到文件。解决先在浏览器Network面板确认geojson请求返回200再在registerMap前用console.log确认一下data.features不为空。如果确定文件没问题检查是不是跨域问题——本地直接用file://打开html会报跨域错误用本地静态服务器python -m http.server或VS Code的Live Server插件就能解决。5.2 匹配不到数据导致所有区域都是同一种颜色现象数据没报错但所有市县显示的颜色都是同一个值。原因data数组里的name和geojson里的properties.name不一致。比如geojson里写的是“海口”你数据里写的是“海口市”或者geojson里写成“儋州市”数据里写成“儋州”。差一个字ECharts匹配不上就退化为全图统一数值的渲染。解决把数据里的name字段打印出来和geojson里的properties.name对比一遍。更稳妥的办法是统一用区划代码做关联在properties里通常会带adcode字段用这个做key前端映射成name。5.3 地图整体偏移或变形严重现象地图轮廓整体偏到画面外或者海岛形状和真实地图有明显差异。原因数据坐标系不一致。有的geojson是WGS-84有的是GCJ-02混用就导致偏移。还有一种是数据在制作时把经纬度做了拉伸处理导致形状变形。解决先用预览工具比如geojson.io打开文件看坐标是否正常再检查拿到手的多个文件之间坐标系是否一致。如果确实混用了可以整体做坐标纠偏但最省事的还是直接找同源数据——这个包里20多个文件应该是同一批次产出的坐标系一致出现偏移的概率远低于你在网上东拼西凑的文件。5.4 只显示南海诸岛不显示海南岛现象地图渲染出来只有下方几个小岛海南岛本体不见了。原因海南岛的行政范围包含了南海诸岛如果geojson的bounds计算错误或者coordinates层级嵌套太深ECharts在渲染时只识别了最外层的MultiPolygon把大岛漏掉了。解决检查properties里是否包含boundingbox或计算过包围盒必要时手动设置center和zoom让视角聚焦到[109.5, 19.2]附近。如果还是不显示检查文件末尾的坐标串是否有缺失或截断——有的下载工具会截断大文件导致坐标不完整这是最隐蔽的坑。5.5 页面加载时地图区域出现卡顿现象数据量大、地图文件多时初次渲染要卡几秒切换城市也明显卡。原因整个海南省文件加上各市县文件总大小可能达到几十MB一次性全加载进内存再渲染浏览器扛不住。解决采用动态加载策略——默认只加载省级地图点击某个市时再fetch对应市的geojson并注册同时销毁前一个实例。ECharts官方也建议按需加载不要把所有地图数据都打包进首屏。6. 进阶技巧把海南省市县地图做成支持下钻的数据大屏6.1 点击市一级区域自动下钻到区县级这种交互在政务大屏里非常常见先展示海南全省19个市县的总体数据点击某个市后地图平滑切换到该市的区县边界同时刷新数据。实现思路是监听click事件根据点击区域的名称动态加载目标geojsonchart.on(click, function(params) { // params.name就是点击的市县名称比如“海口市” const targetName params.name; fetch(./geojson/${targetName}.json) .then(res res.json()) .then(targetJson { // 重新注册并切换map属性 echarts.registerMap(target, targetJson); chart.setOption({ series: [{ type: map, map: target, roam: true }] }); }); });这里有个细节动态切换地图时之前设置的标注点和visualMap配置会被覆盖需要在新option里重新带上。还有就是点击事件触发的是地图上的区域还是悬浮的tooltip判断好事件绑定的对象层级。从省级切换到市级后如果想要返回省级再加一个面包屑导航或点击空白区域重置的逻辑代码结构会更完整。6.2 按数据大小对市县进行分级着色visualMap支持三种类型continuous连续、piecewise分段、hashMap手动映射。大屏场景我更常用piecewise它可以自定义区间阈值visualMap: { type: piecewise, pieces: [ { gte: 90, label: 优秀, color: #1ca86c }, { gte: 70, lt: 90, label: 良好, color: #4a9bd6 }, { gte: 50, lt: 70, label: 一般, color: #f5a623 }, { lt: 50, label: 较差, color: #e6503a } ] }这种分段方式比continuous更直观也更容易让业务方看懂。颜色选择上注意避开红绿色盲不可识别的组合政务大屏上通常用蓝绿-橙红这一组就够。6.3 用地图组件做轮播巡航大屏展示时想让地图自己动起来每隔几秒自动切换聚焦的市县并弹出该市的数据卡片。核心是定时器控制center和zoom// 预设的巡航路线按市县名称顺序切换中心点和zoom值 const tourData [ { name: 海口市, center: [110.35, 20.02], zoom: 4 }, { name: 三亚市, center: [109.51, 18.25], zoom: 4 }, { name: 儋州市, center: [109.58, 19.52], zoom: 4 } ]; let currentIndex 0; setInterval(() { const target tourData[currentIndex % tourData.length]; chart.setOption({ series: [{ type: map, center: target.center, zoom: target.zoom }] }); // 同步展示该市县的数据卡片 currentIndex; }, 3000);巡航的坑在于手动切换地图时用的center是基于地图坐标系的如果在一张省级地图上聚焦某个市zoom值不能设得太大否则画面会超出该市的boundingbox范围出现半边空白。多试几组zoom值找到画面不越界的临界数值就好。我自己的习惯是把每个市县的center和zoom先用一张“试跑页面”调好再统一配置进巡航数组。那之后就再也没有遇到过切到某个点时画面空白或者漂移的情况。这套流程从拿到geojson到跑通大屏大约半天时间希望帮到你。本文还有配套的精品资源点击获取