Feature Layer with selection（ArcGIS JS Api 图上点选）

Demo是编程之母，API是编程之父。面对一个陌生的框架，直接从api开始写代码是不明智的，最好的办法就是按照Demo来写，这样既能很快的吧Api用起来，又能避免摸着石头过河的愚蠢行为。用的差不多了，需要更多的功能扩展，这时候就可以依葫芦画瓢看着api来写功能。api也是人写的，每个人有每个人的思维方式，从demo起步是熟悉某种api思维方式的最好方式。有些人说，抄例子太低级，我认为，抄例子能解决的事儿，绝不要自命清高地自己琢磨，生命有限，把时间用在解决问题上，而不是思考无意义的问题。

Arcgis api for JS中，选择的例子中只提供了通过缓冲区选择的方式，下面提供一个点选的。

描述
This sample shows how to use the draw toolbar to select gas fields from a feature layer. The gas fields are displayed using a feature layer with ONDEMAND mode. On-demand mode retrives selected features and features within the current extent.

Click the select fields button then draw a rectangle on the map.The toolbar's onDrawEnd event fires when you finish sketching the selection rectangle. Notice that the sketch is used with the FeatureLayer's selectFeatures method to perform a spatial query.
dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
selectionToolbar.deactivate();
selectQuery.geometry = geometry;
featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
});

After the features are selected onSelectionComplete fires and the total gas production for the selected fields is calculated.
代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta http-equiv="X-UA-Compatible" content="IE=7" />

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>

<title>Layer in a map service - [ON-DEMAND]</title>

<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">

<script type="text/javascript">djConfig = { parseOnLoad:true };</script>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>

<script type="text/javascript">

dojo.require("esri.map");

dojo.require("esri.layers.FeatureLayer");

var selectionToolbar, featureLayer;

function init() {

var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) );

var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true });

dojo.connect(map, "onLoad", initSelectToolbar);

var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");

map.addLayer(baseMapLayer);

var fieldsSelectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));

fieldsSelectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255,0,0]), 2));

var content = "<b>Status</b>: ${STATUS}" +

"<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +

"<br><b>Total Acres</b>: ${APPROXACRE}" +

"<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";

var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);

featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{

mode: esri.layers.FeatureLayer.MODE_ONDEMAND,

infoTemplate: infoTemplate,

outFields: ["*"]

});

featureLayer.setDefinitionExpression("PROD_GAS='Yes'");

featureLayer.setSelectionSymbol(fieldsSelectionSymbol);

dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction);

dojo.connect(featureLayer, "onSelectionClear", function(features) {

dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>";

});

map.addLayer(featureLayer);

}

function initSelectToolbar(map) {

selectionToolbar = new esri.toolbars.Draw(map);

var selectQuery = new esri.tasks.Query();

dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {

selectionToolbar.deactivate();

selectQuery.geometry = geometry;

featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);

});

}

function sumGasProduction(features) {

var productionSum = 0;

//summarize the cummulative gas production to display

dojo.forEach(features, function(feature) {

productionSum = productionSum + feature.attributes.CUMM_GAS;

});

dojo.byId('messages').innerHTML = "<b>Selected Fields Production: " + productionSum + " mcf. </b>";

}

dojo.addOnLoad(init);

</script>

</head>

<body class="claro">

<button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>

<button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br>

<div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>

<span id="messages"></span>

</body>

</html>

参考：http://maps.rosreestr.ru/arcgis_js_api/sdk/help/jssamples/fl_selectfeatures.html

本文转自 huohe2009 51CTO博客，原文链接:http://blog.51cto.com/zhaojie/1352057

Feature Layer with selection（ArcGIS JS Api 图上点选）相关推荐

三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
02 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制
概述上一篇文章通过纯前端的方式实现了ArcGIS JS API和eCharts的普通二维图表绘制,因为这些图表绘制其实是跟地理坐标无关的,只需要设置图表的位置即可,所以仅仅用了纯前端的方式去实现.这 ...
04 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
基于ArcGIS JS API 4.11实现对FeatureLayer的多变量渲染
文章目录需求背景需求分析开发过程效果图注意事项参考链接在线示例需求背景有一个二维数组,里面包含几万个表示高度的值,现在要把这些高度值在地图上展示出来.可以通过小立方体的方式展现,长宽 ...
ArcGIS JS API加载GeoServer发布的WFS服务
文章目录前言主要代码总结参考链接前言 WFS(Web Feature Service),OGC标准下的要素服务.其支持的主要操作如下: GetCapabilities (discovery ...
ArcGIS JS API popup弹窗
*使用ArcGIS JS API 4.19 一.要素服务popup 原始弹窗由popup微件控制,view对象都自带默认的popup,格式可以由Featurelayer的popupTemplate属性 ...
基于ArcGIS JS API实现的两种距离和面积测量方式
文章目录前言开发思路主要代码效果测试效果图测试页面开发总结参考链接前言在一些地图地图应用中,距离.面积测量属于基础功能.ArcGIS API for JavaScript有单独提供 ...
ArcGIS JS API实现地图场景视频融合
ArcGIS JS API实现地图场景视频融合效果展示实现步骤 1.创建地图场景 2.引入相应模块并创建地图场景 3.获取点坐标 4.生成网格 5.生成图形并添加进场景中总结完整代码效果展示 ...
ArcGIS JS API 4.x（二）加载 3.x所说的动态地图服务图层
前言:在使用arcgis js api 3.x的时候,有切片地图服务和动态地图服务,从3.x到4.x版本过渡的时候,希望能够找到和3.x对应的类,在上篇博客中,我们找到了和ArcGISTiledMap ...

Feature Layer with selection（ArcGIS JS Api 图上点选）

Feature Layer with selection（ArcGIS JS Api 图上点选）相关推荐

最新文章

热门文章