<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义范围</title>
<!--arcgis api-->
<link data-id="esri_css" rel="stylesheet" type="text/css"
href="http://localhost/arcgis_js_api_v321/library/3.21/3.21/esri/css/esri.css">
<link data-id="tundra_css" rel="stylesheet" type="text/css"
href="http://localhost/arcgis_js_api_v321/library/3.21/3.21/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://localhost/arcgis_js_api_v321/library/3.21/3.21/init.js"></script>
<!--jquery-->
<script type="text/javascript" src="libs/jquery/jquery.js"></script>
<style>
body,html{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div style="float: right">
<button id="def">自定义范围</button>
</div>
<div id="myMap" style="width: 100%;height: 100%;">
//放地图
</div>
<script>
var myMap;
var graphicLayer;
require([
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/toolbars/draw",
"esri/layers/GraphicsLayer",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/graphic",
"esri/Color",
"esri/tasks/query",
"esri/tasks/QueryTask",
],function (Map,ArcGISDynamicMapServiceLayer,Draw,GraphicsLayer,SimpleLineSymbol,
SimpleFillSymbol,Graphic,Color, Query,QueryTask,) {
window.onload = function () {
init();
}
function init(){
myMap = new Map("myMap");
var dlayer = new ArcGISDynamicMapServiceLayer("http://localhost/OneMapServer/rest/services/Raster/MapServer");
var traLayer = new ArcGISDynamicMapServiceLayer("http://localhost/arcgis/rest/services/SQJC/TraDataset2017JN/MapServer");
myMap.addLayer(dlayer);//添加地图
myMap.addLayer(traLayer);//添加地图
graphicLayer = new GraphicsLayer();
myMap.addLayer(graphicLayer);
$("#def").click(function () {
drawExtent();
});
}
function drawExtent() {
graphicLayer.clear();
var toolbar = new Draw(myMap);//创建绘图工具对象
toolbar.activate(Draw.POLYGON);//激活绘图工具
toolbar.on("draw-complete",function (geographicGeometry) {
toolbar.deactivate();//关闭绘图工具
graphicLayer.clear();
var geometry = geographicGeometry.geometry;
switch (geometry.type) {
case "polygon":
var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([0, 255, 0, 0.5]));
break;
}
graphicLayer.add(new Graphic(geometry, symbol));
var query = new Query();
query.geometry = geometry;
query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
query.outSpatialReference = myMap.spatialReference;
query.returnGeometry = true;
query.outFields=["*"];
var queryTask = new QueryTask("http://localhost/arcgis/rest/services/SQJC/TraDataset2017JN/MapServer/12");
queryTask.execute(query,function (result) {
console.log(result);
},function (error) {
console.log(error);
})
})
}
})
</script>
</body>
</html>
arcgis api for js之自定义范围查询
猜你喜欢
转载自blog.csdn.net/wangchaohpu/article/details/83338415
今日推荐
周排行