Как правильно импортировать листовку в приложение jhipster, работающее через веб-пакет?- отсутствует значок маркера - PullRequest
2 голосов
/ 22 июня 2019

Я пытаюсь реализовать 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.csssrc/main/webapp/app/vendor.ts добавление:

import 'leaflet/dist/leaflet.js';

и в src/main/webapp/content/css/vendor.css добавление:

@import '~leaflet/dist/leaflet.css';

Это отобразит мне карту НО значок маркера отображается каксломанное изображение.В README они говорят, что есть еще несколько шагов, но я ничего не могу найти об этих шагах.Может кто-нибудь сказать, что нужно сделать дополнительно?

1 Ответ

0 голосов
/ 26 июня 2019

Известно, что поведение сочетания листовки с веб-пакетом см. Проблема листовки # 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';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...