在Svelte上使用leaflet-d3

问题描述

我必须在svelte上使用leaflet-d3创建一个hexmap.我正在使用已针对其他内容进行测试的代码.可以在

解决方案

正如本期中所述，即使不导出任何内容，您也需要以某种方式导入 leaflet-d3 ，因为它将所有内容添加到 L 对象.

我通过在代码的开头添加 import" @ asymmetrik/leaflet-d3"; 来实现此目的.您可能需要告诉 eslint 忽略该行带有副作用的导入，否则应该没问题.在导入 leaflet-d3 之前，请记住先导入 L ！

 从"svelte"导入{onMount};//从"../lib/maps/generic"导入{createMap}；//从'cache-store'导入{replaceNestedValues};从小叶"进口L；导入传单提供者"；导入"leaflet-minimap"；从传单"导入{标记}；从"d3"导入*作为d3；从"d3-hexbin"导入*作为d3hexbin；导入"@ asymmetrik/leaflet-d3"； 

现在我只得到地图未定义的错误，但这至少解决了一个问题:)

i have to use leaflet-d3 on svelte to create a hexmap. I'm using a code already tested for other stuff. It can be found here.

function createMap(id, config, zoomFunction) {

let initialView = [config.startLat, config.startLng];
if(!config.startLat || !config.startLng){
  initialView = [0,0]
  config.startZoom = 1;
}
let m = L.map(id, {preferCanvas: true, minZoom: config.minZoom, maxZoom: config.maxZoom }).setView(initialView, config.startZoom);
let layers = {
  'Street map': L.tileLayer.provider('OpenStreetMap.Mapnik',{
    maxZoom: 36
  }),
  'Terrain map': L.tileLayer.provider('Esri.WorldImagery',{
    maxZoom: 36
  }),
  'Google Satellite': L.tileLayer('//{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{
    maxZoom: 36,
    subdomains:['mt0','mt1','mt2','mt3']
  }),
  'Google Street': L.tileLayer('//{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
    maxZoom: 36,
    subdomains:['mt0','mt1','mt2','mt3']
  }),
  'Google Hybrid': L.tileLayer('//{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}',{
    maxZoom: 36,
    subdomains:['mt0','mt1','mt2','mt3']
  })
};

if(!config.defaultMap) config.defaultMap = 'Street map';

layers[config.defaultMap].addTo(m);

if(config.showMinimap == true){
  let minimapLayer = new L.tileLayer.provider('OpenStreetMap.Mapnik',{
    maxZoom: 13
  });
  let minimap = new L.Control.MiniMap(minimapLayer, {toggleDisplay: true}).addTo(m);
}

L.control.layers(layers).addTo(m);

if(config.showScale == true){
  let scaleObject = L.control.scale({"metric":true, "imperial":false});
  scaleObject.addTo(m);
}

let hexbinLayer = L.hexbinLayer().addTo(map);




return m;
}

The problem is when i use

let hexbinLayer = L.hexbinLayer().addTo(map);

it says

I imported the library like:

  import * as d3 from 'd3';
  import L from 'leaflet';

And on the index.html i imported, using examples:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha512-FHsFVKQ/T1KWJDGSbrUhTJyS1ph3eRrxI228ND0EGaEp6v4a/vGwPWd3Dtd/+9cI7ccofZvl/wulICEurHN1pg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-hexbin.min.js" integrity="sha256-ikdJu86qkbPypZwSAqs06fEeiNYpdjwHWxXYbbrCeGY=" crossorigin="anonymous"></script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin="anonymous"></script>

<script src="https://cdn.jsdelivr.net/npm/@asymmetrik/[email protected]/dist/leaflet-d3.min.js" integrity="sha256-vbhDr00YfmTSp2F0FT7sIVKE56+ANHBpdW51fs3Zbko=" crossorigin="anonymous"></script>

I think i have problem of synchronization of libraries. Some help?

------- Edit

Also i have this message on the console

解决方案

As it says in this issue, you need to somehow import leaflet-d3 even though it doesn't export anything, because it adds everything to the L object.

I achieved this by adding import "@asymmetrik/leaflet-d3"; at the beginning of your code. You may need to tell eslint to ignore imports with side effects for the line, otherwise, you should be fine. Keep in mind to import L before importing leaflet-d3!

  import { onMount } from "svelte";
  // import { createMap } from '../lib/maps/generic';
  // import {replaceNestedValues} from 'cache-store';

  import L from "leaflet";
  import "leaflet-providers";
  import "leaflet-minimap";
  import { marker } from "leaflet";
  import * as d3 from "d3";
  import * as d3hexbin from "d3-hexbin";

  import "@asymmetrik/leaflet-d3";

Now I just get the error that map is undefined, but that's at least one problem solved :)

这篇关于在Svelte上使用leaflet-d3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！