【收藏】Arcgis api4.x自定义控件、模拟arcgis api控件风格、使用arcgis api图标文字、实现控件位置自定义。

1.效果

2.实现 

2.1 自定义控件

模拟arcgis api风格的控件，只需要使用Esri提供的CSS类名；下面代码中，"esri-widget esri-widget--button esri-widget esri-interactive"类名控制控件的基本样式，"esri-icon-save"类名就是Esri的图标CSS类名，下面放出Esri图标字体查阅网址。

      自定义控件效果： 

<div
   id="saveLayer"
   class="esri-widget esri-widget--button esri-widget esri-interactive"
   title="保存图层"
>
   <span class="esri-icon-save"></span>
</div>

view.ui.add("saveLayer", "top-left");

Esri图标字体https://developers.arcgis.com/javascript/latest/esri-icon-font/

---

2.2 预定义控件位置

Arcgis api提供了8个控件的摆放位置，分别是"bottom-leading" | "bottom-left" | "bottom-right"

 | "bottom-trailing" | "top-leading" | "top-left" | "top-right" | "top-trailing"；

       这里演示指北针、图层列表、家控件的添加，这里需要注意的是，图例的上下位置是和代码前后执行顺序相关，例如添加指北针控件的代码比加载图层列表控件的代码先执行，因此指北针控件肯定在图层列表控件的上方。

 // 指北针
  var compass = new Compass({
    view: view, // 绑定到地图视图
  });
  view.ui.add(compass, "top-left");
  // 图层列表
  view.ui.add(
    new Expand({
      view: view,
      content: new Legend({
        view,
      }),
      expandIcon: "list-bullet",
      expanded: false,
    }),
    "top-left"
  );
  // 家
  view.ui.add(
    new Home({
      view,
    }),
    "top-left"
  );

2.3 自定义控件位置

不使用预定义的控件位置，可以使用"manual"控制位置。使用"manual"允许你将组件放置在一个容器中，你可以使用css将它放置在任何地方。但是，使用"manual"，就需要自己准备控件容器，如何准备控件容器，在上文的实现自定义控件有讲解。

view.ui.add("saveLayer", "manual");

#saveLayer{
  position: absolute;
  left: 50%;
  bottom: 50%;
}

(创作不易，如果文章对你有帮助，可以点个赞鼓励下博主噢！)

问题咨询Q:1476701700