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.

代码

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

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

<code> </code><code>on iOS devices--></code>

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

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

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

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

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

<code> </code><code><</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>></code>

<code> </code><code>dojo.require("esri.map");</code>

<code> </code><code>dojo.require("esri.layers.FeatureLayer");</code>

<code> </code><code>var selectionToolbar, featureLayer;</code>

<code> </code><code>function init() {</code>

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

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

<code> </code><code>dojo.connect(map, "onLoad", initSelectToolbar);</code>

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

<code> </code><code>map.addLayer(baseMapLayer);</code>

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

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

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

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

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

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

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

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

<code> </code><code>mode: esri.layers.FeatureLayer.MODE_ONDEMAND,</code>

<code> </code><code>infoTemplate: infoTemplate,</code>

<code> </code><code>outFields: ["*"]</code>

<code> </code><code>featureLayer.setDefinitionExpression("PROD_GAS='Yes'");</code>

<code> </code><code>featureLayer.setSelectionSymbol(fieldsSelectionSymbol);</code>

<code> </code><code>dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction);</code>

<code> </code><code>dojo.connect(featureLayer, "onSelectionClear", function(features) {</code>

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

<code> </code><code>map.addLayer(featureLayer);</code>

<code> </code><code>function initSelectToolbar(map) {</code>

<code> </code><code>selectionToolbar = new esri.toolbars.Draw(map);</code>

<code> </code><code>var selectQuery = new esri.tasks.Query();</code>

<code> </code><code>dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {</code>

<code> </code><code>selectionToolbar.deactivate();</code>

<code> </code><code>selectQuery.geometry = geometry;</code>

<code> </code><code>featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);</code>

<code> </code><code>function sumGasProduction(features) {</code>

<code> </code><code>var productionSum = 0;</code>

<code> </code><code>//summarize the cummulative gas production to display</code>

<code> </code><code>dojo.forEach(features, function(feature) {</code>

<code> </code><code>productionSum = productionSum + feature.attributes.CUMM_GAS;</code>

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

<code> </code><code>dojo.addOnLoad(init);</code>

<code> </code><code></</code><code>script</code><code>></code>

<code> </code><code><</code><code>body</code> <code>class</code><code>=</code><code>"claro"</code><code>></code>

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

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

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

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

参考：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 图上点选）

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条