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

简介:

转自原文 Arcgis for Js实现graphiclayer的空间查询(续)

 

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

\

点周边——输入缓冲区距离<喎�"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"/uploadfile/Collfiles/20141028/20141028091440197.png" alt="\">

点周边——查询结果


\

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

\

线周边——查询结果


\

面内——矩形

\

面内——圆形

\

面内——多边形

首先,绘制图形。

复制代码
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 id="'distance'" type="'text'">"
        });
        $("#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,缓冲区分析的代码如下:

  View Code

在执行缓冲区分析的时候,会用到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();
          }
         }
复制代码

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

 

没有整理与归纳的知识,一文不值!高度概括与梳理的知识,才是自己真正的知识与技能。 永远不要让自己的自由、好奇、充满创造力的想法被现实的框架所束缚,让创造力自由成长吧! 多花时间,关心他(她)人,正如别人所关心你的。理想的腾飞与实现,没有别人的支持与帮助,是万万不能的。




    本文转自wenglabs博客园博客,原文链接:http://www.cnblogs.com/arxive/p/7447947.html ,如需转载请自行联系原作者



相关文章
|
15天前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的自驾游攻略查询系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的自驾游攻略查询系统附带文章和源代码部署视频讲解等
41 6
|
4月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的公共交通查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的公共交通查询系统附带文章源码部署视频讲解等
40 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的城市公交查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的城市公交查询系统附带文章源码部署视频讲解等
26 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的武汉市公交路线查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的武汉市公交路线查询系统附带文章源码部署视频讲解等
36 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的城市公交在线查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的城市公交在线查询系统附带文章源码部署视频讲解等
34 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校竞赛和考级查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校竞赛和考级查询系统附带文章源码部署视频讲解等
30 0
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的网络直播带货查询系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的网络直播带货查询系统附带文章和源代码部署视频讲解等
41 4
|
7月前
|
JavaScript Java 测试技术
基于微信小程序的企业职工薪资查询系统+ssm+vue.js附带文章和源代码设计说明文档ppt
基于微信小程序的企业职工薪资查询系统+ssm+vue.js附带文章和源代码设计说明文档ppt
91 5