Arcgis for Js之featurelayer实现空间查询和属性查询
2014-11-01 21:34
686 查看
空间查询和属性查询是常用的两种对数据的检索与查询方式,在本节,将讲述Arcgis
for Js下如何实现featurelayer的这两种查询方式,先贴图给大家看看:
实现界面
属性查询
空间查询
看完了效果,下面说说我的实现思路。
首先,实现查询的关键是Query,属性查询时query.where来实现,空间查询时query.geometry来实现,具体代码如下:
1、属性查询
完整代码如下:
欢迎关注LZUGIS CSDN之Arcgis for JS系列文章,有疑问请联系:
QQ:1004740957
Mail:niujp08@qq.com
来信请注明您的来意,方便我为您解疑答惑。
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 for Js之featurelayer实现空间查询和属性查询
- Arcgis for Js实现graphiclayer的空间查询
- Arcgis for Js实现graphiclayer的空间查询
- Arcgis for Js实现graphiclayer的空间查询(续)
- Arcgis for Js实现graphiclayer的空间查询
- Arcgis for Js实现graphiclayer的空间查询(续)
- arcgis api for js featurelayer 两种查询方式
- Arcgis for Js实现graphiclayer的空间查询(续)
- Arcgis for Javascript之featureLayer图和属性的互操作
- ArcGis for JS 利用QueryTask查询实现对地图的定位功能
- ArcGIS Runtime SDK For Android 10.2.x版本空间查询和属性查询
- Arcgis server for js 只FeatureLayer显示label的问题
- ArcGIS API For Javascript之调用动态地图服务+属性、空间查询
- ArcGIS for Android FeatureLayer的属性更新
- 关于ArcGIS与Silverlight开发中FeatureLayer没有FeatureSymbol属性的解决方法
- arcgis for android 学习 - (8) 空间查询 - 点击某点,选中该点所在单位区域。
- ArcGIS.Server.9.3和ArcGIS API for Flex实现Query查询定位中心功能(七)
- ArcGIS for Android 之Geocode查询的实现
- 使用ArcGIS API for Silverlight 进行复合多条件空间查询