npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gulp-svg2json

v1.1.2

Published

yfy svg2json gulp

Downloads

27

Readme

svg 转 geojson(gulp 插件)


[TOC]

使用方法

1.下载

git clone https://github.com/yuhonyon/svg2geojson.git

2.安装

cd geojson
cnpm i

3.使用

  • 将 svg 文件直接放在 ** svg/ ** 目录下
  • 输入命令
gulp
  • 在 ** dist/ ** 目录下将生产对应的目录,目录下有转换后的 geojson 文件以及行政中心的坐标文件和 svg 原文件

制作地图 geojson 数据的所有步骤

  • 设计地图草稿
  • 根据设计稿使用 ai 画矢量地图
  • 导出 svg
  • 使用 gulp 将 svg 转换为 geojson
  • 使用图表库制作地图

设计地图草稿

设计师设计地图草稿(只需明确行政划分区域即可),如下图

使用 AI 描出矢量图

  • 将设计草稿导入 AI
  • 新建图层,在图层内跟据设计稿使用钢笔工具描出一个行政区的行政(使用多边形描边)
  • 将该图层取名为行政区名字
  • 重复第 2 步,描出所有行政区

  • 选择所有描点,转换尖角,去除不小心画出的曲线(导出的 svg 不是由 polygon 组成的而是 path 的时候使用这个方法,建议描完后就使用一次)

  • 在每个图层中心处再画一个圆形或者椭圆

  • 删除设计草稿的图层导出 svg,没有出错的话格式应该如下

  • 如果发现 poluygon 标签变成了 path,请注意第 4 步骤

** 注意:导出的 svg 转换出的 geojson 制作的地图将会是垂直颠倒的(可能是坐标轴不一样, 一个左上角一个右下角),所以我们要把我们制作的 AI 图垂直翻转后再导出 svg **

将 svg 转换为 geojson

实例

echarts (echarts 会将地图横向压扁,需要设置宽高,不能自适应)

highcharts