supermap学习系列(六)—自定义地图添加点、线、面标注

2016-7-21 14:56:13 0人评论 234次浏览 分类:技术文章

参考资源超图地理信息云门户-示例:
http://www.supermapcloud.com/online/developAPI.html

上代码:

[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 map, layer, popup;  
  9.         var featuresLayer, drawLine, drawPoint, drawPolygon, selectDrawFeature;  
  10.         var drawFeatureStyle = {  
  11.             strokeColor: null,  
  12.             strokeWidth: null,  
  13.             strokeOpacity: null,  
  14.             pointRadius: 6,  
  15.             fillColor: null,  
  16.             fillOpacity: null,  
  17.             cursor: "pointer"  
  18.         };//定义要添加要素的样式    
  19.         var selectStyle={  
  20.             strokeColor: "#0099FF",  
  21.             strokeWidth: 2,  
  22.             pointerEvents: "visiblePainted",  
  23.             fillColor: "#FF8247",  
  24.             fillOpacity: 0.4,  
  25.             pointRadius: 6,  
  26.             label: "",  
  27.             fontSize: 14,  
  28.             fontWeight: "normal",  
  29.             cursor: "pointer"  
  30.         };// 点击添加的元素之后的样式  
  31.         // 设置访问的GIS服务地址  
  32.         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>";  
  33.         function GetMap() {  
  34.             // 创建地图对象  
  35.             map = new SuperMap.Map("map");  
  36.             //control = new SuperMap.Control.MousePosition();     //该控件显示鼠标移动时,所在点的地理坐标。  
  37.             //map.addControl(control);  //添加控件    
  38.             featuresLayer = new SuperMap.Layer.Vector("<a target="_blank" href="mailto:test!@#');//">test!@#");//</a>  test!@#  是图层的name属性  
  39.             drawLine = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Path, { multi: true });  
  40.             drawLine.events.on({ "featureadded": drawCompleted });  
  41.             drawPoint = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Point, { multi: true });  
  42.             drawPoint.events.on({ "featureadded": drawCompleted });  
  43.             drawPolygon = new SuperMap.Control.DrawFeature(featuresLayer, SuperMap.Handler.Polygon, { multi: true });  
  44.             drawPolygon.events.on({ "featureadded": drawCompleted });  
  45.             map.addControls([drawLine, drawPoint, drawPolygon]);  
  46.             map.addLayer(featuresLayer);  
  47.             // 创建图层对象  
  48.             layer = new SuperMap.Layer.TiledDynamicRESTLayer("World", url, { transparent: true, cacheEnabled: true }, { maxResolution: "auto" });  
  49.             layer.events.on({ "layerInitialized": AddLayer });  
  50.         }  
  51.         // 加载图层  
  52.         function AddLayer() {  
  53.             // 向Map添加图层  
  54.             map.addLayer(layer);  
  55.             map.setCenter(new SuperMap.LonLat(116.409749, 39.912344), 1);</p><p>            //这里添加两种事件方式点击事件和mouseover事件,都可以实现,这里屏蔽掉单击事件。  
  56.             //  添加单击事件  
  57.             //selectDrawFeature = new SuperMap.Control.SelectFeature(featuresLayer, {  
  58.             //    onSelect: openWindow,  
  59.             //    onUnselect: unfeatueSelect  
  60.             //});  
  61.             //selectDrawFeature.repeat = true;  
  62.             //selectDrawFeature.toggle = true;  
  63.             //map.addControl(selectDrawFeature);  
  64.             //selectDrawFeature.activate();     
  65.             //添加鼠标mouseover 事件  
  66.             selectDrawFeature = new SuperMap.Control.SelectFeature(featuresLayer, {  
  67.                 onSelect: openWindow,  
  68.                 onUnselect: unfeatueSelect,  
  69.                 hover:true  
  70.             });              
  71.             map.addControl(selectDrawFeature);  
  72.             selectDrawFeature.activate();  
  73.         }          
  74.         function drawFeature(type) {  
  75.             var fillColor = document.getElementById("color1").value;  
  76.             var strokeColor = document.getElementById("color2").value;  
  77.             var opacity = document.getElementById("txtOpacity").value;  
  78.             var lineWidth = document.getElementById("txtLineWidth").value;  
  79.             drawFeatureStyle.fillColor = fillColor;  
  80.             drawFeatureStyle.strokeColor = strokeColor;  
  81.             drawFeatureStyle.strokeWidth = lineWidth;  
  82.             drawFeatureStyle.strokeOpacity = opacity;  
  83.             drawFeatureStyle.fillOpacity = opacity;  
  84.             if (type === "point") {  
  85.                 drawPoints();  
  86.             }  
  87.             else if (type === "line") {  
  88.                 drawLines();  
  89.             }  
  90.             else if (type === "polygon") {  
  91.                 drawPolygons();  
  92.             }  
  93.         }  
  94.         function drawPoints() {  
  95.             featuresLayer.style = drawFeatureStyle;  
  96.             drawPoint.activate();  
  97.         }  
  98.         function drawLines() {  
  99.             featuresLayer.style = drawFeatureStyle;  
  100.             drawLine.activate();  
  101.         }  
  102.         function drawPolygons() {  
  103.             featuresLayer.style = drawFeatureStyle;  
  104.             drawPolygon.activate();  
  105.         }  
  106.         function drawCompleted(drawGeometryArgs) {  
  107.             drawLine.deactivate();  
  108.             drawPoint.deactivate();  
  109.             drawPolygon.deactivate();             
  110.         }         
  111.         function clearAll() {  
  112.             featuresLayer.removeAllFeatures();  
  113.         }  
  114.         function openWindow(feature) {  
  115.             var name;  
  116.             if (feature.geometry.CLASS_NAME == "SuperMap.Geometry.MultiPoint") {  
  117.                 name = "标注点";  
  118.             } else if (feature.geometry.CLASS_NAME == "SuperMap.Geometry.MultiPolygon") {  
  119.                 name = "标注面"  
  120.             } else {  
  121.                 name = "标注线"  
  122.             }  
  123.             popup = new SuperMap.Popup.FramedCloud("chicken",  
  124.                                      feature.geometry.getBounds().getCenterLonLat(),  
  125.                                      null,  
  126.                                      name,  
  127.                                      null, true);  
  128.             feature.popup = popup;  
  129.             popup.panMapIfOutOfView = true;  
  130.             map.addPopup(popup);  
  131.             feature.style = selectStyle;  
  132.             featuresLayer.redraw();  
  133.             featuresLayer.setOpacity(0.5);  
  134.         }  
  135.         function unfeatueSelect(feature) {  
  136.             map.removePopup(feature.popup);  
  137.             feature.popup.destroy();  
  138.             feature.popup = null;</p><p>            feature.style = drawFeatureStyle;  
  139.             featuresLayer.redraw();  
  140.         }  
  141.     </script>  
  142. </head>  
  143. <body onload="GetMap()">    
  144.     <div>  
  145.         <img alt="点" src="resource/controlImages/drawPoint.png" onclick="drawFeature('point')" />  
  146.         <img alt="线" src="resource/controlImages/drawLine.png" onclick="drawFeature('line')" />  
  147.         <img alt="面" src="resource/controlImages/drawRegion.png" onclick="drawFeature('polygon')" />  
  148.         <img alt="清除" src="resource/controlImages/eraser.png" onclick="clearAll()" />  
  149.     </div>    
  150.     <div>  
  151.        <table style="font-size: 12px">  
  152.                 <tr>  
  153.                     <td>  
  154.                         填充颜色:  
  155.                     </td>  
  156.                     <td>  
  157.                         <input type="text" size="10" id="color1" maxlength="7" name="rgb1" value="#FFFFFF"  
  158.                             onclick="showColorPicker(this, document.forms[0].rgb1)"/>  
  159.                     </td>  
  160.                 </tr>  
  161.                 <tr>  
  162.                     <td>  
  163.                         填充透明度:  
  164.                     </td>  
  165.                     <td>  
  166.                         <select id="txtOpacity">  
  167.                             <option value="0.1">0.1</option>  
  168.                             <option value="0.2">0.2</option>  
  169.                             <option value="0.3">0.3</option>  
  170.                             <option value="0.4">0.4</option>  
  171.                             <option value="0.5" selected="selected">0.5</option>  
  172.                             <option value="0.6">0.6</option>  
  173.                             <option value="0.7">0.7</option>  
  174.                             <option value="0.8">0.8</option>  
  175.                             <option value="0.9">0.9</option>  
  176.                             <option value="1.0">1.0</option>  
  177.                         </select>  
  178.                     </td>  
  179.                 </tr>  
  180.                 <tr>  
  181.                     <td>  
  182.                         线宽:  
  183.                     </td>  
  184.                     <td>  
  185.                         <input type="text" id="txtLineWidth" style="width: 50px" value="2" />  
  186.                     </td>  
  187.                 </tr>  
  188.                 <tr>  
  189.                     <td>  
  190.                         边线颜色:  
  191.                     </td>  
  192.                     <td>  
  193.                         <input type="text" size="10" id="color2" maxlength="7" name="rgb2" value="#FF0000"  
  194.                             onclick="showColorPicker(this, document.forms[0].rgb2)"/>  
  195.                     </td>  
  196.                 </tr>  
  197.             </table></p><p>  
  198.     </div>  
  199.     <div id="map" style="height: 640px; width: 720px; border: 1px solid red; margin-left: auto; margin-right: auto;"></div>  
  200. </body>  
  201. </html>  
  202. </p>  

注:在这里用户可以自己设置要添加元素的填充颜色、边框颜色、边框宽度以及填充透明度。这里颜色只是别代码,不能用汉字。

初始加载:

首先点击上面的图片按钮,添加点线面:

鼠标移动到添加的标注上面时(其实和上一篇类似,关键是添加点线面):

附件下载

相关资讯

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

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

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

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

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

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

    2018-5-29 14:18:43
  • 浙江省谷歌地球高程DEM等高线下载(百度网盘下载)

    一、概述浙江,简称“浙”,省会杭州。境内最大的河流钱塘江,因江流曲折,称之江、折江,又称浙江,省以江名。地处中国东南沿海长江三角洲南翼,东临东海,南接福建,西与安徽、江西相连,北与上海、江苏接壤。浙江省东西和南北的直线距离均为450公里左右。据全国第二次土地调…

    2018-5-18 11:54:10

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

验证码: 看不清楚?