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

如何解决arcGIS 4.18 定位小部件自定义图标

我必须在 arcGIS 4.18 上更改定位小部件上的默认图标。默认的图标类是 esri-icon-locate 如何将其更改为类 'esri-icon-navigation'？

我尝试使用属性“iconClass”。但没有反映在地图图标中。请找到下面的代码，

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

解决方法

KER，

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

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

无论如何，我会给出一个肮脏的解决方案，只需将您想要的课程重叠即可，

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>