leaflet svg转geojson生成地图

一、介绍

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。它可以通过各种方式生成地图，如：瓦片图，img，geojson等方式。

一、首先安装leaflet

npm install --save leaflet

引入leaflet，初始化地图

  import L from "leaflet"
  import "leaflet/dist/leaflet.css"
  
  var map = L.map('map').setView([29.04656, 112.86254], 8);
  

创建html节点

<div ref="mapRef" id="map"></div>

二、加载瓦片图的方式。

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 19, 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
}).addTo(map);

也可以通过DataV.GeoAtlas地理小工具系列

获取地区的geojson的接口数据。

fetch("https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json")
  .then((data) => {
      L.geoJSON(data, { 
          style: function (feature) {
              return {color: feature.properties.color};
          } 
     }).bindPopup(function (layer) { 
         return layer.feature.properties.description; 
     }).addTo(map);
  });

三、加载自定义svg地图

可以将svg地图先转为png格式，在使用imageOverlay进行贴图。

 L.imageOverlay('/static/map.png', [
            [ 51.52567364513793, -0.13149261474609378 ],//左上边界
            [51.482358397135215, -0.05767822265625001] //右下边界
        ]).addTo(map.value);

也可以使用svg2geojson转成geojson，再使用。 首先安装svg2geojson

// 使用前的全局安装（只需安装一次）
npm install -g svg2geojson

处理svg文件

1.绘制 svg 图片，尽量使用 path 来绘制，否则在转换成 geojson 时可能会出问题  
2.获取 svg 的边界信息
var box = document.getElementsByTagName('svg')[0].getBBox();
console.log(box.x, box.y, box.x + box.width, box.y + box.height);
3.在svg文件加入代码。
<MetaInfo xmlns="http://www.prognoz.ru">
    <Geo>
        <GeoItem 
                X="{{svg图片边界的X坐标（小）}}" Y="{{svg图片边界的Y坐标（小）}}" 
                Latitude="{{geojson边界的伟度坐标（高）}}" Longitude="{{geojson边界的经度坐标（左）}}"
        />
        <GeoItem 
                X="{{svg图片边界的X坐标（大）}}" Y="{{svg图片边界的Y坐标（大）}}" 
                Latitude="{{geojson边界的伟度坐标（低）}}" Longitude="{{geojson边界的经度坐标（右）}}"
        />
    </Geo>
</MetaInfo>

生成geojson文件

// 然后在svg存放的目录运行 生成 geojson 文件
svg2geojson file.svg

然后生成地图

L.geoJSON('file.json').addTo(map);