A与B相交后的图形查询

心不动则不痛 提交于 2020-01-20 04:42:15

 

 

 

 

按照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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!