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

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

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

初始效果图:


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


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

附件下载

相关资讯

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

    一、概述  青海,简称青,省会西宁,位于中国西部,雄踞世界屋脊青藏高原的东北部,是中国青藏高原上的重要省份之一。青海省东西长约1200公里,南北宽800公里,面积为72.10万平方公里。境内山脉高耸,地形多样,河流纵横,湖泊棋布。昆仑山横贯中部,唐古拉山峙立于南,祁连…

    2018-8-23 16:18:41
  • 宁夏省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述  宁夏,全称宁夏回族自治区,简称“宁”。首府银川市,成立于1958年10月25日 [1] ,是中国五大少数民族自治区之一。  宁夏回族自治区得黄河水灌溉而形成了悠久的黄河文明。 早在三万年前,宁夏就已有了人类生息的痕迹。公元1038年,党项族的首领李元昊在此建立…

    2018-8-10 16:41:59
  • 辽宁省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述辽宁,中华人民共和国省级行政区,简称“辽”,辽宁省南临黄海、渤海,东与朝鲜一江之隔,与日本、韩国隔海相望,是东北地区唯一的既沿海又沿边、中国最北端的沿海省份,也是东北地区及内蒙古自治区东部地区对外开放的门户。辽宁省是中国重要的重工业基地、教育强省、…

    2018-7-25 17:18:09
  • 江西省谷歌高清卫星地图下载(百度网盘离线包下载)

    一、概述  江西,中国省级行政区,简称“赣”(gn),又称江右、别称赣鄱大地,省会是南昌。因公元733年唐玄宗设江南西道而得省名,又因古为干越之地和省内最大河流为赣江而简称赣。  夏商时期,江西境内有邗越(干越)、百濮,《荀子劝学篇》注:“邗越古国名”。已进入青…

    2018-7-24 16:25:25

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

验证码: 看不清楚?
    我们的客户
    卫星地图下载