arcGIS 4.18 定位小部件自定义图标

Question

我必须更改 arcGIS 4.18 上“定位”微件的默认图标。默认图标 class 是 esri-icon-locate 如何将其更改为 class、'esri-icon-navigation'?

我正在查看文档， https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Locate.html#iconClass

我已经尝试使用属性、'iconClass'。但没有反映在地图图标中。请在下面找到代码，

  var locateBtn = new Locate({
    view: view,
    // iconClass: '\ue666'
    iconClass: 'esri-icon-navigation'
  });
  view.ui.add(locateBtn, {
    position: "manual",
  });

Answer 1

克尔，

你其实是对的，没有按预期工作。设置 iconClass 应该是解决方案。

有趣的是，如果您检查默认 iconClass 实际上是 esri-icon-north-navigation，这显然不是。

无论如何，我会给出一个肮脏的解决方案，只是重叠你想要的class，

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

<!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%;
    }
  </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 && n.length === 1) {
          n[0].classList += " esri-icon-navigation"
        }
      });

    });
  </script>
</head>

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

</html>

arcGIS 4.18 定位小部件自定义图标

arcGIS 4.18 locate widget custom icon

arcgis

arcgis-js-api