ESRI 自定义主页按钮 GIS JavaScript

ESRI customizing the home button gis javascript

本文关键字:GIS JavaScript 按钮 主页 自定义 ESRI      更新时间:2023-09-26

总体问题 首先请阅读: 当用户单击主页按钮时,如何删除选定的巴士站和选定的巴士路线并缩放到地图:地图?

这就是我要做的。 我有一个JavaScript应用程序,它利用了ArcGIS API for JavaScript以及一些Ajax和JQuery。 我正在尝试自定义主页按钮或创建自己的按钮,这不仅仅是缩放到初始范围。 我尝试通过创建一个称为函数goHome()的按钮来自己执行此操作。 然后在该函数中,我做了一些事情,例如从列表中删除突出显示的所选路线,然后滚动到路线列表的顶部,并删除了当用户单击公交车站以显示时间时可能已填充的任何巴士到达时间。 到目前为止,我已经让它做我想做的所有事情,除了移除当前突出显示的(所选路径)以及与所选路线关联的当前巴士站,然后缩放到我的初始地图范围。

我试图做一些事情,比如设置我想修改的特征层的 setDefinitionExpression,但由于这个函数在我的代码中的位置,它看不到它们。 当我把这个函数放在主函数中时,它给了我 ReferenceError:goHome 没有定义。 所以我把它放在主函数之外,到目前为止一切正常,但无法弄清楚如何让功能层消失。它会给我一个错误说:引用错误: 未定义选定的总线停靠点selectedBusStops.setDefinitionExpression("Route is null");

当用户单击列表中的路由时,它将进入并设置定义表达式以仅显示该所选路由。 喜欢这个:

selectedBusStops.setDefinitionExpression("Route like '%" + routeSlice + "%'");

以下是我的要素图层: ** 这是我无法在另一个函数中使用这些图层的问题。 我用"var"声明了这些,这使它们成为它们所在函数的本地。 删除了"var"并解决了问题,我现在至少可以清除这些功能。**

var selectedBusRoute = new FeatureLayer("http://PROD_RTC_SystemMap/MapServer/4", {
  mode: FeatureLayer.MODE_SELECTION,
  outFields: ["*"],
  infoTemplate: selectedBusRouteTemplate
});
var selectedBusStops = new FeatureLayer("http://PROD_RTC_SystemMap/MapServer/0", {
  mode: FeatureLayer.MODE_ONDEMAND,
  outFields: ["*"],
  infoTemplate: selectedBusStopsTemplate
});

我在想是否有办法以某种方式操纵 esri/dijit/HomeButton 来完成所有这些工作,或者我是否走在正确的轨道上? Esri/github/homebutton

感谢您抽出宝贵时间阅读本文,我感谢所有输入(即使是那些说我的代码看起来像 *# 的输入)。

这是我为正在调用的函数编写的代码:

function goHome() {
  // Reset the Accordian Content Panes and fix naming
  var newTitle = "Bus Arrival Times";
  dijit.byId("pane3").set("title", newTitle);
  var container = dijit.byId("container");
  container.selectChild("RTCBusroutes", true);
  // This will remove old values in Bus Arrival Time pane so Bus Arrival Times will clear
  var results = document.getElementById("results");
  var rowCount = results.rows.length;
  for (var x = rowCount - 1; x > 0; x--) {
    results.deleteRow(x);
  }
  // Removes the Highlight from the currently selected Item in the RTC Bus Routes List pane
  $('.highlight').removeClass('highlight');
  // Scrolls to the top of the List in the RTC Bus Routes Content Pane List
  $('#RTCBusroutes').scrollTop(0);
  // Remove Currently Selected Bus Routes
  // Remove Currently Selectes Bus Stops
  // Zoom to Map Extent
}

这是我添加的按钮:

<button id="homeImg" onclick="goHome()">
  <img id="myImg" src="img/home.png" />
</button>

主页按钮 #homeImg 的 CSS

/* for the Home Button CSS */
#homeImg {
  position: absolute;
  top: 138px;
  left: 28px;
  z-index: 8;
  background-color: #888888;
  opacity: 0.8;
  filter: alpha(opacity=80);
  cursor: pointer;
}

您可以通过在其上调用 .clear() 方法来清除特征层,然后 sm将清除图层中的所有图形。

如果您只想清除选择,请调用 .clearSselection() 方法。

此处还有更多关于其他要素图层方法的文档:

https://developers.arcgis.com/javascript/jsapi/featurelayer-amd.html#methods