datasette-leaflet

Datasette插件，添加Leaflet JavaScript库。

越来越多的Datasette插件依赖于Leaflet JavaScript映射库。如果安装了多个插件，每个插件都有自己的加载Leaflet的方式，可能会导致重复加载（多个版本）。

这个库旨在解决这个问题，通过提供一个所有插件都可以依赖的单个插件来以可重用的方式加载Leaflet。

使用此库的插件

• datasette-leaflet-freedraw
• datasette-leaflet-geojson
• datasette-cluster-map

安装

您可以这样安装此插件

datasette install datasette-leaflet

通常此插件将是其他插件的依赖项，因此您安装它们时应该会自动安装。

用法

该插件将leaflet.js和leaflet.css作为静态文件提供。它提供了两个自定义模板变量，包含这两个文件的URL。

• {{ datasette_leaflet_url }}是JavaScript的URL
• {{ datasette_leaflet_css_url }}是CSS的URL

这些URL也作为全局JavaScript常量提供

• datasette.leaflet.JAVASCRIPT_URL
• datasette.leaflet.CSS_URL

JavaScript打包为JavaScript模块。您可以从自定义模板动态导入JavaScript，如下所示

<script type="module">
import('{{ datasette_leaflet_url }}')
  .then((leaflet) => {
    /* Use leaflet here */
  });
</script>

您可以这样加载CSS

<link rel="stylesheet" href="{{ datasette_leaflet_css_url }}">

或动态加载如下

<script>
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '{{ datasette_leaflet_css_url }}';
document.head.appendChild(link);
</script>

以下是一个加载JavaScript和CSS并渲染地图的完整示例

<script type="module">
window.DATASETTE_CLUSTER_MAP_TILE_LAYER = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS = {"maxZoom": 19, "detectRetina": true, "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors"};
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '{{ datasette_leaflet_css_url }}';
document.head.appendChild(link);
import('{{ datasette_leaflet_url }}')
  .then((leaflet) => {
    let div = document.createElement('div');
    div.style.height = '400px';
    document.querySelector('.content').appendChild(div);
    let tiles = leaflet.tileLayer(
        window.DATASETTE_CLUSTER_MAP_TILE_LAYER,
        window.DATASETTE_CLUSTER_MAP_TILE_LAYER_OPTIONS
    );
    let map = leaflet.map(div, {
        center: leaflet.latLng(0, 0),
        zoom: 2,
        layers: [tiles]
    });
  });
</script>