Arcgis for Js之featurelayer实现空间查询和属性查询

空间查询和属性查询是常用的两种对数据的检索与查询方式，在本节，将讲述Arcgis for Js下如何实现featurelayer的这两种查询方式，先贴图给大家看看：

实现界面

属性查询

空间查询

看完了效果，下面说说我的实现思路。

首先，实现查询的关键是Query，属性查询时query.where来实现，空间查询时query.geometry来实现，具体代码如下：

1、属性查询

            on(dom.byId("query"), "click", function(event){map.graphics.clear();var name = dom.byId("name").value;var query = new Query();query.where = "name = '"+name+"'";city.queryFeatures(query, function(results) {var features = results.features;console.log(features);map.centerAndZoom(features[0].geometry,8);var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),1),new Color([255,0,0]));map.graphics.add(new Graphic(features[0].geometry,sms));});});

2、空间查询

            var draw = new esri.toolbars.Draw(map);draw.on("draw-end",addGraphicToMap);on(dom.byId("extent"), "click", function(event){map.graphics.clear();map.setMapCursor("pointer");draw.activate(esri.toolbars.Draw.EXTENT);});function addGraphicToMap(evt){map.setMapCursor("default");draw.deactivate();var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255,0,0]),2),new Color([255,255,0,0.25]));map.graphics.add(new Graphic(evt.geometry, sfs));//根据空间进行查询var query = new Query();query.geometry = evt.geometry;city.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){console.log(results);for(var i= 0,length=results.length;i<length;i++){var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),new Color([0,255,255,0.25]));results[i].symbol = sms;city.redraw();}});map.setExtent(evt.geometry.getExtent().expand(2));};

完整代码如下：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/><title>Simple Map</title><link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css"><link rel="stylesheet" href="page.css"><style>html, body, #map {height: 100%;margin: 0;padding: 0;}body {background-color: #FFF;overflow: hidden;font-family: "Trebuchet MS";font-size: 12px;}#map_ctrl{z-index: 99;position: absolute;top: 20pt;right: 10pt;background: #fff;}.button{padding: 3px;background: #eee;text-align: center;font-size: 12px;font-family: "微软雅黑";}.button:hover,.attr_ctrl:hover{background: #ccc;cursor: pointer;}#attr_ctrl{z-index: 99;width: 155px;position:absolute;right: 0px;bottom:5px;text-align: right;}.attr_ctrl{padding: 5px;font-size: 12px;font-family: "微软雅黑";width: 100px;background: #eee;border: 1px solid #000;border-bottom: none;}#map_attr{z-index: 99;font-size: 12px;font-family: "微软雅黑";width: 176px;height: 150px;background: #eee;position: absolute;bottom: 0px;right:0px;border: 1px solid #000;border-bottom: none;}</style><script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script><script src="jquery-1.8.3.js"></script><script src="jquery.page.js"></script><script>var map, mapCenter;require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer","esri/layers/GraphicsLayer","esri/graphic","esri/geometry/Point","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/symbols/SimpleMarkerSymbol","dojo/_base/Color","esri/tasks/query","esri/tasks/QueryTask","dojo/on","dojo/dom","dojo/domReady!"],function(Map,Tiled,FeatureLayer,GraphicsLayer,Graphic,Point,SimpleFillSymbol,SimpleLineSymbol,SimpleMarkerSymbol,Color,Query,QueryTask,on,dom){map = new Map("map", {logo:false,slider: true});var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");map.addLayer(tiled,0);var labelLayer = new GraphicsLayer();map.addLayer(labelLayer,2);mapCenter = new Point(103.847, 36.0473, map.spatialReference);map.centerAndZoom(mapCenter,4);var city = new FeatureLayer("http://localhost:6080/arcgis/rest/services/city/MapServer/0");map.addLayer(city);on(dom.byId("query"), "click", function(event){map.graphics.clear();var name = dom.byId("name").value;var query = new Query();query.where = "name = '"+name+"'";city.queryFeatures(query, function(results) {var features = results.features;console.log(features);map.centerAndZoom(features[0].geometry,8);var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([0,0,0]),1),new Color([255,0,0]));map.graphics.add(new Graphic(features[0].geometry,sms));});});var draw = new esri.toolbars.Draw(map);draw.on("draw-end",addGraphicToMap);on(dom.byId("extent"), "click", function(event){map.graphics.clear();map.setMapCursor("pointer");draw.activate(esri.toolbars.Draw.EXTENT);});function addGraphicToMap(evt){map.setMapCursor("default");draw.deactivate();var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([255,0,0]),2),new Color([255,255,0,0.25]));map.graphics.add(new Graphic(evt.geometry, sfs));//根据空间进行查询var query = new Query();query.geometry = evt.geometry;city.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){console.log(results);for(var i= 0,length=results.length;i<length;i++){var sms = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]),1),new Color([0,255,255,0.25]));results[i].symbol = sms;city.redraw();}});map.setExtent(evt.geometry.getExtent().expand(2));};});</script>
</head><body>
<div id="map"><div id="map_ctrl"><a>城市名称：</a><input type="text" id="name" value="北京市" /><a id="query" class="button">查 询</a><a id="extent" class="button">矩 形</a></div>
</div>
</body>
</html>

欢迎关注LZUGIS CSDN之Arcgis for JS系列文章，有疑问请联系：

QQ：1004740957

Mail：niujp08@qq.com

来信请注明您的来意，方便我为您解疑答惑。

Arcgis for Js之featurelayer实现空间查询和属性查询相关推荐

ArcGIS API For JS之空间查询和属性查询
说实在真是无聊,虽然很想干一些东西但是悲哀的是没有平台,前几天看到一个关于GIS开发的文章,这一行真的很容易被人取代,知识更新太快了,GIS并不像其他前端开发,不太注重用户体验,因为大多都是政府部分的 ...
「Arcgis的」空间查询和属性查询
「Arcgis的」空间查询和属性查询概述目录「Arcgis的」空间查询和属性查询概述流程 FindTask QueryTask IdentifyTask 在ArcGIS API中查询功能是非 ...
openlayers+geoserver+wms实现空间查询，属性查询
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/gisdoer/article/details/81530228 openlayers+geoserv ...
ArcGIS Server 空间查询与属性查询
QQ交流群:607330463 GIS开发技术最强交流群未经允许禁止转载可以参考属性查询 1. 空间查询 1.坐标点查询 2.图斑查询(四至)
ArcGIS中定义查询和属性查询的SQL语句的坑
转载请注明作者(独孤尚良dugushangliang)出处:https://blog.csdn.net/dugushangliang/article/details/93757726 之前遇到过这种情 ...
ArcGIS API for JS：实现属性查询
项目记录:关于ArcGIS API for JS查询方法的比较和应用查询方法比较:FindTask.QueryTask.IdentifyTask 不同点 FindTask只能进行属性查询,Query ...
control层alert弹出框乱码_【ArcGIS for JS】动态图层的属性查询（11）
在真实需求中,我们不仅仅是将shp在地图中显示那么简单,我们往往要查询该图层的属性信息,我们在前面代码的基础上添加上属性查询. 1.1方法1(通过click直接获取) 1.1.1代码实现给要素图层添 ...
ArcGIS api for JavaScript 之空间、属性查询
有一段时间又没有发表博客记录学习经过了,有点懈怠啊,学习之路还要坚持才行呢. 话不多说,进入今天的正题:arcgis的空间和属性查询 arcgis js api 有三种常见的查询:QueryTask. ...
ArcGIS Engine属性查询和空间查询联合查询要素
ArcGIS Engine属性查询和空间查询联合查询要素项目中遇到了需要通过属性查询和空间查询两种查询方式联合,查找要素,主要流程是先通过空间查询,选择到符合条件的要素,添加到选择集中,然后再通过属 ...

Arcgis for Js之featurelayer实现空间查询和属性查询

Arcgis for Js之featurelayer实现空间查询和属性查询相关推荐

最新文章

热门文章