SuperMap学习系列(三)—地图上绘制线段

2016-7-21 14:54:07 0人评论 446次浏览 分类:技术文章

学习笔记,方便以后查询。
[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="json_parse.js"></script>  
  7.     <script src="toJSON.js"></script>  
  8.     <script src="libs/SuperMap.Include.js"></script>  
  9.     <script type="text/javascript">      
  10.         var selectStyle = {  
  11.             fillColor: "#ffcc33",  
  12.             strokeColor: "#ccff99",  
  13.             strokeWidth: 2,  
  14.             graphZIndex: 1  
  15.         };  
  16.         var map, layer, vectorLayer, control, selectFeature;  
  17.         // 设置访问的GIS服务地址  
  18.         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>";  
  19.         function GetMap() {  
  20.             // 创建地图对象  
  21.             map = new SuperMap.Map("map");  
  22.             //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时,所在点的地理坐标。  
  23.             //map.addControl(control);  //添加控件  
  24.             // 创建图层对象  
  25.             layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });  
  26.             layer.events.on({ "layerInitialized": addLayer });  
  27.             vectorLayer = new SuperMap.Layer.Vector();  
  28.         }  
  29.         // 加载图层  
  30.         function addLayer() {  
  31.             // 向Map添加图层  
  32.             map.addLayers([layer, vectorLayer]);  
  33.             map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);</p><p>            //添加大头针标记  
  34.             var markerlayers = new SuperMap.Layer.Markers("Markers");  
  35.             map.addLayer(markerlayers);  
  36.             var marker = new SuperMap.Marker(new SuperMap.LonLat(116.409749, 39.912344));  
  37.             markerlayers.addMarker(marker);</p><p>            //例如点击marker弹出popup  
  38.             marker.events.on({  
  39.                 "mouseover": openInfoWin,  
  40.                 "mouseout": closeInfoWin,  
  41.                 "click": clickHandler,  
  42.                 "scope": marker   //   还不清楚这行代码是什么意思!  如果有大神赐教,我不甚感激!  
  43.             });</p><p>            //  添加两条线段  
  44.             var points1 = [new SuperMap.Geometry.Point(116.409749, 39.912344), new SuperMap.Geometry.Point(114.358451, 38.29168)];  
  45.             var points2 = [new SuperMap.Geometry.Point(116.409749, 39.912344), new SuperMap.Geometry.Point(117.155649, 39.166468)];  
  46.             var riverLine1 = new SuperMap.Geometry.LineString(points1);  
  47.             var riverLine2 = new SuperMap.Geometry.LineString(points2);  
  48.             lineFeature1 = new SuperMap.Feature.Vector(riverLine1);  
  49.             lineFeature2 = new SuperMap.Feature.Vector(riverLine2);  
  50.             vectorLayer.addFeatures([lineFeature1, lineFeature2]);</p><p>            selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {  
  51.                 onSelect: onFeatureSelect,  
  52.                 onUnselect: onUnFeatureSelect,  
  53.                 hover: true  
  54.             });  
  55.             selectFeature.repeat = true;  
  56.             selectFeature.toggle = true;  
  57.             map.addControl(selectFeature);  
  58.             selectFeature.activate();  
  59.         }  
  60.         var infowin = null;  
  61.         function openInfoWin() {             
  62.             closeInfoWin();  
  63.             var marker = this;              
  64.             var lonlat = marker.lonlat;  
  65.             var contentHTML = "<div style='font-size:.8em; opacity: 0.8; overflow-y:hidden;'>";  
  66.             contentHTML += "<div>Hello Word</div></div>";  
  67.             var popup = new SuperMap.Popup.FramedCloud("popwin",  
  68.                 new SuperMap.LonLat(lonlat.lon, lonlat.lat),  
  69.                 null,  
  70.                 contentHTML,  
  71.                 null,  
  72.                 true);  
  73.             infowin = popup;  
  74.             map.addPopup(popup);  
  75.         }  
  76.         function closeInfoWin() {            
  77.             if (infowin) {  
  78.                 try {  
  79.                     infowin.hide();  
  80.                     infowin.destroy();  
  81.                 }  
  82.                 catch (e) { }  
  83.             }  
  84.         }  
  85.         function clickHandler() {  
  86.             closeInfoWin();  
  87.             var marker = this;  
  88.             alert("Hello Word,我被点击了!");  
  89.         }</p><p>        function onUnFeatureSelect(feature) {  
  90.             feature.style = style;  
  91.             vectorLayer.redraw();  
  92.         }  
  93.         function onFeatureSelect(feature) {  
  94.             var f = new SuperMap.Feature.Vector;  
  95.             f.geometry = feature.geometry.clone();  
  96.             f.style = style;  
  97.             vectorLayer.addFeatures(f);  
  98.         }  
  99.     </script>  
  100. </head>  
  101. <body onload="GetMap()">      
  102.     <div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>  
  103. </body>  
  104. </html>  
  105. </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

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

验证码: 看不清楚?