香港地图d3.js实现（附JSON数据）

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 1k累计阅读 1k平均单平台已同步平台 CSDN 微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄4年

关注

VIP免费原创最新推荐文章于 2026-02-18 06:35:20 发布 1k 阅读 AI 写同款· GEO 优化 ›

最近公司在香港有新项目，于是便要求大屏上显示香港地图；

最终实现如图：

一开始使用的echarts来渲染香港地图，效果如下：

但是这份JSON数据实现的香港地图和实际地图有出入，且使用echarts实现地图宽度会被压缩，所以经理就在群里说了这个问题，要求换一个更详细的地图；于是我找了百度了很久，最终使用D3.js来绘制该香港地图；代码如下：

<template>
  <div id="chart-container_hk">
    <svg id="chart_hkhk"></svg>
  </div>
</template>

<script>
import * as d3 from "d3";
import hongKongData from "../config/hongKong.json";
import coastlineData from "../config/coastlineData.json";
import api from "../api/fast/index";

export default {
  data() {
    return {
      params: {
        areaCode: "810000",
        areaLevel: "province",
        areaName: "香港",
        name: "香港",
      },
      list: [],
    };
  },
  async mounted() {
    const aid = sessionStorage.getItem("aid");
    api
      .getProjectAndDeviceNumByCity({
        agentId: aid,
        province: this.params.name,
      })
      .then(({ result: res }) => {
        this.list = res;
        console.log(34, this.list);
        this.$nextTick(() => {

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#javascript #json #开发语言

全网首发，基于D3.js绘制的鹰眼地图（迷你地图）本文提供两种使用d3.js绘制鹰眼地图的方法。阅读详情

相关推荐

【 D3.js 入门系列 --- 10 】地图的绘制

本节学习用 D3 制作地图的方法。需要用到 GeoJSON 文件，这个文件的获取比较困难，我花了一些时间制作好了，希望能与大家分享。本文使用中国地图的数据进行绘制。

十二月咖啡馆工作室 3万+

香港echarts地图json和js数据

香港echarts地图json和js数据，通过该JSON可以绘制香港地图.

Echarts地图可视化实战：从中国到全球的数据展示（附完整代码）

本文详细介绍了使用Echarts实现从中国到全球地图可视化的实战教程，涵盖数据准备、配置项详解及常见问题解决方案。通过完整代码示例，帮助开发者快速掌握中国地图和世界地图的定制技巧，适用于销售分布、用户分析等多种业务场景。

k6l7m8n9的博客 514

中国各省市地图边界坐标json文件

在地图上画出各省市边界，北京市密云县json内容如下： {"type": "FeatureCollection", "features": [{"type": "Feature","properties":{"id":"110228","name":"密云县","cp":[117.0923,40.5121],"childNum":1},"geometry":{"type":"Polygon","coordinates":[[[116.7586,40.7064],[116.7847,40.7016],[116.7888,40.714],[116.7902,40.727],[116.7819,40.7524],[116.7833,40.7579],[116.7902,40.7517],[116.8025,40.7462],[116.819,40.7504],[116.8272,40.749],[116.8396,40.7607],[116.8341,40.7703],[116.8506,40.7751],[116.8506,40.7785],[116.8671,40.7847],[116.8629,40.7922],[116.8712,40.7943],[116.8739,40.7991],[116.8808,40.7977],[116.8863,40.8012],[116.8959,40.7936],[116.8945,40.7819],[116.8973,40.7778],[116.9234,40.7737],[116.9247,40.7627],[116.9289,40.7565],[116.9234,40.7524],[116.9261,40.7449],[116.9412,40.7401],[116.9453,40.7284],[116.9563,40.7229],[116.9659,40.714],[116.9646,40.7092],[117.0044,40.6968],[117.0195,40.6954],[117.0305,40.692],[117.0497,40.7002],[117.084,40.7023],[117.0964,40.7057],[117.1115,40.7071],[117.117,40.6995],[117.1225,40.7009],[117.1527,40.6968],[117.1664,40.6989],[117.1788,40.6934],[117.1829,40.6975],[117.2063,40.6947],[117.231,40.6844],[117.242,40.6769],[117.2612,40.681],[117.2777,40.6666],[117.2914,40.6597],[117.3257,40.6604],[117.3367,40.6631],[117.3367,40.6666],[117.3463,40.6741],[117.3615,40.6748],[117.3903,40.6837],[117.4068,40.6865],[117.4205,40.6865],[117.4507,40.6796],[117.4644,40.6734],[117.4796,40.6776],[117.4947,40.6748],[117.5056,40.6666],[117.507,40.6549],[117.5029,40.6528],[117.5015,40.6364],[117.4796,40.6357],[117.4713,40.6474],[117.448,40.6419],[117.4301,40.6405],[117.4219,40.6377],[117.4178,40.6185],[117.4136,40.6062],[117.4205,40.5945],[117.4232,40.5821],[117.4301,40.5787],[117.426,40.5732],[117.4205,40.5691],[117.404,40.5739],[117.4013,40.5698],[117.3944,40.567],[117.3889,40.5615],[117.3766,40.5663],[117.3656,40.5759],[117.3505,40.5801],[117.334,40.5766],[117.3106,40.5766],[117.2955,40.567],[117.2667,40.5581],[117.2502,40.5485],[117.253,40.5416],[117.2502,40.5375],[117.2598,40.5196],[117.2475,40.5121],[117.2392,40.5176],[117.2337,40.5135],[117.2131,40.5128],[117.2104,40.5073],[117.209,40.497],[117.2173,40.4949],[117.2282,40.4812],[117.2255,40.4778],[117.2365,40.4688],[117.2351,40.4578],[117.2639,40.4414],[117.2571,40.4297],[117.2502,40.429],[117.2337,40.4166],[117.2324,40.4036],[117.2392,40.3988],[117.2406,40.3947],[117.2365,40.394],[117.2351,40.3892],[117.2282,40.3857],[117.2241,40.3754],[117.2186,40.3775],[117.209,40.3734],[117.1925,40.3761],[117.1774,40.3748],[117.1637,40.3706],[117.1472,40.372],[117.1472,40.3672],[117.139,40.3624],[117.1184,40.3548],[117.1129,40.3542],[117.1005,40.3603],[117.0593,40.3377],[117.0538,40.337],[117.0525,40.3439],[117.0374,40.3473],[117.0236,40.337],[117.0126,40.326],[117.0113,40.3082],[117.0058,40.3027],[117.0003,40.302],[117.0044,40.2958],[116.9728,40.2848],[116.9522,40.2621],[116.9495,40.2567],[116.9659,40.2374],[116.9536,40.2292],[116.9412,40.2237],[116.9316,40.2306],[116.9206,40.223],[116.9028,40.2244],[116.8973,40.2319],[116.8918,40.2347],[116.8932,40.2415],[116.8739,40.2683],[116.8753,40.2759],[116.8712,40.2889],[116.8588,40.2917],[116.8492,40.3102],[116.8341,40.3082],[116.8272,40.2985],[116.8231,40.2862],[116.819,40.2834],[116.808,40.2869],[116.7888,40.2889],[116.7833,40.2793],[116.7696,40.2731],[116.7517,40.2752],[116.7448,40.2793],[116.7352,40.2793],[116.7435,40.2889],[116.7435,40.2944],[116.7668,40.3143],[116.7696,40.3219],[116.7682,40.3253],[116.7517,40.3267],[116.7503,40.3315],[116.7448,40.3349],[116.7448,40.3391],[116.7297,40.3349],[116.7311,40.3391],[116.7229,40.3397],[116.727,40.361],[116.7188,40.361],[116.7188,40.3693],[116.7133,40.3686],[116.7064,40.3761],[116.7119,40.3802],[116.7091,40.3871],[116.7119,40.3919],[116.7215,40.396],[116.7242,40.4036],[116.7242,40.4166],[116.7201,40.4235],[116.7188,40.4297],[116.7201,40.4386],[116.7229,40.4427],[116.7229,40.4475],[116.7078,40.4661],[116.7009,40.4812],[116.6927,40.4881],[116.6982,40.4942],[116.7009,40.508],[116.7119,40.5183],[116.7133,40.5231],[116.7174,40.5251],[116.7091,40.532],[116.7091,40.543],[116.6776,40.5519],[116.6844,40.554],[116.6982,40.5656],[116.7064,40.5643],[116.7146,40.5746],[116.7119,40.5849],[116.7091,40.5904],[116.7105,40.6007],[116.705,40.6027],[116.7078,40.6075],[116.7023,40.6151],[116.7064,40.624],[116.7023,40.6316],[116.7119,40.6425],[116.7119,40.6556],[116.7091,40.6618],[116.7146,40.668],[116.7146,40.6796],[116.7311,40.6913],[116.7476,40.6968],[116.7586,40.7064]]]}} ]}

d3.js绘制地图，支持点击等事件

目前项目中遇到的需求是画出一个静态地图，并支持一些基本的点击事件，此次是使用d3.js制作的（d3真的从入门到放弃了），话不多说直接上代码吧，可以直接复制下来就可以用的。一些扩展的功能大家可以自由发挥，d3.js官网（

weixin_57182748的博客 1849

【地图系列】中国各省市县级 JSON 文件

很多朋友在找中国各省具体到市县级的 JSON 地图文件，这些天承蒙朋友帮助，总算找到了。我花了一些时间对格式做了简化，总算是整理好了，希望分享给大家。各省份的地图整理如下，各文件能够直接在【入门 - 第 10 章】介绍的例子中运行，改个文件名即可。本文件由上官真心网友提供，感激不尽。中国：china.json安徽：anhui.json北京：beijing.json重庆：c

崔向阳@李晓的博客 2万+

D3.js v5.0 地图

先说一下D3有很多的地图投影方法，但是很遗憾的是没有拿到比较细化的世界地图的json数据，所以以常见的投影方式做了一个例子。安利一下获取中国地图的json数据：http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4 老样子，先看截图。先看中国地...

m0_37777005的博客 4909

【D3.js - v5.x】（7）绘制地图 | Geo布局 | 完整代码

地图在数据可视化中，地图是很重要的一部分。很多情况会与地图有关联，如中国各省的人口多少，GDP多少等，都可以和地图联系在一起。地图数据的获取制作地图需要 JSON 文件，将 JSON 的格式应用于地理上的文件，叫做 GeoJSON 文件。本文就是用这种文件绘制地图。那么如何获取中国地图的 GeoJSON 文件呢? 如下链接,打开并下载至本地。 https://geo.datav.aliyu......

前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改 4649

可视化工具D3.js教程入门（第十四章）—— 中国地图

可视化工具D3.js教程入门（第十四章）—— 中国地图代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>中国地图</title> <script src="./d3.min.js"></script> </head> <body> <svg wi

weixin_44867717的博客 2273

vue 引入json地图_vue中引入地图的js文件，显示echarts is not loaded

weixin_29582919的博客 388

php 地图数据_PHP实现地图区域数据统计的方法

PHP实现地图区域数据统计的方法PHP程序开发快，运行快，技术本身学习快。嵌入于HTML：因为PHP可以被嵌入于HTML语言，它相对于其他语言。编辑简单，实用性强，更适合初学者。以下是小编为大家搜索整理PHP实现地图区域数据统计的方法，希望能给大家带来帮助!更多精彩内容请及时关注我们应届毕业生考试网!HTML和上篇文章使用raphael.js绘制中国地图一样，首先在head部分载入raphael....

weixin_28943467的博客 350

WEBGIS开发1-地图资源部署及加载

基于Cesium的Mars3D进行三维地图的加载及相关功能的实现

weixin_42276227的博客 1190

php 地图区域统计,php实现地图区域数据统计

$(function(){$.get("json.php",function(json){//获取数据var data = string2Array(json);//转换数组var flag;var arr = new Array();//定义新数组，对应等级for(var i=0;ivar d = data[i];if(d<100){flag = 0;}else if(d>=...

weixin_27890975的博客 232

中国地图FLASH和JS版本

本文转载自：https://www.cnblogs.com/yetiea/archive/2012/02/15/2352632.html 作者：yetiea 转载请注明该声明。　最近要实现在web中国地图的需求，按省份显示不同热点内容，衡量了一下还算FLASH靠谱一些，前人栽树，后人乘凉：搜到这篇博文：http://www.richbox.net/blog/?p=445，（貌似打不开了，2012...