Arcgis for Js实现graphiclayer的空间查询(续)

上文中,实现了简单的针对graphiclayer的空间查询工作,在本节,将更加详细的介绍针对graphiclayer的空间查询。首先,空间查询的方式:提供多种类型的空间查询,包括点周边、线周边、面内等多种方式;其次,图形绘制完成后状态的展示;再次,结果的显示。实现后的结果如下:

点周边——输入缓冲区距离

点周边——查询结果

线周边——输入缓冲区距离

线周边——查询结果

面内——矩形

面内——圆形

面内——多边形

首先,绘制图形。

            var drawToolbar = new esri.toolbars.Draw(map);
            drawToolbar.on("draw-end",showDrawResults);
            on(dom.byId("point"), "click", function(){
                restoreMap();
                drawToolbar.activate(esri.toolbars.Draw.POINT);
            });
            on(dom.byId("polyline"), "click", function(){
                restoreMap();
                drawToolbar.activate(esri.toolbars.Draw.POLYLINE);
            });
            on(dom.byId("extent"), "click", function(){
                restoreMap();
                drawToolbar.activate(esri.toolbars.Draw.EXTENT);
            });
            on(dom.byId("circle"), "click", function(){
                restoreMap();
                drawToolbar.activate(esri.toolbars.Draw.CIRCLE);
            });
            on(dom.byId("polygon"), "click", function(){
                restoreMap();
                drawToolbar.activate(esri.toolbars.Draw.POLYGON);
            });
            /**
             * 显示绘制结果
             */
            function showDrawResults(evt){
                drawToolbar.deactivate();
                map.setMapCursor("default");
                var geometry = evt.geometry;
                if(geometry.type==="point" || geometry.type==="polyline"){
                    $('#map').modalInfowindow({
                        width:175,
                        height:75,
                        title:"请输入缓冲区距离",
                        content:"<input type='text' id='distance' />"
                    });
                    $("#distance").focus();
                    $("#distance").keydown(function (e){
                        // 回车键事件
                        if(e.which == 13) {
                            $("#close").click();
                        }
                    });
                    on(dom.byId("close"), "click", function(){
                        distance = dom.byId("distance").value;
                        $("#modal").remove();
                        doBuffer(geometry);
                    });
                }
                else{
                    queryGraphicByPolygon(geometry);
                }
            };

当为点或者线的时候,得首先进行缓冲区分析,获取缓冲区的geometry,缓冲区分析的代码如下:

            /**
             * 执行buffer
             * @param geometry
             */
            function doBuffer(geometry) {
                var symbol = null;
                switch (geometry.type) {
                    case "point":
                        symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,
                                7,
                                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                        new Color([0,0,255]),
                                        1
                                ),
                                new Color([0,0,255])
                        );
                        break;
                    case "polyline":
                        symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                new Color([0,0,255]),
                                2
                        );
                        break;
                    case "polygon":
                        symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE,
                                new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                        new Color([0,0,255]),
                                        2
                                ),
                                new Color([0,0,255,0.25]));
                        break;
                }
                var graphic = new Graphic(geometry, symbol);
                map.graphics.add(graphic);

                //setup the buffer parameters
                var params = new BufferParameters();
                params.distances = [distance];
                params.bufferSpatialReference = map.spatialReference;
                params.outSpatialReference = map.spatialReference;
                params.unit = GeometryService["UNIT_KILOMETER"];

                if (geometry.type === "polygon") {
                    //if geometry is a polygon then simplify polygon.  This will make the user drawn polygon topologically correct.
                    gsvc.simplify([geometry], function(geometries) {
                        params.geometries = geometries;
                        gsvc.buffer(params, function(bfGeometry){
                            queryGraphicByPolygon(bfGeometry[0]);
                        });
                    });
                }
                else {
                    params.geometries = [geometry];
                    gsvc.buffer(params, function(bfGeometry){
                        queryGraphicByPolygon(bfGeometry[0]);
                    });
                }
            }

在执行缓冲区分析的时候,会用到geometryservice。代码如下:

var gsvc = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");

当缓冲区分析完成或者面要素绘制完成以后的geometry都为polygon,此时,执行空间查询:

            /**
             * 根据多边形进行查询
             * @param geometry
             */
            function queryGraphicByPolygon(geometry){
                var graphics = chartLayer.graphics;

                var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,
                                new Color([255,0,0]), 2),
                        new Color([255,255,0,0.25])
                );
                var graphic = new Graphic(geometry,sfs);
                map.graphics.add(graphic);

                for(var i= 0, total=graphics.length;i<total;i++){
                    if(geometry.contains(graphics[i].geometry)){
                        selectedGraphics.push(graphics[i]);
                        graphics[i].symbol = createSymbol(iconPath,"#0ff");
                        chartLayer.redraw();
                    }
                }
            }

空间查询的逻辑很简单,就是通过判断自定义的区域内是否包含各点。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WindCoder

Angular6自定义表单控件方式集成Editormd

曾经找到过“Editor.md”,看之心喜,一直想在Angular中集成下这款markdownpad编辑器玩,在网上也只找到一篇通过指令集成的,虽然可以实现,但...

55320
来自专栏HTML5学堂

2016.07 第2周 群问题分享

HTML+CSS 移动端中1px的边框如何实现 2016.07.04~2016.07.08 核心概念: viewport、CSS3属性 参考答案: 一、通过设置...

29860
来自专栏玄魂工作室

如何将HTML字符转换为DOM节点并动态添加到文档中

将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术。 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题:<br />

18620
来自专栏码洞

会玩Go!会玩Python!嘭!Go-Python!

Golang是静态语言,性能很好,当它不那么灵活,不好在运行时动态运行代码。Python是动态语言,非常灵活,但是性能很差。古人云:“鱼和熊掌不能兼得”。但是如...

38910
来自专栏GreenLeaves

Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(functio...

1K50
来自专栏前端儿

Flux --> Redux --> Redux React 基础实例教程

Flux思想、Redux基本概念、Redux的使用、Redux在React中的使用(同步)、Redux在React中的使用(异步,使用中间件)

16020
来自专栏c#开发者

如何在DataGrid里面产生滚动条而不滚动题头

我们在开发的时候一定遇到,使用DataGrid的时候由于不想分页(数据没有那么多)但是又显示不在一页里面,此时我们希望在DataGrid里面出现一个滚动条,可以...

386110
来自专栏c#开发者

selenum参考手册中文翻译

Added by SpringSideTeam, last edited by SpringSideTeam on 2006-11-23  (view chan...

29160
来自专栏Google Dart

AngularDart4.0 指南- 模板语法二 顶

Class绑定语法类似于属性(property)绑定。 以前缀类开始,可选地跟一个点(.)和一个CSS类的名字替代括号内的元素属性:[class.class-n...

12920
来自专栏移动开发之家

Flutter完整开发实战详解(一、Dart语言和Flutter基础)

 在如今的 Fultter 大潮下,本系列是让你看完会安心的文章。本系列将完整讲述:如何快速从0开发一个完整的 Flutter APP,配套高完成度 Flut...

1.3K30

扫码关注云+社区

领取腾讯云代金券