ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述

ArcGIS API For JS官方文档解析目录

Working with graphics

    ArcGIS JavaScript API允许在地图上绘制graphic(图形)。graphic可以由用户作为标记或输入绘制,也可以由应用程序根据任务绘制。例如,应用程序可能会将查询结果作为graphics添加到地图。

    您可以为您的ArcGIS JavaScript API地图创建和添加一个或多个graphic图层。一个GraphcsLayer包含一个Graphic对象的数组,该数组初始是空的,但是在地图加载之后任何时候都可以添加graphic。

    将graphic想象为4件事物的容器:geometry、symbol、attrubutes和info template.

  • geometry决定graphic的位置。可以是point、multipoint、polyline、polygon。
  • symbol决定graphic的外观,geometry是point、multipoint的symbol可以是marker symbol,polyline的symbol可以是line symbol、polygon的symbol可以是fill symbol。
  • attributes是描述graphic的名称-值对。如果您创建graphic,您需要分配attributes。如果graphic是在一个图层上响应执行任务而创建的,则graphic自动包含该图层的字段属性。一些任务允许您限制返回到结果graphic的attributes,Query.outFields是限制任务返回attributes的一个示例。
  • info template定义当graphic被点击时,各种attribute将如何出现。

    四个属性geometry、symbol、attributes和info template都是可选的。许多task结果被作为FeatureSet中的graphic对象被返回。这些graphic返回时只有geometry和attributes。如果您想将graphic添加到地图中,必须为它们定义和设置符号。

    如果您正在编写允许用户在地图上绘制graphic的代码,则Draw工具条使此变得非常容易。Draw工具条是一个类,可以帮助您捕获用户在屏幕上绘制的geometry,然后您可以定义一个symbol并将它应用到新graphic对象中的geometry中。Drawing tools sample演示了这个工作过程。

    随着task类型的不同,将task结果添加到地图上的方式也会有所不同。如果task返回一个FeatureSet,那么您就会得到一个graphic数组(FeatureSet.features),可以通过遍历该数组将graphic添加到地图。下面的代码显示了如何使用QueryTask的结果完成这些。注意,代码为graphic定义了一个symbol和一个info template。

queryTask.on("complete", function(featureSet) {
  map.graphics.clear();
  var symbol = new SimpleFillSymbol();
  // Loop through features in the featureSet and add them to the map.
  for (var i=0, il=featureSet.features.length; i<il; i++) {
    // Get the current feature from the featureSet.
    // Feature is a graphic
    var graphic = featureSet.features[i];
    graphic.setSymbol(symbol);
    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.
    map.graphics.add(graphic);
  }
});

    其他task没有提供要素集,但是提供了geometry,您可以使用geometry来创建graphic。一个Locator返回一个或多个AddressCandidates,其中有一个location propertyPoint,您可以使用这个geometry来创建显示地址位置的graphic。如下列代码所示:

for (var i=0, il=candidates.length; i<il; i++) {
  candidate = candidates[i];
  if (candidate.score > 80) {
    var attributes = { 
      address: candidate.address, 
      score: candidate.score, 
      locatorName: candidate.attributes.Loc_name 
    };
    var graphic = new Graphic(candidate.location, symbol, attributes, infoTemplate);
    map.graphics.add(graphic);
  }
}

    有关如何从不同task的结果中创建graphic的更多内容,请参见示例

1、优化graphic和symbol的代码

    下面是在处理graphic及其相关geometry和symbol时可以优化代码的一些方法

    向map中添加graphic

    在将graphic添加到map的graphic图层之前,一定要设置graphic的geometry和symbol。如果graphic已被添加到map,调用setGeometry或者setSymbol将可以对graphic进行重绘。

    效率较低:

var graphic = new Graphic(geometry, defaultSymbol);
map.graphics.add(graphic);
if (isSelected) {
  graphic.setSymbol(highlightSymbol);
}

    更有效率:

var graphic = new Graphic(geometry, isSelected ? highlightSymbol : defaultSymbol);
map.graphics.add(graphic);

    创建和自定义symbol

    创建symbol时,应使用默认symbol构造函数并仅重写自定义属性。在开始自定义symbol之前,请检查每个symbol类型的默认属性集。

    下面的代码通过设置所有属性来创建symbol,即使默认symbol已经是solid line。这样做的效率较低:

var symbol = new SimpleLineSymbol(
  SimpleLineSymbol.STYLE_SOLID,
  new Color([255,0,0]), 1)
);

    下面的代码效率更高。它采用默认symbol,并只重写需要自定义的属性,在本例中是color:

var symbol = new SimpleLineSymbol().setColor(new Color([255,0,0]));

    请注意,您只能对具有默认构造函数的symbol使用此技巧。这些符号是CartographicLineSymbolSimpleFillSymbolSimpleLineSymbolSimpleMarkerSymbol

    链式方法

    链式方法调用可以减少您编写的代码。例如SimpleMarkerSymbol提供返回对象本身的setter方法,允许方法的链式调用。

    效率较低:

var symbol = new SimpleMarkerSymbol();
symbol.setSize(10);
symbol.setColor(new Color([255,0,0]));

    效率较高:

var symbol  = new SimpleMarkerSymbol().setSize(10).setColor(new Color([255,0,0]));

    当要使用链式方法调用时,您需要平衡代码的效率和可读性。如果您避免使用链式调用,您的代码可能会更容易阅读和维护,但是,您将失去链式方法调用所提供的性能优势。

转载自:https://blog.csdn.net/qq_35732147/article/details/79903393

You may also like...

退出移动版