制作SVG地图轮廓
2021-8-14 22:30:59 Author: taxodium.ink(查看原文) 阅读量:9 收藏

Contents

[NOTE] Updated May 31, 2023. This article may have outdated content or subject matter.

由于项目基于 AmMap,有时需要使用中国某些省份或者市区作为地图,但是 AmMap 没有提供相关的地图数据,官网提供了一个自制地图数据的文档, 根据此文档,只要有地图的 GIS 数据,就可以制作出想要的地图。

网上搜索下载相关地区的 GIS 数据,一般下载下来会包含 .shp , .shx, .prj, .dbf 等类型的文件, 这里提供一份中国地图的 GIS 数据

获取轮廓,可以使用这个工具 mapshaper, 具体步骤如下:

  1. 把 GIS 数据导入到 mapshaper 中,如果是下载了上文的中国地图 GIS 数据,里面包含了 123 不同精度的地图,根据需要的精度导入, 笔者开发的时候,需要淄博市的轮廓,于是就导入等级 3 的地图数据

  2. 打开 console,通过命令获得需要的轮廓

    • filter 'NAME_1 == "Shandong" && NAME_2 == "Zibo" && NAME_3 != "Gaoqing" || NAME_3 == "Zouping"' 过滤得到淄博的轮廓

    • mapshaper -clean 清除淄博以外的区域

    • 由于不需要轮廓里面的线,只需要最外面那层轮廓,将里面的线移除:

      • mapshaper -dissolve

      • mapshaper -clean

  3. 导出成 SVG 数据,到此已经得到一个淄博地图轮廓的 SVG 了

  4. 由于要在 AmMap 里用,使用 AmMap 提供的工具, 获取 JSON 数据,这里获取的 JSON 数据就能用于 AmMap 了

    • 打开导出的 SVG 文件,复制里面 <g> 标签的全部内容

    • 导入到 mapparser3,获取到 JSON 数据

如果下载的地图数据很精细,导出时可能会导出一个非常大的文件,但是太大的文件又可能不好处理, 这时,可以利用 mapshaper 的 Simplify 的功能去简化地图,从而导出一个大小合适的地图。

一般 GIS 数据里包含了很多地图区域的信息,例如,东莞市这个区域,包含了这块区域是什么市,属于什么省份等信息, 但是当导出 SVG 的时候,发现这些信息丢失了。可以通过在导出的时候,指定要包含的属性,这样导出的SVG就能够包含 相关的属性信息了。简单的用法:

  • 在 mapshaper 的右上角又一个 i 的按钮,点开此按钮有一个 data 选项,选择此选项后,悬浮在地图区域的时候 就能看到此区域的相关属性信息

  • 例如属性信息当中有一个 id 属性,那么当点击右上角 Export 的时候,在弹窗中有一个可以输入 export options 的输入框,可以输入 -o svg-data=id, 然后导出,导出的 SVG 中就会包含一个 data-id 的属性值。

Author Spike Leung

LastMod 2023-05-31 (1ef6a30)

License CC BY-NC-ND 4.0


文章来源: https://taxodium.ink/post/make-svg-map-outline/
如有侵权请联系:admin#unsafe.sh