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. 
代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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

相关文章
|
JSON JavaScript API
geoserver图层属性查询及查询结果转换为arcgis js api能使用的格式
一个项目使用了ArcGIS JS API开发GIS展示层,但GIS服务使用了Geoserver,这时加载Geoserver数据和查询数据就和之前完全不一样了,以下介绍下我使用ArcGIS JS API+Geoserver开发过程中解决Geoserver图层属性查询的一个方案。
1257 0
|
API JavaScript
国内免费arcgis jsapi arcgis jsapi国内镜像
arcgis js3.20 api地址 http://devgis.majcms.com/lib/arcgis/3.20/init.js arcgis js4.
2257 0
|
7月前
|
人工智能 数据可视化 API
ArcGIS API for Python
ArcGIS API for Python
34 0
|
11月前
|
JavaScript 前端开发 应用服务中间件
Arcgis api for javascript 详细部署
Arcgis api for javascript 详细部署
|
人工智能 数据可视化 数据管理
ArcGIS API for Python
ArcGIS API for Python
78 0
|
JavaScript 前端开发 定位技术
ArcGIS API For JavaScript官方文档(六)之设置范围
ArcGIS API For JavaScript官方文档(六)之设置范围
|
存储 JSON 前端开发
ArcGIS API For JavaScript官方文档(一)之默认API配置
ArcGIS API For JavaScript官方文档(一)之默认API配置
|
数据可视化 数据管理 API
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
​​​​​​​ARCGIS API for Python进行城市区域提取
arcgis api 3.X 修改自带弹窗样式 2022年6月12日
自带的弹窗介绍: arcgis api 3.X 修改自带弹窗样式插图 /*修改原有弹窗的css样式*/ /* 弹窗整体 */ .esriPopup { font-size: 16px; box-shadow: 10px 10px 5px #888888; } .esriPopup .sizer { position: relative; width: 400px; /* 弹窗宽度 */ z-index: 1; } /* 标题部分 */ .esriPopup .titlePane { background-color: rgba(7
|
JavaScript 前端开发 数据可视化
ArcGIS API for JavaScript 4.10 重大更新,强势来袭!
ArcGIS API for JavaScript 4.10 版引入了大量新功能,并对原有功能进行了增强: 引入了一种新的建筑图层类型BuildingSceneLayer,用于可视化BIM数据; 新增众多微件,如3D剖切、草图绘制、二维面积和距离测量、改善编辑工作流的FeatureTemplates微件等; 地图中的所有图层均可使用WebGL进行绘制,从而提升渲染性能; 通过更高性能的 WebStyleSymbols增强了3D体验; 还有诸多精彩变化,下文将为您一一呈现。
2551 0