Я пытаюсь реализовать OpenStreetMap через Leaflet в моем приложении JHipster и использовать локально установленные файлы листовок.Использование ссылки на leaflet.css
и leaflet.js
онлайн-файлы работает нормально.Установка листовки как node_module и импорт листовки в мое приложение некорректны.Я использую maven для своего приложения и пытаюсь воспроизвести пример из Leaflet homepage .
Этот подход работает:
Просто включив следующие строки в раздел head моегоindex.html работает отлично.(Это объясняется в учебном руководстве на Leaflet homepage .) index.html
<head>
...
<link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/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
и, следовательно, включение локально установленного модуля в раздел head моего 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
они говорят, что есть еще несколько шагов, но я ничего не могу найти об этих шагах.Может кто-нибудь сказать, что нужно сделать дополнительно?