后端如何将geojson 生成图片
时间: 2023-02-06 12:17:16 浏览: 78
可以使用地图可视化库(如 leaflet)来将 geojson 数据呈现为地图图像。具体来说,可以通过以下步骤来实现:
1. 安装地图可视化库,如通过使用 npm 命令安装 leaflet:
```
npm install leaflet
```
2. 在 HTML 文件中引入地图可视化库的 CSS 样式表和 JavaScript 脚本文件:
```html
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
```
3. 在 HTML 文件中创建一个用于呈现地图的 div 元素,并为其指定宽度和高度:
```html
<div id="map" style="width:600px; height:400px"></div>
```
4. 在 JavaScript 代码中创建地图,并将 geojson 数据添加到地图上:
```javascript
// 创建地图
var map = L.map('map').setView([51.505, -0.09], 13);
// 加载底图
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}).addTo(map);
//