之前笔记有写过图层渲染和查询,只是简单的说明了一下,主要是针对FeatureLayer之类的用query进行查询,下面记录一下用queryTask进行查询
首先我们要对arcgis server发布的服务进行图层查询
然后找到他的REST地址
地址中有两个图层,我们选取其中一个进行查询,点击进入就可以看到图层属性 Fields
然后我们主要是针对Fields 进行查询
使用queryTask +query 进行查询
主要代码如下:
var queryTask = new QueryTask({
//在任务中使用的ArcGIS Server REST服务URL(通常是要素服务层或地图服务层)
url: "http://localhost:6080/arcgis/rest/services/MASAIKE/MapServer/1"
});
//查询对象
var query = new Query();
query.returnGeometry = true;
query.outFields = ["FID"];
query.where = "FID > 2500 "; //这里是就是查询语句
query.returnGeometry = true;
// query.maxRecordCountFactor=5; 以为有用,实际没用
queryTask.execute(query).then(function(results) {
var features = results.features;
for (var i = 0; i < features.length; i++) {
//添加弹窗
features[i].popupTemplate = templateHaiAnXianRG;
//添加样式
features[i].symbol = symbolClass;
//将graphics 添加到视图
view.graphics.add(features[i]);
}
});
然后对其中一些部分进行说明
1.查询的条件语句可以实现在arcgis server 上面进行测试 刚才说的那个REST最下面有一个查询
可以在上面填写查询条件进行查询
2.查询数量返回不超过1000条,如果出现这个问题,需要调整这个位置的数量
保存并重新启动就行
3.查询出来的结果 可以看到很多信息
输出打印 results.features;
你可以看到出现出来的结果集
其中
attributes 是属性集合,这个用于弹窗里面的内容显示,对应的你图层里面的属性表
geometry,针对的是view 就是图形信息,有点线面等多种图层信息,主要就是把这个加在地图上
layer 这个返回图层信息,主要都是图层 的一些信息
popuTemplate 可以设置弹窗的模板
sourceLayer 还没找到怎么用
symbol 这个主要是用于渲染,给你需要的东西加上样式,
visible 是否可见
3.如果要统一控制就把所有的graphics 先添加到 GraphicsLayer上面,然后map.add 进行
4.如果查询本地的文件,就用我之前笔记上的内容
全部测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Intro to MapView - Create a 2D map - 4.12</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<!-- 本地化 -->
<link rel="stylesheet" href="http://localhost/arcgis_js_v415_sdk/arcgis_js_api/library/4.15/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://localhost/arcgis_js_v415_sdk/arcgis_js_api/library/4.15/esri/themes/light/main.css" />
<script src="http://localhost/arcgis_js_v415_sdk/arcgis_js_api/library/4.15/dojo/dojo.js"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function(Map, MapView, FeatureLayer, QueryTask, Query) {
var map = new Map({
basemap: "satellite"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [118.9634086609, 32.9595912264],
});
// var shplayer = new FeatureLayer({
// url: "http://localhost:4567/arcgis/rest/services/SampleWorldCities/MapServer/dynamicLayer",
// mode: FeatureLayer.MODE_SNAPSHOT,
// dynamicDataSource: {
// type: "data-layer",
// dataSource: {
// type: "table",
// workspaceId: "coastline",
// dataSourceName: "nature.shp"
// }
// }
// });
var templateHaiAnXianRG = {
// autocasts as new PopupTemplate()
title: "标题",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "FID",
label: "FID "
}]
}]
};
//样式文件
var symbolClass = {
type: "simple-line", // autocasts as new SimpleMarkerSymbol()
color: [0, 255, 255],
width: 2,
outline: { // autocasts as new SimpleLineSymbol()
width: 10,
color: [0, 255, 255],
}
};
//查询任务
var queryTask = new QueryTask({
//在任务中使用的ArcGIS Server REST服务URL(通常是要素服务层或地图服务层)
url: "http://localhost:6080/arcgis/rest/services/MASAIKE/MapServer/1"
});
//查询对象
var query = new Query();
query.returnGeometry = true;
query.outFields = ["FID"];
query.where = "FID > 2500 "; //这里是就是查询语句
query.returnGeometry = true;
// query.maxRecordCountFactor=5; 以为有用,实际没用
queryTask.execute(query).then(function(results) {
var features = results.features;
console.log(features)
for (var i = 0; i < features.length; i++) {
//添加弹窗
features[i].popupTemplate = templateHaiAnXianRG;
//添加样式
features[i].symbol = symbolClass;
//将graphics 添加到视图
view.graphics.add(features[i]);
// map.add(features[i].layer);
}
});
// map.add(shplayer);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
另外,上面主要演示query的查询方法,如果你是只单纯需要按不同层级渲染数据的话,你可以直接构建对应的Rendere,
例如
var RendererHaiAnXian = {
type: "unique-value",
field: "岸线类型",
defaultSymbol: {
type: "simple-line"
},
uniqueValueInfos: [{
value: "基岩岸线",
symbol: {
type: "simple-line",
color: [0,255,255]
}
}, {
value: "淤泥质(生物)岸线 ",
symbol: {
type: "simple-line"
color: [153,153,0]
}
}, {
value: "砂质岸线",
symbol: {
type: "simple-line",
color: [255,102,0]
}
} ]
};
不同的value对应的不同的颜色