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

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

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

初始效果图:


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


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

附件下载

相关资讯

  • 水经注地图发布服务中件间功能简介

    水经与水经注分别源于中国古代地理名著《水经》和《水经注》。《水经注》共四十卷,作者是北魏晚期的郦道元,因注《水经》而得名。《水经》一书约一万余字,《唐六典注》说其“引天下之水,百三十七”。

    2017-10-23 11:27:20
  • 微图App中如何切换普通标注和专业标注

    《微图App》是《水经微图》的移动端,是作为数据采集和数据云同步必不可少的应用,该APP支持在Android和iOS系统上运行,暂时仅推出了Andriod版,后续会推出iOS版。

    2017-10-20 10:59:52
  • Cesium开源三维地球离线地图发布源码示例功能

    Cesium开源三维地球离线地图发布源码提供了地图切换、查询定位、模型加载、专题图叠加显示和测量功能等,旨在为用户提供一个可以在Cesium快速加载离线地图或在线地图的解决方案,并提供技术支持。

    2017-10-17 11:56:37
  • OpenLayers API 离线地图发布源码示例功能

    OpenLayers API 离线地图发布源码提供了道路交通图的离线加载功能,矢量标注功能、矢量编辑功能和测量功能等,旨在为用户提供一个可以快速加载离线地图或在线地图的解决方案,并提供技术支持。

    2017-10-17 10:51:59

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

验证码: 看不清楚?