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

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

参考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-1-18 14:01:32
  • 免费领取地图下载流量与流量使用方法

    除了谷歌地球影像、高程、历史地图、无偏移谷歌地图、矢量地图(POI\路网\建筑轮廓)和天地图之外的其它地图都可以通过流量下载,如谷歌卫星地图(有偏移)、谷歌电子地图、谷歌地表地形图、百度卫星地图、百度电子地图、高德卫星地图、高德电子地图、搜狗卫星地图、搜狗电子地…

    2017-12-21 9:45:37
  • 安徽省谷歌地球高程DEM等高线下载(百度网盘下载)

    安徽地处中国华东地区,经济上属于中国东部经济区。地理位置东经11454′-11937′,北纬2941′-3438′。地处长江、淮河中下游,长江三角洲腹地,居中靠东、沿江通海,东连江苏、浙江,西接湖北、河南,南邻江西,北靠山东,东西宽450千米,南北长570千米,安徽位于低海拔地区,…

    2017-12-18 15:33:10
  • 北京市谷歌地球高程DEM等高线下载

    北京位于东经115.7-117.4,北纬39.4-41.6,中心位于北纬3954′20″,东经11625′29″,总面积16410.54平方千米。位于华北平原北部,毗邻渤海湾,上靠辽东半岛,下临山东半岛。北京与天津相邻,并与天津一起被河北省环绕。

    2017-12-15 15:20:46

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

验证码: 看不清楚?