当前位置:GIS服务>GIS技术> SuperMap学习系列(五)—鼠标移动(高亮显示)二

SuperMap学习系列(五)—鼠标移动(高亮显示)二

2016/7/21 14:55:40 0人评论 2433 次

参考SuperMap超图技术资源中心--代码库:

http://support.supermap.com.cn/ProductCenter/ResourceCenter/CodeLibrary.aspx

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. <p><!DOCTYPE html>  
  2. <html xmlns="<a target="_blank" href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title></title>    
  6.     <script src="libs/SuperMap.Include.js"></script>  
  7.     <script type="text/javascript">      
  8.         var style = {  
  9.             strokeColor: "#304DBE",  
  10.             strokeOpacity: 0,  
  11.             fillColor: "#00ff00",  
  12.             fillOpacity: 0,  
  13.         };  
  14.         var selectStyle = {  
  15.             fillColor: "#FFFFFF",    //填充颜色  
  16.             strokeColor: "#ff0000",   //边框颜色  
  17.             strokeWidth: 3,  
  18.             graphZIndex: 1  
  19.         };  
  20.         var map, layer, vectorLayer, selectFeature, popup;  
  21.         // 设置访问的GIS服务地址  
  22.         var url = "<a target="_blank" href="http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest">http://localhost:8090/iserver/services/map-ChinaTestWorkPlace/rest/maps/ChinaTest</a>";  
  23.         function GetMap() {  
  24.             // 创建地图对象  
  25.             map = new SuperMap.Map("map");  
  26.             //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时,所在点的地理坐标。  
  27.             //map.addControl(control);  //添加控件  
  28.             // 创建图层对象  
  29.             layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });  
  30.             layer.events.on({ "layerInitialized": addLayer });  
  31.             vectorLayer = new SuperMap.Layer.Vector("Vector Layer");</p><p>            //这里添加两种事件方式点击事件和mouseover事件,都可以实现,这里屏蔽掉mouseover事件。(这里我还存一个问题,在这两种情况下双击地图不能放大,只能用滚轮)  
  32.             // (双击除了要高亮显示的其他区域,还是可以的)  
  33.             //给vectorLayer添加单击事件  
  34.             selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {  
  35.                 onSelect: onFeatureSelect,  
  36.                 onUnselect: onUnFeatureSelect  
  37.             });  
  38.             selectFeature.repeat = true;  
  39.             selectFeature.toggle = true;</p><p>            ////给vectorLayer添加鼠标mouseover事件   
  40.             //selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {  
  41.             //    onSelect: onFeatureSelect,  
  42.             //    onUnselect: onUnFeatureSelect,  
  43.             //    hover: true  
  44.             //});  
  45.             map.addControl(selectFeature);  
  46.             selectFeature.activate();  
  47.         }  
  48.         // 加载图层  
  49.         function addLayer() {  
  50.             // 向Map添加图层  
  51.             map.addLayers([layer, vectorLayer]);  
  52.             map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);            
  53.             QueryBySQL();  
  54.         }  
  55.         function QueryBySQL() {  
  56.             var filterParameter, queryBySQLService, queryBySQLParameters;  
  57.             //SuperMap.REST.FilterParameter 查询过滤条件参数类。 该类用于设置查询数据集的查询过滤参数。   
  58.             filterParameter = new SuperMap.REST.FilterParameter({  
  59.                 name: "<a target="_blank" href="mailto:Provinces_R@China400">Provinces_R@China400</a>"  
  60.             });  
  61.             //SuperMap.REST.QueryBySQLParameters SQL 查询参数类。 该类用于设置 SQL 查询的相关参数。   
  62.             queryBySQLParameters = new SuperMap.REST.QueryBySQLParameters({  
  63.                 queryParams: [filterParameter]  
  64.             });  
  65.             //SuperMap.REST.QueryBySQLService SQL 查询服务类。 在一个或多个指定的图层上查询符合 SQL 条件的空间地物信息。   
  66.             queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {  
  67.                 eventListeners: {  
  68.                     "processCompleted": queryCompleted,  
  69.                     "processFailed": queryError  
  70.                 }  
  71.             });  
  72.             queryBySQLService.processAsync(queryBySQLParameters);  
  73.         }  
  74.         //查询成功  
  75.         function queryCompleted(queryEventArgs) {  
  76.             var result = queryEventArgs.result;  
  77.             if (result && result.recordsets[0].features) {  
  78.                 features = result.recordsets[0].features;  
  79.                 for (var i = 0; i < features.length; i++) {  
  80.                     features[i].style = style;  
  81.                 }  
  82.                 vectorLayer.addFeatures(features);  
  83.             }  
  84.         }  
  85.         function queryError(e) {  
  86.             alert(e.error.errorMsg);  
  87.         }  
  88.         function onUnFeatureSelect(feature) {  
  89.             map.removePopup(feature.popup);  
  90.             feature.popup.destroy();  
  91.             feature.popup = null;</p><p>            feature.style = style;  
  92.             vectorLayer.redraw();</p><p>        }  
  93.         function onFeatureSelect(feature) {  
  94.             feature.style = selectStyle;  
  95.             vectorLayer.redraw();  
  96.             vectorLayer.setOpacity(0.6);</p><p>            // 获取点击点的经纬度  
  97.             var x = feature.geometry.getBounds().getCenterLonLat().lon;  
  98.             var y = feature.geometry.getBounds().getCenterLonLat().lat;  
  99.             var contentHTML = "<div style='font-size:.8em; opacity: 0.8; width:150px; height:50px;'>" +  
  100.                     "<span style='font-weight: bold; font-size: 18px;'>详细信息</span><br>";  
  101.             contentHTML += "<div>所属:" + feature.attributes.NAME + "</div>";  
  102.             contentHTML += "<div>1994年GDP:" + parseInt(feature.attributes.GDP_1994) + "</div>";  
  103.             contentHTML += "<div>1997年GDP:" + parseInt(feature.attributes.GDP_1997) + "</div>";  
  104.             contentHTML += "<div>1998年GDP:" + parseInt(feature.attributes.GDP_1998) + "</div>";  
  105.             contentHTML += "<div>1999年GDP:" + parseInt(feature.attributes.GDP_1999) + "</div>";  
  106.             contentHTML += "<div>2000年GDP:" + parseInt(feature.attributes.GDP_2000) + "</div>";  
  107.             contentHTML += "</div>"  
  108.             popup = new SuperMap.Popup.FramedCloud("chicken",  
  109.                     new SuperMap.LonLat(x, y),  
  110.                     null,  
  111.                     contentHTML,  
  112.                     null,  
  113.                     true);  
  114.             feature.popup = popup;  
  115.             popup.panMapIfOutOfView = true;  
  116.             map.addPopup(popup);</p><p>        }        
  117.     </script>  
  118. </head>  
  119. <body onload="GetMap()">      
  120.     <div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>  
  121. </body>  
  122. </html>  
  123. </p>  

初始效果图:


鼠标单击其中的一个省份:


鼠标移动也是可以的,上面的代码中有说明。

分享到:

相关资讯

  • 如何在ArcGIS中利用谷歌高程进行坡度分析

    高程、坡度和坡向是小班中非常重要的因子,坡度对水土保持规划设计具有决定性的作用,是土地利用规划和治理措施配置首先要考虑的因素。这里将以“小金县”为例,说明如何利用谷歌高程地形数据对坡度进行分析。

    2017/9/18 11:02:34
  • 什么是火星坐标系(GCJ-02)

    天地图是在国测局主导下生产建设的地图,是为了促进地理信息资源共享和高效利用,提高测绘地理信息公共服务能力和水平,改进测绘地理信息成果的服务方式,更好地满足国家信息化建设的需要,为社会公众的工作和生活提供方便。这样一个关乎国家民生的地图,你说能随意偏移吗,有…

    2017/9/15 14:19:04
  • Google Maps地图投影全解析

    Google Maps、Virtual Earth等网络地理所使用的地图投影,常被称作Web Mercator或Spherical Mercator,它与常规墨卡托投影的主要区别就是把地球模拟为球体而非椭球体。什么是墨卡托投影?墨卡托(Mercator)投影,又名“等角正轴圆柱投影”,荷兰地图学家墨卡托(Mercator)在15…

    2017/9/13 11:03:48
  • GCJ02/BD09/80/54/2000常用坐标系详解

    水经注万能地图下载器中的常用的坐标系主要包括WGS84经纬度投影、WGS84 Web 墨卡托投影、WGS84 UTM 投影、北京54高斯投影、西安80高斯投影、CGCS2000高斯投影、GCJ02经纬度投影、GCJ02 Web 墨卡托投影、BD09 经纬度投影和BD09 Web 墨卡托投影等。

    2017/9/12 11:40:21

共有0访客发表了评论 网友评论