乡镇级别的可视化显示

最新推荐文章于 2024-03-11 13:15:00 发布

这也能运行？

最新推荐文章于 2024-03-11 13:15:00 发布

阅读量743

点赞数 2

文章标签： svg 前端 javascript

本文链接：https://blog.csdn.net/m0_56459583/article/details/121700111

版权

先上图

要求效果是鼠标经过每个乡镇变色，并显示对应乡镇的数据

想着echarts 或者antv L7 有现成的可视化方案，也没放心上，等开始做的时候直接傻眼了，他们都是精确到县级，县级以下的数据都没有，网上看了一些解决方案，试了一下，可行的推荐这个链接 Echarts实现区级地图_kuankaka的博客-CSDN博客_echarts 区域地图，不过个人觉得很麻烦（需要自己画出每个乡镇的genjson数据）。自己尝试发现一个临时解决方案。

这个地址可以获取乡镇级别的svg图片地图图片生成器

（本案例用的是浙江省江山市的。）

获取到的svg图片在VScode中打开，会发现这是啥玩意。

这时我把svg图片直接放到<body></body>中。大概就是这样

效果大概就是这样

在svg最后面，会有这些定点标签。

  //  这些是地图上显示的点的坐标

<text class="cls-4" transform="translate(214.97 178.85)">双塔街道</text>
      <text class="cls-4" transform="translate(35.42 167.26)">大桥镇</text>
      <text class="cls-4" transform="translate(89.27 425.05)">凤林镇</text>
      <text class="cls-4" transform="translate(140.99 660.52)">廿八都镇</text>
      <text class="cls-4" transform="translate(103.18 607.05)">保安乡</text>
      <text class="cls-4" transform="translate(180.15 400.25)">石门镇</text>
      <text class="cls-4" transform="translate(140.99 525.25)">峡口镇</text>
      <text class="cls-4" transform="translate(286.3 340.31)">塘源口乡</text>
      <text class="cls-4" transform="translate(155.96 103.14)">大陈乡</text>
      <text class="cls-4" transform="translate(286.3 224.41)">上余镇</text>
      <text class="cls-4" transform="translate(114.2 134.15)">坛石镇</text>
      <text class="cls-4" transform="translate(243.35 569.12)">双溪口乡</text>
      <text class="cls-4" transform="translate(162.93 213.84)">虎山街道</text>
      <text class="cls-4" transform="translate(86.63 277.17)">贺村镇</text>
      <text class="cls-4" transform="translate(264.63 277.17)">碗窑乡</text>
      <text class="cls-4" transform="translate(61.19 345.06)">新塘边镇</text>
      <text class="cls-4" transform="translate(267.07 442.5)">张村乡</text>
      <text class="cls-4" transform="translate(208.25 337.33)">长台镇</text>
      <text class="cls-4" transform="translate(235.91 77.73)">四都镇</text>
      <text class="cls-4" transform="translate(174.18 277.15)">清湖镇</text>

全局搜path会发现数量对不上，有很多，这时根据这个地方text标签的数量，从后往前保留所有对应数量的path标签。（这样保留的path标签和text标签是一一对应的。）

这里我用的自己写的数据

整个js代码很少，大概就这些

  <script>
      const svg = document.querySelector('svg')
      const arr = [...svg.children]
      const async = [
        {
          name: 'dachengxiang',
          data: 'dachengxiangDATA',
        },
        {
          name: 'shangyuzhen',
          data: 'shangyuzhenDATA',
        },
        {
          name: 'tanshizhen',
          data: 'tanshizhenDATA',
        },
        {
          name: 'shuangxikouxiang',
          data: 'shuangxikouxiangDATA',
        },
        {
          name: 'hushanjiedao',
          data: 'hushanjiedaoDATA',
        },
        {
          name: 'hecunzhen',
          data: 'hecunzhenDATA',
        },
        {
          name: 'zhangcunxiang',
          data: 'zhangcunxiangDATA',
        },
        {
          name: 'changtaizhen',
          data: 'changtaizhenDATA',
        },
        {
          name: 'siduzhe',
          data: 'siduzheDATA',
        },
        {
          name: 'qinghuzhen',
          data: 'qinghuzhenDATA',
        },
      ]

      arr.forEach((v) => {
        v.addEventListener('mouseover', () => {
          async.forEach((s,i) => {
            if (v.className.baseVal.indexOf(s.name) !== -1) {
              v.innerHTML = `<title><text>机构名称：${s.data}</text>\n<text>数量：${i}</text>\n<text>类别：${s.data}</text>\n
                </title>`
            }
          })
        })
      })
    </script>

最终效果

有什么其他问题欢迎一起讨论。

这里我手动给path 加上了一个对应数据的name的类名，这里可以和后端约定数据返回的顺序，根据text标签内容来返回，这样前端就不要很麻烦了，再或者字段中加一个和text标签内容对应的字段也可以。

这也能运行？

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
乡镇级别的可视化显示

先上图产品要做个这样的图放在大屏中，是精确到街道、乡镇级别的，鼠标经过显示对应街道的数据。大概看了echarts和antv l7提供的，都是精确到县级，再往下就没了。网上找了一遍，没找到现成的乡镇级别的可视化库。有一些解决方案，总结了一个暂时顶替的方案。首先就是在这个 http://datav.aliyun.com/portal/school/atlas/area_selector 网站获取对应县级的geojson数据。这里我用的是浙江台州宁海县为例复制好了数据就可以复制到...
复制链接

扫一扫