如何利用Highmaps自定义地图

引言:基于网上的数据,我们可以很方便的用highmaps、echarts等工具做一份中国的人口密度分布图、各个国家的人数分布图。如何做一个自定义的地图呢?

实现这个功能也很简单,下面我们将一步一步的,看看如何实现这个功能

1、需要的工具和材料:

    1)、JS:highmaps.js,jquery.js

    2)、要操作的地图的图片一份

    3)、下载安装inkscope(https://inkscape.org/en/,这是你唯一需要安装的软件)

2、操作步骤主要有2个部分:抠图和渲染准备和渲染

1)、抠图:

(1)、用我们上文提到的INKSCOPE打开要操作的图片,这里为了方便,我直接截图了一份加拿大地图,如下:

(2)、打开选择任意参数:


(3)、图片打开后,我们会看到如下的内容


(4)、开始抠图(左侧导航栏的Shift+F6),如下图所示,可以抠出一个区域:


抠图一个区域后,可以对该区域设置颜色和id信息,方便后面在highmaps中使用,依照次方法,抠出剩余的几个区域


抠图完成后,移除底图,用左侧最上面的箭头选中底图,拖走删除即可

至此,我们得到了一份简略版本的加拿大地图,把该图另存为SVG格式

2)、渲染准备

用notepad++等工具打开保存的SVG图片,可以查看到对应的XML代码,复制SVG代码到https://www.highcharts.com/studies/map-from-svg.htm中,load后,可以查看到我们抠出的区域图:


3)、渲染:

View data:可以查看到对应的代码配置:


复制代码,到highmaps的series配置中,配合Highmaps的参数,即可做出我们想要的地图:


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,486评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,482评论 4 61
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,824评论 7 249
  • 明天郑开马拉松,可惜没报上半马的名,又嫌弃5公里,或许会在床上赖一上午。 想起在杭州时错过的一个又一个马拉松。 去...
    hhzha0阅读 203评论 0 0
  • 我是一朵叶子,要在那个枝枯叶落的冬天里坚强存活到来年暖春笑看绿意满枝头。 我知道,我不是一朵花 ...
    五年后见阅读 509评论 0 0

友情链接更多精彩内容