ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述
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 property是Point,您可以使用这个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使用此技巧。这些符号是CartographicLineSymbol、SimpleFillSymbol、SimpleLineSymbol和SimpleMarkerSymbol。
链式方法
链式方法调用可以减少您编写的代码。例如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