zoukankan      html  css  js  c++  java

  • openlayer

    http://starting.iteye.com/category/58366?show_full=trueopenlayer 添加marker弹出窗口
      博客分类：
    • gis
    Java代码 复制代码
    1. var markers,marker,popup;   
    2.         var markArr=new Array();   
    3.         function addMarker(){   
    4.                
    5.             /* var url = 'http://www.openlayers.org/dev/img/marker.png';  
    6.                 var sz = new OpenLayers.Size(20, 20);  //尺寸大小  
    7.                 var calculateOffset = function(size) {  
    8.                                     return new OpenLayers.Pixel(-(size.w/2), -size.h);  
    9.                                  };  
    10.                 var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);  
    11.                   
    12.                 marker = new OpenLayers.Marker(new OpenLayers.LonLat(116.34851,33.22630), icon);*/  
    13.                 if(popup!=null){   
    14.                      onPopupMouseDown(); //先移除掉   
    15.                  }   
    16.                  feature = new OpenLayers.Feature(tiled, new OpenLayers.LonLat(116.34851,33.22630));   
    17. //tiled 是增加的图层名称，OpenLayers.Layer.WMS的对象       
    18.                 marker = feature.createMarker();   
    19.                   markers.addMarker(marker);   
    20.   
    21.                 marker.events.register("mousedown", marker, function(evt){   
    22.                      if (popup == null) {   
    23.                         popup = new OpenLayers.Popup("click",    
    24.                                                  new OpenLayers.LonLat(116.34851,33.22630),   
    25.                                                  new OpenLayers.Size(100,100),   
    26.                                                  "click me",   
    27.                                                  true);   
    28.                          popup.setBorder("#999999 solid 1px");   
    29.                          popup.closeOnMove = true;   
    30.                         map.addPopup(popup);   
    31.                     } else {   
    32.                         popup.toggle();   
    33.                      }   
    34.                     OpenLayers.Event.stop(evt);   
    35.                 });   
    36.         }   
    37.         //移除Popup   
    38.         function onPopupMouseDown() {   
    39.             markers.map.removePopup(popup);   
    40.             popup.destroy();   
    41.             popup = null;   
    42.         }    

    openlayer调用geoserver发布的地图实现地图的基本功能

      博客分类：
    • gis
    CSSGoogleIEJavaScriptXHTML

    主要实现的功能有放大，缩小，获取地图大小，平移，线路测量，面积测量，拉宽功能，显示标注，移除标注，画多边形获取经纬度坐标。根据经纬度坐标显示多边形。地图切换，图层控制等功能

    Html代码 复制代码
    1. <?xml version="1.0" encoding="UTF-8"?>  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">  
    3. <html xmlns="http://www.w3.org/1999/xhtml">  
    4.     <head>  
    5.         <title>OpenLayers map preview</title>  
    6.         <!-- Import OL CSS, auto import does not work with our minified OL.js build -->  
    7.         <link rel="stylesheet" type="text/css" href="../theme/default/style.css"/>  
    8.          <link rel="stylesheet" href="../theme/default/google.css" type="text/css">  
    9.         <!-- Basic CSS definitions -->  
    10.         <style type="text/css">  
    11.             /* General settings */   
    12.             body {   
    13.                 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;   
    14.                 font-size: small;   
    15.             }   
    16.             /* Toolbar styles */   
    17.             #toolbar {   
    18.                 position: relative;   
    19.                 padding-bottom: 0.5em;    
    20.                   
    21.             }   
    22.                
    23.             /* The map and the location bar */   
    24.             #map {   
    25.                 clear: both;   
    26.                 position: relative;   
    27.                  698px;   
    28.                 height: 330px;   
    29.                 border: 1px solid black;   
    30.             }   
    31.                
    32.             #wrapper {   
    33.                  698px;   
    34.             }   
    35.                
    36.             #location {   
    37.                 float: right;   
    38.             }   
    39.   
    40.             /* Styles used by the default GetFeatureInfo output, added to make IE happy */   
    41.             table.featureInfo, table.featureInfo td, table.featureInfo th {   
    42.                 border: 1px solid #ddd;   
    43.                 border-collapse: collapse;   
    44.                 margin: 0;   
    45.                 padding: 0;   
    46.                 font-size: 90%;   
    47.                 padding: .2em .1em;   
    48.             }   
    49.                
    50.             table.featureInfo th {   
    51.                 padding: .2em .2em;   
    52.                 text-transform: uppercase;   
    53.                 font-weight: bold;   
    54.                 background: #eee;   
    55.             }   
    56.                
    57.             table.featureInfo td {   
    58.                 background: #fff;   
    59.             }   
    60.                
    61.             table.featureInfo tr.odd td {   
    62.                 background: #eee;   
    63.             }   
    64.                
    65.             table.featureInfo caption {   
    66.                 text-align: left;   
    67.                 font-size: 100%;   
    68.                 font-weight: bold;   
    69.                 text-transform: uppercase;   
    70.                 padding: .2em .2em;   
    71.             }   
    72.         </style>  
    73.         <!-- Import OpenLayers, reduced, wms read only version -->  
    74.        <script src="../lib/OpenLayers.js" ></script>  
    75.         <script src="http://maps.google.com/maps/api/js?sensor=false"></script>  
    76.         <script defer="defer" type="text/javascript">  
    77.             var map, measureControls;   
    78.             var untiled;   
    79.             var tiled;   
    80.                
    81.             function init(){   
    82.                 format = 'image/png';   
    83.                 var bounds = new OpenLayers.Bounds(  //地图区域范围   
    84.                     74.137, 6.319,   
    85.                     135.086, 53.558   
    86.                 );   
    87.                 var options = {   
    88.                     controls: [],   
    89.                      maxExtent: bounds,   
    90.                     maxResolution: 0.23808203125,   
    91.                     projection: "EPSG:4610",   
    92.                     numZoomLevels: 7,    
    93.                     units: 'degrees'   
    94.                 };   
    95.                 map = new OpenLayers.Map('map', options);   
    96.            
    97.                /**********************加载图层 开始*******************************/   
    98.               /*   tiled = new OpenLayers.Layer.WMS(  //图层组   
    99.                     "基础图层", "http://localhost:8080/geoserver/wms",   
    100.                     {   
    101.                         height: '330',   
    102.                          '698',   
    103.                         layers: 'sf',   
    104.                         styles: '',   
    105.                         srs: 'EPSG:4326',   
    106.                         format: format,   
    107.                         tiled: 'true',   
    108.                         tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom   
    109.                     },   
    110.                     {   
    111.                         buffer: 0,   
    112.                         displayOutsideMaxExtent: true   
    113.                     }    
    114.                 );*/   
    115.                    
    116.                 var streams = new OpenLayers.Layer.WMS(    //图层组   
    117.                     "中国", "http://localhost:8080/geoserver/wms",   
    118.                     {   
    119.                        height: '330',   
    120.                          '698',   
    121.                         layers: 'china',   
    122.                         styles: '',   
    123.                         srs: 'EPSG:4610',   
    124.                         format: format,   
    125.                         tiled: 'true',   
    126.                         tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom   
    127.                     },   
    128.                     {   
    129.                         buffer: 0,   
    130.                         displayOutsideMaxExtent: true   
    131.   
    132.                     }    
    133.                 );   
    134.                
    135.                 untiled = new OpenLayers.Layer.WMS(  //单独图层   
    136.                     "省会", "http://127.0.0.1:8080/geoserver/wms",   
    137.                     {   
    138.                         height: '330',   
    139.                          '698',   
    140.                         layers: 'china:provice',   
    141.                         styles: '',   
    142.                         srs: 'EPSG:4610',   
    143.                         transparent: "true",   
    144.                         format: format   
    145.                     },   
    146.                     {singleTile: true, ratio: 1}    
    147.                 );   
    148.                  untiled.setVisibility(false); //设置为不显示   
    149.                 //var gmap = new OpenLayers.Layer.Google("Google Streets", {visibility: false});       
    150.                 /* var dm_wms = new OpenLayers.Layer.WMS( "点图层",   
    151.                 "http://127.0.0.1:8080/geoserver/wms",   
    152.                 {layers: "sf:bugsites,sf:archsites",   
    153.                  transparent: "true", format: "image/png"});*/   
    154.   
    155.                map.addLayers([streams,untiled]);   
    156.               /********************END 加载图层*********************************/   
    157.   
    158.                /************************加载一般的基础控件********************************/      
    159.                 map.addControl(new OpenLayers.Control.PanZoomBar({  //添加平移缩放工具条   
    160.                     position: new OpenLayers.Pixel(2, 15)   
    161.                 }));   
    162.                 map.addControl(new OpenLayers.Control.Navigation());  //双击放大,平移   
    163.                 map.addControl(new OpenLayers.Control.Scale($('scale')));  //获取地图比例尺   
    164.                 map.addControl(new OpenLayers.Control.MousePosition({element: $('location')}));  //获取鼠标的经纬度   
    165.                 map.setCenter(new OpenLayers.LonLat(100.254, 35.25), 1);  //添加平移缩放工具条   
    166.                 map.addControl(new OpenLayers.Control.OverviewMap());  //添加鹰眼图   
    167.                 map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));  //图层切换工具               
    168.                 map.addControl(new OpenLayers.Control.Permalink('xxxx'));  //添加永久链接   
    169.                 //map.addControl(new OpenLayers.Control.MouseToolbar());   
    170.   
    171.                 //map.zoomToMaxExtent();   
    172.                 var zb=new OpenLayers.Control.ZoomBox({out:true});   
    173.                 var panel = new OpenLayers.Control.Panel({defaultControl: zb});   
    174.                 map.addControl(panel);   
    175.              /************END************加载一般的基础控件********************************/      
    176.   
    177.                /***********************鼠标点击，获取图层数据*******************************/      
    178.                 map.events.register('click', map, function (e) {   
    179.                     document.getElementById('nodelist').innerHTML = "Loading... please wait...";   
    180.                     var params = {   
    181.                         REQUEST: "GetFeatureInfo",   
    182.                         EXCEPTIONS: "application/vnd.ogc.se_xml",   
    183.                         BBOX: map.getExtent().toBBOX(),   
    184.                         X: e.xy.x,   
    185.                         Y: e.xy.y,   
    186.                         INFO_FORMAT: 'text/html',   
    187.                         QUERY_LAYERS: map.layers[0].params.LAYERS,   
    188.                         FEATURE_COUNT: 50,   
    189.                         Layers: 'ok',   
    190.                         Styles: '',   
    191.                         Srs: 'EPSG:4610',   
    192.                         WIDTH: map.size.w,   
    193.                         HEIGHT: map.size.h,   
    194.                         format: format};   
    195.                     OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML);   
    196.                     OpenLayers.Event.stop(e);   
    197.                 });   
    198.               /**************END*********鼠标点击，获取图层数据*******************************/      
    199.   
    200.             /**********************************点、线、面测量开始**********************************************/   
    201.              var sketchSymbolizers = {   
    202.                 "Point": {   
    203.                     pointRadius: 4,    
    204.                     graphicName: "square",   
    205.                     fillColor: "white",   
    206.                     fillOpacity: 1,   
    207.                     strokeWidth: 1,   
    208.                     strokeOpacity: 1,   
    209.                     strokeColor: "#333333"   
    210.                 },   
    211.                 "Line": {   
    212.                     strokeWidth: 3,   
    213.                     strokeOpacity: 1,   
    214.                     strokeColor: "#666666",   
    215.                     strokeDashstyle: "dash"   
    216.                 },   
    217.                 "Polygon": {   
    218.                     strokeWidth: 2,   
    219.                     strokeOpacity: 1,   
    220.                     strokeColor: "#666666",   
    221.                     fillColor: "white",   
    222.                     fillOpacity: 0.3   
    223.                 }   
    224.             };   
    225.             var style = new OpenLayers.Style();   
    226.             style.addRules([   
    227.                 new OpenLayers.Rule({symbolizer: sketchSymbolizers})   
    228.             ]);   
    229.              var styleMap = new OpenLayers.StyleMap({"default": style});   
    230.              measureControls = {   
    231.                 line: new OpenLayers.Control.Measure(   
    232.                     OpenLayers.Handler.Path, {   
    233.                         persist: true,   
    234.                         handlerOptions: {   
    235.                             layerOptions: {styleMap: styleMap}   
    236.                         }   
    237.                     }   
    238.                 ),   
    239.                 polygon: new OpenLayers.Control.Measure(   
    240.                     OpenLayers.Handler.Polygon, {   
    241.                         persist: true,   
    242.                         handlerOptions: {   
    243.                             layerOptions: {styleMap: styleMap}   
    244.                         }   
    245.                     }   
    246.                 )   
    247.             };   
    248.              var control;   
    249.             for(var key in measureControls) {   
    250.                 control = measureControls[key];   
    251.                 control.events.on({   
    252.                     "measure": handleMeasurements,   
    253.                     "measurepartial": handleMeasurements   
    254.                 });   
    255.                 map.addControl(control);   
    256.             }   
    257.             /***************************END************点，线、面积测量*****************************************/   
    258.   
    259.               //添加点标注的图层   
    260.               markers = new OpenLayers.Layer.Markers("markers");   
    261.               map.addLayer(markers);     
    262.               markers.setZIndex(200);   
    263.   
    264.        }   
    265.                
    266.         //获取面积的结果赋值   
    267.           function handleMeasurements(event) {   
    268.             var geometry = event.geometry;   
    269.             var units = event.units;   
    270.             var order = event.order;   
    271.             var measure = event.measure;   
    272.             var element = document.getElementById('output');   
    273.             var out = "";   
    274.             if(order == 1) {   
    275.                 out += "面积为: " + measure.toFixed(3) + " " + units;   
    276.             } else {   
    277.                 out += "面积为: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";   
    278.             }   
    279.             element.innerHTML = out;   
    280.         }   
    281.         function setHTML(response){   
    282.             document.getElementById('nodelist').innerHTML = response.responseText;   
    283.         };   
    284.         //缩小   
    285.         function zoomOut(){   
    286.             map.zoomOut();   
    287.         }   
    288.         //放大   
    289.         function zoomIn(){   
    290.             map.zoomIn();   
    291.         }   
    292.         //获取地图数据   
    293.         function getSize(){   
    294.             alert(map.getSize()+",高度为="+map.getSize().h);   
    295.         }   
    296.         //切换鼠标事件功能   
    297.         function toggleControl(_value) {   
    298.                
    299.             for(key in measureControls) {   
    300.                 var control = measureControls[key];   
    301.                 if(_value == key ) {   
    302.                     control.activate();   
    303.                 } else {   
    304.                     control.deactivate();   
    305.                 }   
    306.             }   
    307.         }   
    308.   
    309.         /*********************拉宽并获取经纬度坐标系*********************************/   
    310.         function boxExtend(){   
    311.             var controlBox = new OpenLayers.Control();   
    312.               OpenLayers.Util.extend(controlBox, {   
    313.                     draw: function () {   
    314.                         this.box = new OpenLayers.Handler.Box( controlBox,   
    315.                             {"done": this.notice},{ "persist": true},   
    316.                             {keyMask:OpenLayers.Handler.MOD_SHIFT });   
    317.                         this.box.activate();   
    318.                     },   
    319.   
    320.                     notice: function (bounds) {        
    321.                         var ll = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.left, bounds.bottom));    
    322.                         var ur = map.getLonLatFromPixel(new OpenLayers.Pixel(bounds.right, bounds.top));    
    323.                         alert(ll.lon.toFixed(4) + ", " +    
    324.                               ll.lat.toFixed(4) + ", " +    
    325.                               ur.lon.toFixed(4) + ", " +    
    326.                               ur.lat.toFixed(4));   
    327.                     }   
    328.                 });   
    329.             map.addControl(controlBox);   
    330.         }   
    331.         var markers,marker;   
    332.         var markArr=new Array();   
    333.         function addMarker(){   
    334.              var url = 'http://www.openlayers.org/dev/img/marker.png';   
    335.                 var sz = new OpenLayers.Size(20, 20);  //尺寸大小   
    336.                 var calculateOffset = function(size) {   
    337.                                     return new OpenLayers.Pixel(-(size.w/2), -size.h);   
    338.                                  };   
    339.                 var icon = new OpenLayers.Icon(url, sz, null, calculateOffset);   
    340.                    
    341.                 marker = new OpenLayers.Marker(new OpenLayers.LonLat(113.34851,33.22630), icon);   
    342.                 markers.addMarker(marker);   
    343.   
    344.                // marker = new OpenLayers.Marker(madrid, icon.clone());   
    345.                // markers.addMarker(marker);               
    346.         }   
    347.          function removeMarker() {   
    348.                 markers.removeMarker(marker);   
    349.          }   
    350.          /*******************多边形获取经纬度坐标系*************************/   
    351.          function test(){   
    352.             var getpolygonxy = new OpenLayers.Control();   
    353.             OpenLayers.Util.extend(getpolygonxy, {   
    354.                 draw: function() {   
    355.                     this.polygon= new OpenLayers.Handler.Polygon(getpolygonxy ,   
    356.                             { "done": this.notice },{ "persist": true},   
    357.                             { keyMask: OpenLayers.Handler.MOD_SHIFT });   
    358.                     this.polygon.activate();   
    359.                 },   
    360.                 notice: function(bounds) {   
    361.                     alert(bounds);//坐标信息                       
    362.                 }   
    363.             });   
    364.             map.addControl(getpolygonxy);   
    365.          }   
    366.        
    367.         </script>  
    368.     </head>  
    369.     <body onload="init()">  
    370.         <div id="toolbar" style="display:">              
    371.             <input type="button" value="放大" onclick="zoomIn()"/>  
    372.             <input type="button" value="缩小" onclick="zoomOut()"/>  
    373.             <input type="button" value="获取地图大小" onclick="getSize()"/>  
    374.             <input type="button" value="平移" onclick="toggleControl('none')"/>  
    375.             <input type="button" value="线路测量" onclick="toggleControl('line')"/>  
    376.             <input type="button" value="测量面积" onclick="toggleControl('polygon')"/>  
    377.             <input type="button" value="shift拉框" onclick="boxExtend()"/>  
    378.             <input type="button" value="显示标注" onclick="addMarker()"/>  
    379.             <input type="button" value="移除标注" onclick="removeMarker()"/>  
    380.             <input type="button" value="画多边形获取经纬度坐标" onclick="test()"/>  
    381.         </div>  
    382.         <div id="map">  
    383.               
    384.         </div>  
    385.         <div id="wrapper">  
    386.             <div id="location">经纬度坐标</div>  
    387.             <div id="scale">  
    388.             </div>  
    389.             <div id="output">  
    390.             </div>  
    391.         </div>  
    392.         <div id="xystr"></div>  
    393.         <div id="nodelist">  
    394.             <em>Click on the map to get feature info</em>  
    395.         </div>  
    396.     </body>  
    397. </html>  

     根据经纬度坐标串显示多边形代码如下
  • 相关阅读:
    php中常用的4种运行方式
    vue前后端分离项目，使用宝塔面板解决跨域问题,设置Nginx反向代理
    通过 Nginx 代理转发配置实现跨域（API 代理转发）
    ajax跨域，这应该是最全的解决方案了
    vue项目打包之后怎么在本地运行
    webpack打包vue项目之后生成的dist文件该怎么启动运行
    PHP7 windows增加自定义扩展和编译PHP源代码
    编写php自定义扩展
    PHP 扩展开发初探
    php实现伪静态以及定义原理
  • 原文地址：https://www.cnblogs.com/moonvan/p/2271975.html
Copyright © 2011-2022 走看看