Блог

Главная - Вопросы по программированию - Значок Custon SVG на виджете карты ArcGIS

Значок Custon SVG на виджете карты ArcGIS

#arcgis #arcgis-js-api

#arcgis #arcgis-js-api

Вопрос:

Я должен добавить файл custon SVG вместо значка навигации из ArcGIS в виджете «locate» («esri-icon-locate»). Здесь проблема в том, что значок по умолчанию отображается в верхней части пользовательского файла svg. Есть ли какой-либо способ скрыть значок по умолчанию?

 view.when(_ => {
        const n = document.getElementsByClassName("esri-icon-locate");
        if (n amp;amp; n.length === 1) {
            n[0].classList  = " mapnavigation"
        }
    });

и css,

 .mapnavigation:before{
  display: block;
  background: url('mapnavigation.svg');
  background-repeat: no-repeat;
  background-size: 17px 17px;
  background-color: #ffffff;
}

Ответ №1:

Вы были действительно близки к решению, вам просто нужно сделать его единственным классом узла. Взгляните на пример, который я привел для вас,

 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>Locate button | Sample | ArcGIS API for JavaScript 4.18</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .my-svg-icon {
      background: url(https://openlayers.org/en/latest/examples/data/square.svg);
      width: 20px;
      height: 20px;
    }
  </style>
  <script src="https://js.arcgis.com/4.18/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/widgets/Locate"
    ], function (Map, MapView, Locate) {
      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-56.049, 38.485, 78],
        zoom: 3
      });

      var locateBtn = new Locate({
        view: view
      });

      // Add the locate widget to the top left corner of the view
      view.ui.add(locateBtn, {
        position: "top-left"
      });

      view.when(_ => {
        const n = document.getElementsByClassName("esri-icon-locate");
        if (n amp;amp; n.length === 1) {
          n[0].classList = 'my-svg-icon';
        }
      });

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>

Комментарии:

1. Спасибо за ответ Cabesuon. Я пробовал тот же способ, но он не работает. Если мы удалим класс ‘esri-icon-locate’, пользовательский значок также исчезнет. Есть ли у нас какое-либо другое решение? Спасибо.

2. Когда я изменил свой код на ‘n[0].classList = ‘esri-icon mapnavigation», то в консоли отображается ‘<span aria-hidden=»true» class=»esri-icon esri-icon-locate esri-icon mapnavigation»></s pan>’. Класс по умолчанию добавляется к строке класса.

3. Извините, я намеревался заменить стиль, включая стиль, который вы хотите сохранить. Там не должно быть , это была опечатка. Повторите попытку n[0].classList = 'esri-icon my-svg-icon'; . Я удалю комментарий с опечаткой.

4. Я уже пробовал этот способ. Элемент стал <span aria-hidden=»true» class=»esri-icon mapnavigation»></ span>. Но оба значка ис чезли. Класс ‘esri-icon-locate’ является обязательным для отображения значков.

5. Я изменил класс ‘.mapnavigation’ Я использовал пользовательский значок в качестве фона, позже изменил его на ‘content’. т.е. «содержимое: url (‘mapnavigation.jpg ‘);». У меня это сработало.