A与B相交后的图形查询

A与B相交后的图形查询

按照AB图形得到相交后的图斑

<!--

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="相交测试._Default" %>

-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" >

<title>相交测试服务</title>

<link rel="stylesheet" type="text/CSS" href="http://10.0.0.55/jsapi/dijit/themes/tundra/tundra.css" />

<link rel="stylesheet" type="text/css" href="http://10.0.0.55/jsapi/esri/css/esri.css" />

<script type="text/javascript" src="http://10.0.0.55/jsapi/init.js"></script>

<style>

#info {

top: 20px;

color: #444;

height: auto;

font-family: arial;

right: 20px;

margin: 5px;

padding: 10px;

position: absolute;

width: 115px;

z-index: 40;

border: solid 2px #666;

border-radius: 4px;

background-color: #fff;

}

html, body, #mapDiv {

padding:0;

margin:0;

height:100%;

}

button {

display: block;

}

</style>

</head>

<body>

<div>

<script type="text/Javascript">

//定义地图

var map, tb, drawEvt;

require([

"esri/map",

"esri/toolbars/draw",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/PictureFillSymbol",

"esri/symbols/CartographicLineSymbol",

"esri/graphic",

"esri/Color",

"dojo/dom",

"dojo/on",

"esri/tasks/GeometryService",

"esri/tasks/QueryTask",

"esri/tasks/query",

"dojo/domReady!"

],

function (

Map, Draw,

SimpleMarkerSymbol, SimpleLineSymbol,

PictureFillSymbol, CartographicLineSymbol,

Graphic,

Color, dom, on, GeometryService, QueryTask, Query

) {

map = new Map("mapDiv", { "spatialReference": { "wkid": 2359 } });

console.log(map);

var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://10.0.0.55:6080/arcgis/rest/services/xj/MapServer");

map.addLayer(layer);

map.on("load", initToolbar);

var markerSymbol = new SimpleMarkerSymbol();

markerSymbol.setColor(new Color("#0099FF"));

// lineSymbol used for freehand polyline, polyline and line.

var lineSymbol = new CartographicLineSymbol(

CartographicLineSymbol.STYLE_SOLID,

new Color([255, 0, 0]), 10,

CartographicLineSymbol.CAP_ROUND,

CartographicLineSymbol.JOIN_MITER, 1

);

// fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol

// the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png

var fillSymbol = new PictureFillSymbol(

"images/mangrove.png",

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color('#050'),

1

),

42,

42

);

function initToolbar() {

tb = new Draw(map);

tb.on("draw-end", addGraphic);

// event delegation so a click handler is not

// needed for each individual button

on(dom.byId("info"), "click", function (evt) {

if (evt.target.id === "info") {

return;

}

var tool = evt.target.id.toLowerCase();

map.disableMapNavigation();

tb.activate(tool);

});

}

function addGraphic(evt) {

tb.deactivate();

map.enableMapNavigation();

var symbol;

if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {

symbol = markerSymbol;

} else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {

symbol = lineSymbol;

}

else {

symbol = fillSymbol;

}

//显示用户所绘图形

map.graphics.add(new Graphic(evt.geometry, symbol));

alert("显示用户所绘图形");

//1、先进行相交查询

var queryTask = new QueryTask("http://10.0.0.55:6080/arcgis/rest/services/xj/MapServer/1");

var query = new Query();

query.geometry = evt.geometry;

query.returnGeometry = true;

drawEvt = evt;

queryTask.execute(query, showResults);

}

function showResults(featureSet) {

map.graphics.clear();

//2、将相交的图形置入数组

var geos = [];

dojo.forEach(featureSet.features, function (feature) {

var graphic = feature;

graphic.setSymbol(lineSymbol);

geos.push(feature.geometry);

map.graphics.add(graphic);

});

alert("2、将相交的图形置入数组");

console.log(featureSet, "geos");

//3、调用系统相交服务进行分析,结果得到相交后的图形

geo = new GeometryService("http://10.0.0.55:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer/");

geo.intersect(geos, drawEvt.geometry, output);

}

//这里返回的是数组

function output(geos) {

//4、讲相交后的图形变换,绘制到图上

alert("4、讲相交后的图形变换,绘制到图上");

// map.graphics.clear();

for (a = 0; a < geos.length; a++) {

var graphic = new Graphic();

graphic.setSymbol(fillSymbol);

graphic.geometry = geos[a];

map.graphics.add(graphic);

}

}

});

</script>

</div>

<div id="info">

<button id="Polygon">Polygon</button>

</div>

<div id="mapDiv" style="width: 900px; height: 600px; border: 1px solid #000;"></div>

</body>

</html>