datasette-leaflet

Datasette 插件，添加了 Leaflet JavaScript 库。

越来越多的 Datasette 插件依赖于 Leaflet JavaScript 地图库。它们各自有加载 Leaflet 的方式，如果安装了多个插件，这可能导致多次加载（甚至加载不同版本）。

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

使用此插件的插件

安装

您可以按如下方式安装此插件

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：

import('{{ datasette_leaflet_url }}') .then((leaflet) => { /* 在此处使用 leaflet */ }); ">

<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 并渲染地图

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": "© OpenStreetMap 贡献者"}; 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 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": "© \"https://www.openstreetmap.org/copyright\">OpenStreetMap 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>

datasette-leaflet 作者 simonw

README 源代码

datasette-leaflet

安装

用法