zoukankan      html  css  js  c++  java
  • 8、query鼠标移动选择面,并显示信息窗口

    query选择面,并显示信息窗口

    1、 首先完成地图的加载,详细见前面的介绍,本例使用的数据服务为:本地,地址为:

    http://localhost/ArcGIS/rest/services/China/MapServer

    要做查询的图层为:id=0

    2、 添加query任务:

    dojo.require("esri.tasks.query");

    添加map的事件:dojo.connect(map,"onMouseMove",executeQueryTask);

    即当鼠标在地图上移动时执行函数executeQueryTask查询

    新建query任务:

    //新建查询任务 
    
    queryTask = new esri.tasks.QueryTask("http://localhost/ArcGIS/rest/services/China/MapServer/0");//指定查询图层 
    
    query = new esri.tasks.Query();//初始化查询任务 
    
    query.returnGeometry = true;//可以返回Geometry 
    
    query.outFields = ["FID"];//要查询的字段 
    
    infoTemplate = new esri.InfoTemplate("信息","ID:${FID}");//定义信息窗内容 

    3、 编写执行查询任务的函数:

    function executeQueryTask(evt) 
    
    { 
    
    query.geometry = evt.mapPoint;//查询依据的输入图元 
    
    queryTask.execute(query, showResults);//执行查询,并在查询出后,调用showResults函数 
    
    } 

    4、 showResults函数的编写:

    function showResults(featureSet) 
    
    { 
    
    map.graphics.clear();//删除所有图形 
    
    for (var i=0, il=featureSet.features.length; i<il; i++) 
    
    { 
    
    //从features中获取所有图元 
    
    //将features转成Graphics 
    
    var graphic = featureSet.features[0]; 
    
    var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_NONE, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));//定义样式 
    
    graphic.setSymbol(symbol); 
    
    graphic.setInfoTemplate(infoTemplate);//设置Graphics的信息窗口 
    
    map.graphics.add(graphic); //添加Graphics 
    
    } 
    
    } 

    5、 这样即可完成效果:

    鼠标移动即可选择图元,选择后单击即可得到定制的信息。

    6、 效果图为:

    clip_image002

    存在的问题:

    因后台反应较慢,致使鼠标移动查询结果滞后,须等待一会才可以完成查询!!

    改进可采用鼠标单击查询!!

  • 相关阅读:
    使用子查询可提升 COUNT DISTINCT 速度 50 倍
    页面装载js及性能分析方法
    用CSS创建打印页面
    每个Web开发者都应该知道的关于URL编码的知识
    C IO programming test code
    全球NTP服务器列表
    MySQL数据的查询注意
    Python使用pyMysql模块插入数据到mysql的乱码解决
    单元测试
    python threading.thread
  • 原文地址:https://www.cnblogs.com/dwf07223/p/3048079.html
Copyright © 2011-2022 走看看