jVectorMap入门使用教程

2024/03/27
- 编程
0阅读

一、需求背景

在日常开发工作中，对于地图类展示(包括地图打点)的需求基本是接入国内地图厂商的API使用(例如：高德地图、百度地图、腾讯地图)。优点是接入方便，且不用考虑地图数据更新的事宜；缺点是引用资源数据体积较大导致影响页面载入速度、商业用途存在随时需要购买企业授权的风险（授权费用5-10W，厂商提供授权证明文件。目前暂时是一次性缴纳，之后无需进行付费。但后续是否需要续费还不确定）。

当然在这几家之外，也有类似openlayer之类的开源地图库，可以实现大致相仿的功能。但包体还是比较大，如果我们只需要简单的地图打点，如记录某项目在某地落地、某分公司在哪建立、团队实地考察过某些地方等功能，不需要详细的地图信息数据、图层背景，则可以考虑使用SVG地图。这样可以极大降低引用资源大小，提升页面加载数据。

二、安装及配置环境

(1) 从官网下载 jVectorMap

下载网址：https://jvectormap.com/download/，点击 Download jVectorMap x.x.x 下载最新版本。

(2) 配置环境

根据官网的 tutorials 目录，搭建基础的开发环境。

<!DOCTYPE html>
<html>
  <head>
    <title>jVectorMap demo</title>
    <link rel="stylesheet" href="jquery-jvectormap-2.0.1.css" type="text/css" media="screen"/>
    <script src="jquery.js"></script>
    <script src="jquery-jvectormap-2.0.1.min.js"></script>
    <script src="jquery-jvectormap-world-mill.js"></script>
  </head>
  <body>
    <div id="world-map" style="width: 600px; height: 400px"></div>
    <script>
      $(function(){
        $('#world-map').vectorMap({map: 'world_mill'});
      });
    </script>
  </body>
</html>

注意：一定要给指定的#world-map元素设置宽度或者高度，否则会导致图片无法渲染。

三、配置中国地图

在官方地图资源页面也存在中国省份地图资源，但是需要注意：千万不能用官方的地图资源！因为在官方地图资源中，缺少中国台湾、香港、澳门等省份及特别行政区。(这是违反地图管理条例的，又是原则上的问题，不上秤没有四两重，上了秤一千斤都打不住，还是要谨慎再谨慎！)

之后又找到了高德地图的开放数据平台，这里可以下载SVG的中国地图和特定省份地图，但是下载的仅仅是SVG图形，而无法通过经纬度实现打点。之后又通过搜索找到了某个博主的个人网站，他的地图上补充了台湾地区的SVG图形，但是仍然缺少香港、澳门的SVG图形，最后在amcharts中找到了附带香港、澳门的中国地图(下载svg之后，需要把每个省份的图形信息复制到对应的地图js文件里)。

尝试过使用高德地图下载SVG/JSON数据，然后在mapshaper中导入并转换为SVG图形，但同样的也无法实现经纬度打点。官方倒是有一个转换工具，但是不会用python (尴尬

四、地图上色

通过map.series.regions[0].setValues()可以实现地图上色功能，参数为对象形式{'地区': '#ff0000'}，为了方便给地区上色，这里写了个循环来给地区上色（统计对应颜色的地区名称，此处Demo代码中我以省份编号来作为地区标识）

const map = $('#map').vectorMap('get', 'mapObject')
let colorRelation = {
    '#fefcd9': ['110000', '150000', '330000', '370000', '420000', '440000', '530000'],
    '#c6e2d4': ['120000', '140000', '230000', '340000', '520000', '620000', '710000', '810000'],
    '#f9c8dd': ['130000', '220000', '320000', '360000', '450000', '540000', '610000'],
    '#fae0be': ['310000', '350000', '410000', '430000', '460000', '510000', '640000', '650000', '820000'],
    '#c8cce7': ['210000', '500000', '630000'],
}
let colorsData = {}
for (const key in colorRelation) {
    colorRelation[key].map(area => {
        colorsData[area] = key
    })
}

map.series.regions[0].setValues(colorsData)

五、地图标点

通过markers可以在地图上添加标点，通过style可以单独给标点设置不同的样式。

$('#map').vectorMap({
    markers: {
        'marker-001': { latLng: [70.24, 120.14], name: '标记点1', style: { r: 8, fill: '#fd2020', stroke: '#000000' } },
        'marker-002': { latLng: [30.04, 70.18], name: '标记点2' },
    }
})

latLng信息可以通过 http://www.gpsspg.com/maps.htm 来获取。