在回调(WebGIS应用程序)上分配的事件之后访问方法

Question

背景

我正在使用WebGIS和ArcGIS JS开发一个ArcGIS应用程序。我是新来的js，所以请容忍我。

在使用js学习和开发时，我试图遵循一些规则，如异步模块定义( ArcGIS JS鼓励的)、揭示模块模式和标准样式。当然，我还是没能正确地理解它们。

这段代码构建在这个响应模板之上:github.com/Esri/ built map-js。

目标

这个应用程序消耗了一些ArcGIS REST服务(MapServer)。假设我对它们没有任何控制(我可以访问服务器，但这是我不知道的另一件事)。

功能之一是根据用户使用复选框进行的选择，过滤特定层(特征层具有多边形几何)。选中复选框时，只能看到该层的某些部分。如果进行了多次检查，则该层的可见部分必须有不同的颜色。

码

我使用一个示例ArcGIS服务设置了这个应用程序的示例。它可以在这个回购：https://github.com/iled/fiddle中获得。

(对不起，我没能把它弄得乱七八糟)

下面我简要描述代码的相关部分(文件app/js/map.js)

添加层

添加映射后，服务上的所有层都会自动加载并放置在带有复选框的树中。

restUrl = "http://sampleserver5.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer"
var mapServiceLayer = new ArcGISDynamicMapServiceLayer(restUrl, opt)
map.addLayer(mapServiceLayer)

复选框

这些复选框使用给定属性(facilityid)的所有可能值构建在其中的一个层(中档/水表-块视图--这是layer1中的最后一个)，因此它们应该过滤该层。

以下是获取这些值的方法。

var queryOperators = function (mapServiceLayer) {
  var queryTask = new QueryTask("http://sampleserver5.arcgisonline.com/arcgis/rest/services/Water_Network/MapServer/23")
  var query = new Query()
  var mps = mapServiceLayer
  query.returnGeometry = false
  query.outFields = ["facilityid"]
    // toy query to fetch all records
  query.where = "1 = 1"
  query.returnDistinctValue = true
  query.orderByFields = ["facilityid ASC"]
  queryTask.execute(query, addOperatorsList)
}

然后由回调方法生成复选框列表。

var addOperatorsList = function (operatorsFeatureSet) {
  var operatorsCount = operatorsFeatureSet.features.length
  var operatorsNames = []
  var operatorsList = []
  var operatorsDiv = dom.byId("operatorList")
  var line = "<input  id='operatorCheckBox_'"
  for (var i = 0; i < operatorsCount; i++) {
    operatorsNames.push(operatorsFeatureSet.features[i].attributes["facilityid"])

    domConstruct.create("p", {
      id: "operatorCheckBox_" + i,
      style: "font-size:10px"
    }, operatorsDiv)

    domConstruct.create("label", {
      for: "opbox_" + i,
      innerHTML: operatorsNames[i]
    }, "operatorCheckBox_" + i)

    var cbox = new CheckBox({
      id: "opbox_" + i,
      value: operatorsFeatureSet.features[i].attributes["facilityid"],
      checked: false,
      onChange: function (evt) {
        console.log('value:', this.value)
        querySegments(this.value)
      }
    })
    cbox.placeAt("operatorCheckBox_" + i, "first")
  }
}

过滤层

以下是其中一个问题所在，方法setLayerDefinitions在消息Uncaught TypeError: this.setLayerDefinitions is not a function中失败。我知道这是不应该的，在这里，this只是一个占位符，我要放在那里的东西。

var querySegments = function (operator_id) {
    // build the query
    var queryStatement = "facilityid = " + operator_id
    var layerDefinitions = [queryStatement]
    console.log(layerDefinitions)
    this.setLayerDefinitions(layerDefinitions)
}

当事件触发时调用此函数，该连接是在回调函数上定义的。怎么从这里到达目标层对我来说有点模糊.

示例

如果用户选中了数字128608的框，结果应该如下所示(取自ArcGIS user地图查看器)。

Problems/Questions

1. 在从切换复选框中获取数据后，我无法到达该层以调用筛选它的方法。
2. 如何从图层列表中隐藏/删除layer0和layer1 (标签和复选框)？更广泛地说，如何格式化这个列表？
3. 经过选择和过滤，如何给每个过滤后的折线赋予不同的颜色？

请让我知道我是否能以任何方式改进这个问题。

我考虑在其他StackExchange站点(所以，gis)上发布这篇文章，但我决定在这里发布它，因为它涉及更大的代码评审；如果有人解释我不应该这样做的话，我也会很感激。

Answer 1

1. 从上面发布的代码行中，可以将this.setLayerDefinitions()替换为mapServiceLayer.setLayerDefinitions()。因此，您必须以这样的方式将查询的层从函数queryOperators()传递到querySegments()：

var queryOperators = function(mapServiceLayer) {
  ...
  queryTask.execute(query, function(res) {
    addOperatorsList(res, mps);
  });
};
var cbox = new CheckBox({
  ...
  onChange: function(evt) {
    querySegments(this.value, layer);
  }
});
var querySegments = function(operator_id, layer) {
  ...
  layer.setLayerDefinitions(layerDefinitions);
};

1. 我不知道您想做什么，但我想这个dojo示例中的第一个示例将适合您的需要https://dojotoolkit.org/reference-guide/1.10/dojo/store/Observable.html#dojo-store-observable
2. 将新符号应用到选定的折线上，然后将该图形添加到地图中。

var cbox = new CheckBox({
    ...
    onChange: function(evt) {
      ...
      var polyline = operatorsFeatureSet.features[i];
      showPolyline(polyline);
    }
  });

以及外部的addOperatorsList函数：

var showPolyline = function(polyline) {
  function randomColor() {
    return Math.floor((Math.random() * 255) + 0);
  }
  var symbol = new SimpleLineSymbol();
  symbol.setColor(new Color([randomColor(), randomColor(), randomColor(), 1]));
  var graphic = new Graphic(polyline, symbol);
  map.graphics.add(graphic);
};