如何解决在Svelte上使用leaflet-d3
我必须在svelte上使用leaflet-d3创建一个hexmap。我正在使用已针对其他内容进行测试的代码。可以找到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','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}','Google Hybrid': L.tileLayer('//{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}','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;
}
问题是我何时使用
let hexbinLayer = L.hexbinLayer().addTo(map);
说
leafletSrc.hexbinLayer不是函数
我导入的库如下:
import * as d3 from 'd3';
import L from 'leaflet';
然后使用示例,在我导入的index.html上:
<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/d3-hexbin@0.2.2/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/leaflet-d3@4.4.0/dist/leaflet-d3.min.js" integrity="sha256-vbhDr00YfmTSp2F0FT7sIVKE56+ANHBpdW51fs3Zbko=" crossorigin="anonymous"></script>
我认为我有图书馆同步的问题。有帮助吗?
-------编辑
我也在控制台上收到此消息
解决方法
正如本期杂志所述,即使不导出任何内容,也需要以某种方式导入leaflet-d3
,因为它将所有内容添加到L
对象中。
我通过在代码的开头添加import "@asymmetrik/leaflet-d3";
来实现这一点。您可能需要告诉eslint
忽略该行带有副作用的导入,否则应该没问题。请记住在导入L
之前先导入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";
现在我只得到地图未定义的错误,但这至少解决了一个问题:)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。