d3.js - 在 svelte 上使用 Leaflet-d3
问题描述
我必须在 svelte 上使用 Leaflet-d3 来创建一个 hexmap。我正在使用已经测试过其他东西的代码。可以在这里找到。
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;
}
问题是当我使用
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";
现在我得到了地图未定义的错误,但这至少解决了一个问题:)
推荐阅读
- json - Getting .apply is not a function
- java - 将 chromedriver.exe 提取到 java 文件,然后在 selenium 中导入包
- jdbc - 在 Micronaut 中使用 @Transactional 而不使用 Hibernate
- unit-testing - Jest unit-testing if super() is called
- firebase - 用于检查角色或公司的 Firestore 规则功能
- python - 更改代码后权限被拒绝
- wordpress - 自定义帖子类型的 Ajax 过滤器
- android - 尝试在 Android Studio 中构建 SMS 应用时出现“访问被拒绝”错误
- ios - iPhone X - UIPageControl 黑条
- git - GIT 分支——我们可以只靠一个主人生存吗?