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

2016-7-21 14:55:40 0人评论 231次浏览 分类:技术文章

参考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>  

初始效果图:


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


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

附件下载

相关资讯

  • 吉林省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述吉林,地处中国东北中部,东北亚地理中心,因清初建吉林乌拉城而得名,简称“吉”,省会长春,原省会吉林市。吉林省位于日本、俄罗斯、朝鲜、韩国、蒙古与中国东北部组成的东北亚几何中心地带。北接黑龙江省,南邻辽宁省,西接内蒙古自治区,东与俄罗斯联邦接壤,东南…

    2018-6-22 16:04:09
  • 湖南省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述湖南为中华人民共和国省级行政区,地处中国中南部、长江中游南部,宋代划定为荆湖南路而开始简称湖南,省内最大河流湘江流贯南北而简称“湘”,也称潇湘,省会驻东北部的长沙市。湖南东临江西,西接重庆、贵州,南毗广东、广西,北与湖北相连。湖南是华夏文明的重要发…

    2018-6-15 15:31:16
  • 湖北省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述湖北,简称“鄂”,中华人民共和国省级行政区,省会武汉,因位于长江中游、洞庭湖以北,故名湖北。地处中国中部,东邻安徽,西连重庆,西北与陕西接壤,南接江西、湖南,北与河南毗邻。湖北省位居华中腹地,是中华文明的重要发祥地之一。先秦时期,从哲学到文学,产生…

    2018-6-5 15:16:09
  • 黑龙江省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述黑龙江省,简称黑,省会哈尔滨,位于中国最东北部,中国国土的北端与东端均位于省境,因省境北面有黑龙江而得名。黑龙江东部和北部以乌苏里江、黑龙江为界河与俄罗斯为邻,与俄罗斯的水陆边界长约3045公里;西接内蒙古自治区,南连吉林省。介于北纬4326′~5333′,东经…

    2018-5-29 14:18:43

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

验证码: 看不清楚?