我想实现的OpenStreetMap的通过传单在我JHipster应用程序并使用本地安装的单张文件。使用链接leaflet.css
和leaflet.js
在线文件可以正常工作。将Leaflet安装为node_module并将Leaflet导入我的应用程序是错误的。我正在将maven用于我的应用程序,并尝试从Leaflet主页重现该示例。
在我的index.html的开头部分简单地包含以下几行就可以了。(这在Leaflet主页上的教程中进行了说明。)index.html
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="crossorigin=""></script>
...
</head>
node_module
通过npm
如下方式安装传单:
npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet
然后,将本地安装的模块包含在我index.html
文件的头部
<head>
...
<link rel="stylesheet" href="../../../node_modules/leaflet/dist/leaflet.css">
<script src="../../../node_modules/leaflet/dist/leaflet.js"></script>
...
</head>
根本不起作用。没有显示地图。为什么与在线文件链接一样不那么直接?
按照README
Jhipster的步骤安装并node_module
通过npm
如下方式安装传单:
npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet
然后添加以下行来导入leaflet.js
和leaflet.css
。在src/main/webapp/app/vendor.ts
添加:
import 'leaflet/dist/leaflet.js';
并src/main/webapp/content/css/vendor.css
添加:
@import '~leaflet/dist/leaflet.css';
这将向我显示地图,但标记图标显示为残破图像。在README
他们说,还有几个步骤要做,但我无法找到关于这些步骤任何东西。谁能说出需要做些什么?
该行为因将传单与webpack结合而闻名,请参阅传单#4698。
这是为我解决的配置:
按照README
Jhipster的步骤安装并node_module
通过npm
如下方式安装传单:
npm install --save --save-exact leaflet
npm install --save-dev --save-exact @types/leaflet
然后添加以下行来导入leaflet.js
和leaflet.css
,并显式指定默认的图标图像资源。在src/main/webapp/app/vendor.ts
添加:
import 'leaflet/dist/leaflet.js';
declare let L;
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
iconUrl: require('leaflet/dist/images/marker-icon.png'),
shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});
并src/main/webapp/content/css/vendor.css
添加:
@import '~leaflet/dist/leaflet.css';
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句