分析 -- 缓冲区查询
效果图
过程
主要参考官方给的示例代码。
- 绘图工具
- 结束触发缓冲函数
- 更新查询几何为返回的缓冲区
官方案例
<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>Buffertitle>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style type="text/css">
html,body,#map{
width: 100%;
height: 100%;
margin: 0;
padding: 0；
}
style>
head>
<script type="text/javascript" src="https://js.arcgis.com/3.21/">script>
<body>
<div id="map">div>
body>
<script type="text/javascript">
require(["esri/map",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/graphic",
"esri/Color",
"esri/tasks/BufferParameters",
"esri/tasks/GeometryService",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/SpatialReference",
"dojo/domReady!"],function(Map,Point,Polyline,Polygon,Graphic,Color,BufferParameters,GeometryService,SimpleMarkerSymbol,SimpleFillSymbol,SimpleLineSymbol,SpatialReference){
var map=new Map("map",{
basemap: "osm",
center: [115.95,28.6826],
zoom:"12"
});
var points=[new Point(116.026,28.6826),new Point(116.05,28.66),new Point(116.11,28.70),new Point(115.95,28.65)];
var polylines=[new Polyline([[115.88,28.70],[115.88,28.67]]),new Polyline([[115.82,28.64],[115.89,28.59]])];
var polygons=[new Polygon([[115.798499,28.783553],[115.75998,28.895433],[115.900834,28.821535],[115.785276,28.759237],[115.713987,28.733902]])];
var geometryService=new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
map.on("load",function(){
var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255,0,0]), 4)
var markerSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([100,100,100,0.1]), 1),
new Color([255,0,0]));
var fillSymbol=new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([255,0,0]), 1),
new Color([255,0,0]));
for(var i=0;i<points.length;i++){
map.graphics.add(new Graphic(points[i],markerSymbol))
}
for(var i=0;i<polylines.length;i++){
map.graphics.add(new Graphic(polylines[i],lineSymbol))
}
for(var i=0;i<polygons.length;i++){
map.graphics.add(new Graphic(polygons[i],fillSymbol))
}
// 点缓冲区
var pointParams = new BufferParameters();
pointParams.geometries = points;
pointParams.distances = [ 1];
pointParams.unit = GeometryService.UNIT_KILOMETER;
pointParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
pointParams.outSpatialReference = new SpatialReference({wkid: 4326})
geometryService.buffer(pointParams,function(features) {
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([197,97,20]), 1),
new Color([197,97,20,1]));
for(var i=0;i<features.length;i++){
console.log(features[i]);
map.graphics.add(new Graphic(features[i],symbol))
}
});
// 线缓冲区
var polyineParams=new BufferParameters();
polyineParams.geometries=polylines;
polyineParams.distances = [ 1];
polyineParams.unit = GeometryService.UNIT_KILOMETER;
polyineParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
polyineParams.outSpatialReference = new SpatialReference({wkid: 4326});
geometryService.buffer(polyineParams,function(features) {
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([197,97,20]), 1),
new Color([197,97,20,1]));
for(var i=0;i<features.length;i++){
console.log(features[i]);
map.graphics.add(new Graphic(features[i],symbol))
}
});
// 面缓冲区
var polygonParams=new BufferParameters();
polygonParams.geometries=polygons;
polygonParams.geodesic=true;
polygonParams.distances = [ 1];
polygonParams.unit = GeometryService.UNIT_KILOMETER;
polygonParams.bufferSpatialReference = new SpatialReference({wkid: 32662});
polygonParams.outSpatialReference = new SpatialReference({wkid: 4326});
geometryService.buffer(polygonParams,function(features) {
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([197,97,20]), 1),
new Color([197,97,20,0.5]));
for(var i=0;i<features.length;i++){
console.log(features[i]);
map.graphics.add(new Graphic(features[i],symbol))
}
});
})
});
script>
html>
缓冲区空间查询
var url = "http://localhost:6080/arcgis/rest/services/Eco/BJ_td_gd_nyd/MapServer";
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"dojo/dom",
"dojo/on",
"esri/tasks/QueryTask",
"esri/toolbars/draw",
"esri/tasks/query",
"esri/geometry/Polygon",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/Color",
"esri/tasks/BufferParameters",
"esri/tasks/GeometryService",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/SpatialReference",
"dojo/domReady!"],
function (Map, ArcGISDynamicMapServiceLayer, dom, on, QueryTask, Draw, Query, Polygon,
SimpleLineSymbol, SimpleFillSymbol, Graphic, Color, BufferParameters, GeometryService, SimpleMarkerSymbol, SimpleFillSymbol,
SimpleLineSymbol, SpatialReference) {
var map = new Map("mapdiv");
var layer = new ArcGISDynamicMapServiceLayer(url);
map.addLayer(layer)
//定义一个绘图工具
var toolBar = new Draw(map);
//给button绑定事件
on(dom.byId("Btn"), "click", function () {
//激活绘图工具，我要绘制一个面图形
toolBar.activate(Draw.POLYGON);
})
on(toolBar, "draw-complete", function (result) {
//获得绘图得到的面
var geometry = result.geometry;
//关闭绘图工具
toolBar.deactivate();
bufferSelect(geometry)
queryGraphic(geometry);
});
function bufferSelect(geometry) {
var polygons = [new Polygon(geometry.rings)];
console.log(polygons)
var geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
// 面缓冲区
var polygonParams = new BufferParameters();
polygonParams.geometries = polygons;
polygonParams.geodesic = true;
polygonParams.distances = [8];
polygonParams.unit = GeometryService.UNIT_KILOMETER;
polygonParams.bufferSpatialReference = new SpatialReference({ wkid: 32662 });
polygonParams.outSpatialReference = new SpatialReference({ wkid: 4326 });
geometryService.buffer(polygonParams, function (features) {
console.log(features)
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([197, 97, 20]), 1),
new Color([207, 135, 89, 0.5]));
for (var i = 0; i < features.length; i++) {
console.log(features[i]);
map.graphics.add(new Graphic(features[i], symbol))
queryGraphic(features[i])
}
});
var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([255, 0, 0]), 0.8),
new Color([255, 0, 0]));
for (var i = 0; i < polygons.length; i++) {
map.graphics.add(new Graphic(polygons[i], fillSymbol))
}
}
function queryGraphic(geometry) {
//创建查询对象
var queryTask = new QueryTask(url + "/0");
//创建查询参数对象
var query = new Query();
//是否返回几何形状
query.returnGeometry = true;
//空间查询的几何对象
query.geometry = geometry;
//服务器给我们返回的字段信息，*代表返回所有字段
query.outFields = ["*"];
//空间参考信息
query.outSpatialReference = map.spatialReference;
//查询的标准，此处代表和geometry相交的图形都要返回
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
//执行空间查询
queryTask.execute(query, showQueryResult);
}
function showQueryResult(queryResult) {
//创建线符号
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
//创建面符号
var fill = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol("solid", new Color([30, 30, 30]), 1),
new Color([133, 105, 70, 0.5]));
var htmls = "";
if (queryResult.features.length >= 1) {
for (var i = 0; i < queryResult.features.length; i++) {
//得到graphic
var graphic = queryResult.features[i];
//给图形赋予符号
graphic.setSymbol(fill);
//添加到地图从而实现高亮效果
map.graphics.add(graphic);
}
}
}
});