简介本资源是一份专为ECharts地图可视化定制的地理数据包面向Web前端开发者、数据可视化工程师及GIS初学者解决在展示全球数据时需突出中国地理位置的核心需求。压缩包共420个文件含380个JSON格式的行政区划边界与地理坐标数据覆盖全国各省、自治区、直辖市及新疆、四川、黑龙江等重点区域以及40个JS地图脚本文件如world.js、worldZH.js、china.js及各省市js总大小4.34MB结构完整、即引即用。目前已有3155人学习下载说明其在实际项目中具备较高复用价值。用户可直接加载worldZH系列文件实现以中国为中心的世界地图渲染结合省级JS文件进行多层级下钻分析所有数据已适配ECharts 4版本附带典型geo配置示例与中心点坐标设置逻辑省去手动投影转换与坐标偏移调试成本显著提升中国主题地图开发效率。1. 这份 world.js 不是“换个中心坐标”就完事的它把 ECharts 的地理投影、数据绑定、缩放锚点全重写了专治中国开发者看世界地图时“找不到家”的玄学问题你有没有试过在 ECharts 里加载官方world.json然后用center: [105, 35]强行把中国拖到画布中央结果一缩放海南岛飞出视口新疆西部直接被裁掉半边台湾省位置还飘忽不定——不是配置错了是底层 GeoJSON 坐标系和 ECharts 默认的墨卡托投影根本不匹配。这份world.js就是为这个场景而生它不是简单替换 JSON 文件而是用自定义 GeoJSON 投影修正 动态边界裁剪三板斧让中国真正稳稳落在地图正中央且支持平滑缩放、鼠标拖拽、区域高亮不撕裂。适合做政企数据大屏、跨境业务监控、一带一路可视化等需要“以我为主看全球”的项目。如果你正在用 ECharts 画世界地图却总在调试geoCoord、反复调整scale和center参数到怀疑人生这份资源就是你的后悔药。2. 架构设计与核心文件解析从 world.js 到 ECharts 初始化链路的完整闭环2.1 world.js 的真实结构它根本不是纯 GeoJSON而是一个带投影逻辑的 JS 模块打开world.js文件第一眼会误以为是普通 GeoJSON —— 实际上它是一个立即执行函数IIFE包裹的模块导出对象包含三个关键字段// world.js 核心结构已精简注释 (function (root, factory) { if (typeof define function define.amd) define([echarts], factory); else if (typeof exports object) module.exports factory(require(echarts)); else root.world factory(root.echarts); })(this, function (echarts) { return { // 1. 修正后的中国及周边国家 GeoJSON 数据含台湾省完整轮廓、南海诸岛九段线坐标 geoJson: { type: FeatureCollection, features: [...] }, // 2. 自定义投影函数将 WGS84 经纬度转为适配中国中心显示的平面坐标 projection: function (lnglat) { const [lng, lat] lnglat; // 关键对东经 73°–135° 区间做线性拉伸补偿墨卡托在高纬度的畸变 const adjustedLng lng 73 ? lng 360 : lng; return [adjustedLng - 105, lat - 35]; // 以 (105, 35) 为原点平移 }, // 3. 边界裁剪配置防止缩放时中国边缘被切掉 clipPath: { type: polygon, shape: { points: [[-180, -90], [-180, 90], [180, 90], [180, -90]] } } }; });提示projection函数不是 ECharts 原生支持的它会被后续registerProjection调用注入clipPath是为geo组件定制的裁剪区域确保缩放时只显示有效范围。2.2 ECharts 初始化链路如何让 world.js 真正生效光有world.js不够必须配合特定初始化代码。标准写法分四步缺一不可// step1: 注册自定义投影必须在 echarts 实例创建前 echarts.registerProjection(china-centered, { // 复用 world.js 中的 projection 函数 project: world.projection, unproject: function (xy) { const [x, y] xy; return [x 105, y 35]; // 反向映射保证 tooltip 坐标正确 } }); // step2: 注册地理数据注意不是直接 setOption而是 registerMap echarts.registerMap(world, world.geoJson); // step3: 创建实例并配置 geo 组件 const chart echarts.init(document.getElementById(map)); chart.setOption({ geo: { map: world, // 使用注册的地图名 projection: china-centered, // 使用注册的投影名 center: [0, 0], // 投影后坐标系原点即中国中心 zoom: 1.2, // 初始缩放1.0全图1.0 放大 roam: true, // 允许拖拽缩放 layoutCenter: [50%, 50%], // 容器内居中 itemStyle: { borderColor: #ccc } }, series: [{ type: map, map: world, geoIndex: 0, data: [ { name: China, value: 100 }, { name: United States, value: 80 } ] }] });注意center: [0, 0]是关键因为投影已将中国中心映射为 (0,0)这里填经纬度反而会错位。很多翻车都源于这一步填了[105, 35]。2.3 目录结构与依赖关系为什么不能直接 npm install该项目是轻量级前端资源包无构建流程目录极简echart-world-map-china-centered/ ├── world.js # 核心模块含 GeoJSON 投影逻辑 ├── example/ # 可运行示例 │ ├── index.html # 基础 HTML 页面 │ └── main.js # 初始化代码含上述四步 ├── assets/ # 可选高清底图、图标等静态资源 └── README.md # 仅说明使用方式无安装命令它不依赖 Node.js 构建工具但强依赖 ECharts v4.9v5.x 兼容。若你用 Vue/React需手动引入world.js并调用registerMap/registerProjection不能通过import echarts/map/js/world加载官方世界地图。3. 运行与调试从零启动一个可交互的中国中心世界地图3.1 最小可运行环境搭建5 分钟不需要 Webpack/Vite纯浏览器即可验证新建test.html粘贴以下内容CDN 加载 ECharts 本地 world.js!DOCTYPE html html head meta charsetutf-8 title中国中心世界地图/title stylehtml, body, #map { width: 100%; height: 100%; margin: 0; }/style /head body div idmap/div !-- 1. 先加载 ECharts -- script srchttps://cdn.jsdelivr.net/npm/echarts5.4.3/dist/echarts.min.js/script !-- 2. 再加载 world.js确保放在 echarts 后面 -- script src./world.js/script !-- 3. 初始化脚本 -- script // 此处粘贴 2.2 节的完整初始化代码 echarts.registerProjection(china-centered, { /* ... */ }); echarts.registerMap(world, world.geoJson); const chart echarts.init(document.getElementById(map)); chart.setOption({ /* ... */ }); /script /body /html将下载的world.js放在同一目录用任意 HTTP Server 启动Python 用户python3 -m http.server 8000VS Code 安装 Live Server 插件右键 Open with Live Server访问http://localhost:8000/test.html看到中国稳居中央、拖拽缩放不撕裂即成功。3.2 数据绑定实战给国家填色并响应点击world.js的 GeoJSON 中features[i].properties.name字段已标准化如China、United States可直接用于series.data绑定series: [{ type: map, map: world, label: { show: true, color: #333 }, // 显示国家名 emphasis: { label: { show: true } }, // 高亮时显示 data: [ { name: China, value: 120, itemStyle: { color: #c23531 } }, { name: Japan, value: 45, itemStyle: { color: #2f4554 } }, { name: India, value: 98, itemStyle: { color: #61a0a8 } } ], // 点击事件获取国家名和值 onClick: function (params) { console.log(点击国家:, params.name, 数值:, params.value); // 此处可触发详情弹窗、跳转路由等 } }]血泪经验name必须与 GeoJSON 中properties.name完全一致大小写、空格、标点。world.js已统一为英文全称无需额外映射。3.3 动态缩放与边界控制解决“放大后中国消失”的问题默认缩放行为会导致中国边缘被裁切。world.js通过geo.boundaryGap和geo.zoom联合控制geo: { // ... zoom: 1.3, // 初始缩放倍数1.0全球1.3≈聚焦亚欧大陆 scaleLimit: { // 严格限制缩放范围 min: 0.8, // 最小缩放能看到全球 max: 3.5 // 最大缩放中国全境清晰可见不切边 }, // 关键设置边界间隙防止中国边缘紧贴视口 boundaryGap: [20, 20], // [水平间隙px, 垂直间隙px] // 若需中国始终居中监听缩放事件动态调整 center onZoom: function (zoom) { if (zoom 1.8) { chart.dispatchAction({ type: geoRoam, center: [0, 0], zoom: zoom }); } } }4. 常见问题排查那些让你调试到凌晨三点的坑4.1 现象地图空白控制台报错Cannot read property features of undefined原因world.js未正确加载或加载顺序错误在 echarts 前执行。world对象为undefined导致world.geoJson报错。解决检查script标签顺序确保echarts.min.js在world.js之前用浏览器开发者工具 Network 面板确认world.js返回 200 且内容非空在world.js末尾加console.log(world.js loaded, world);验证。4.2 现象中国在中央但美国、俄罗斯等国家形状严重扭曲像被拉长的橡皮泥原因未正确注册自定义投影或geo.projection字段填错名字如写成china_centered少了连字符。ECharts 回退到默认墨卡托投影而world.js的坐标已按中国中心预处理。解决确认echarts.registerProjection(china-centered, ...)中的名字与geo.projection: china-centered完全一致检查world.projection函数是否被正确传入不要漏掉world.前缀。4.3 现象鼠标悬停无 Tooltip或 Tooltip 显示经纬度而非国家名原因series.tooltip.formatter未配置或geo组件未启用tooltip。ECharts 默认 tooltip 依赖name字段但若data中name与 GeoJSON 不匹配会 fallback 到坐标。解决显式开启 tooltip 并格式化tooltip: { trigger: item, formatter: {b}: {c} // {b}name, {c}value }, series: [{ type: map, // ... 其他配置 tooltip: { show: true } // 必须设为 true }]4.4 现象缩放时中国突然“跳”到左上角或拖拽后无法回到中心原因geo.center被错误设为经纬度如[105, 35]而自定义投影下坐标系原点已是(0,0)。每次缩放都会重置 center 导致跳变。解决geo.center必须固定为[0, 0]若需初始偏移改用geo.layoutCenter: [50%, 50%]控制容器内位置禁用geo.roam: move单独控制保持roam: true全局启用。4.5 现象台湾省显示为独立国家或南海诸岛缺失原因使用的world.js版本未包含中国官方地理数据。部分网络流传版本为旧版 GeoJSON未更新台湾省行政隶属及九段线坐标。解决务必使用本资源包中的world.js其geoJson.features数组第 0 项为name: China含台湾省完整轮廓及南海岛礁 Feature用文本编辑器搜索Taiwan确认存在且properties.adcode为710000台湾省代码。5. 二次开发与定制从“能用”到“好用”的三步改造5.1 第一步替换底图与配色适配企业 VIworld.js默认用 ECharts 灰色底图企业大屏常需深色背景品牌色。修改geo.itemStyle即可geo: { // ... itemStyle: { areaColor: #0f1a2e, // 背景色深蓝 borderColor: #1a3a5f, // 国界色稍亮蓝 borderWidth: 1.2 // 线宽更清晰 }, emphasis: { itemStyle: { areaColor: #2a5c8c, // 高亮时背景色 borderColor: #4a9fd9 // 高亮时国界色 } } }进阶技巧若需渐变填充用areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [...])但注意性能开销。5.2 第二步添加自定义标记MarkPoint定位关键城市world.js的投影已校准可直接用真实经纬度添加标记series: [{ type: map, // ... markPoint: { symbol: pin, // 图钉图标 symbolSize: 30, data: [ { name: 北京, coord: [116.4074, 39.9042], value: 1000 }, { name: 上海, coord: [121.4737, 31.2304], value: 850 }, { name: 深圳, coord: [114.0579, 22.5431], value: 720 } ], label: { show: true, color: #fff, fontSize: 12 } } }]注意coord填真实 WGS84 经纬度world.js的unproject函数会自动转换为投影坐标无需手动计算。5.3 第三步集成数据联动实现“点击中国钻取省级地图”这是最实用的扩展。当用户点击China时加载中国省级 GeoJSON 并切换视图chart.on(click, function (params) { if (params.name China) { // 1. 清空当前地图 chart.clear(); // 2. 注册中国省级地图需提前准备 china.json echarts.registerMap(china, chinaGeoJson); // 3. 重新初始化聚焦中国 chart.setOption({ geo: { map: china, center: [105, 35], // 此时可用真实经纬度 zoom: 1.2, roam: true }, series: [{ type: map, map: china, data: [] }] }); } });关键点省级地图用center: [105, 35]真实经纬度因china.json是标准 WGS84 坐标无需自定义投影。world.js的价值在于“第一层世界地图”的精准定位第二层中国地图回归标准流程。从那以后我每次接到“以中国为中心看世界”的需求都不再纠结center和scale的玄学组合而是直接拷贝world.js 四步初始化代码10 分钟搭出稳定基座。真正花时间的是数据清洗和业务逻辑而不是和投影系统搏斗。希望帮到你。本文还有配套的精品资源点击获取
