openlayers/geoserver와 함께 마커 추가

내 이름은 Tony입니다. 저는 베트남 사람입니다. weblog에서 openlayers/geoserver로 마커를 추가하고 싶습니다.openlayers/geoserver와 함께 마커 추가

<!-- Import OL CSS, auto import does not work with our minified OL.js build --> 
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/geoserver/openlayers/theme/default/style.css"/> 
    <!-- Basic CSS definitions --> 
    <style type="text/css"> 
    /* General settings */ 
    body { 
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
     font-size: small; 
    } 

    /* The map and the location bar */ 
    #map { 
     clear: both; 
     position: relative; 
     width: 1350px; 
     height: 600px; 
     border: 0px solid black; 
    } 

    </style> 

    <!-- Import OpenLayers, reduced, wms read only version --> 
    <script src="http://localhost:8080/geoserver/openlayers/OpenLayers.js" type="text/javascript"> 
    </script> 
    <script defer="defer" type="text/javascript"> 
    var map; 

    var tiled; 

    // pink tile avoidance 
    OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5; 
    // make OL compute scale according to WMS spec 
    OpenLayers.DOTS_PER_INCH = 25.4/0.28; 

    function init(){ 
     // if this is just a coverage or a group of them, disable a few items, 
     // and default to jpeg format 
     format = 'image/png'; 

     var bounds = new OpenLayers.Bounds(
      143.83482400000003, -43.648056, 
      148.47914100000003, -39.573891 
     ); 
     var options = { 
      controls: [], 
      maxExtent: bounds, 
      maxResolution: 0.01814186328125, 
      projection: "EPSG:4326", 
      units: 'degrees' 
      }; 
     map = new OpenLayers.Map('map', options); 

     // setup tiled layer 
     tiled = new OpenLayers.Layer.WMS(
      "Geoserver layers - Tiled", "http://localhost:8080/geoserver/wms", 
      { 
       LAYERS: 'tasmania', 
       STYLES: '', 
       format: format, 
       tiled: true, 
       tilesOrigin : map.maxExtent.left + ',' + map.maxExtent.bottom 
      }, 
      { 
       buffer: 0, 
       displayOutsideMaxExtent: true, 
       isBaseLayer: true, 
       yx : {'EPSG:4326' : true} 
      } 
     ); 

     map.addLayers([tiled]); 

     // build up all controls 
     map.addControl(new OpenLayers.Control.PanZoomBar({ 
      position: new OpenLayers.Pixel(2, 15) 
     })); 
     map.addControl(new OpenLayers.Control.Navigation()); 
     map.addControl(new OpenLayers.Control.Scale($('scale'))); 
     map.addControl(new OpenLayers.Control.MousePosition({element: $('location')})); 
     map.zoomToExtent(bounds); 

     //marker 
     var markers = new OpenLayers.Layer.Markers("Markers"); 
     map.addLayer(markers); 

     var size = new OpenLayers.Size(21,25); 
     var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); 
     var icon = new OpenLayers.Icon('http://localhost:8080/geoserver/openlayers/img/marker.png', size, offset); 
     markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(146.83482400000003, -42.648056),icon)); 
     markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(146.47914100000003, -41.573891),icon.clone())); 

     // support GetFeatureInfo 
     map.events.register('click', map, function (e) { 
      document.getElementById('nodelist').innerHTML = "Loading... please wait..."; 
      var params = { 
       REQUEST: "GetFeatureInfo", 
       EXCEPTIONS: "application/vnd.ogc.se_xml", 
       BBOX: map.getExtent().toBBOX(), 
       SERVICE: "WMS", 
       INFO_FORMAT: 'text/html', 
       QUERY_LAYERS: map.layers[0].params.LAYERS, 
       FEATURE_COUNT: 50, 
       Layers: 'tasmania', 
       WIDTH: map.size.w, 
       HEIGHT: map.size.h, 
       format: format, 
       styles: map.layers[0].params.STYLES, 
       srs: map.layers[0].params.SRS}; 

      OpenLayers.loadURL("http://localhost:8080/geoserver/wms", params, this, setHTML, setHTML); 
      OpenLayers.Event.stop(e); 
     }); 
    } 


    </script> 
</head> 
<body onload="init()"> 
<h1 id="title">Markers Layer Example</h1> 
<div id="map"> 
</div> 

</body>

오전 데 문제가 마커, 단지 webmap 표시되지 것입니다 내가 왜 알려져 있지 않습니다 여기 내 코드입니다. 여기 내 webmap는 모습입니다 같은 :

---- HTTP : //i.stack.imgur.com/OWZtP.jpg---

나는 다음 http://i1133.photobucket.com/albums/m591/tvquang_dn/marker.jpg

내 이미지 경로는 사실이다 이 페이지

http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Marker-js.html 내 코드를 작성하십시오. 읽고 도와 주셔서 대단히 감사드립니다.

출처

2012-03-03 Tony

문제점에 대한 해결책을 찾았습니다. 기본적으로 geoserver에있는 openlayer.js 파일은 마커 등의 openlayers 작업에 도움이되지 않는 171kb입니다. 따라서 완벽한 OpenlLayer.js 파일을 필요로합니다. openlayer 웹 사이트에서 300kb.

코드는 아무 것도 변경할 필요가 없습니다. 그냥

그것은 확실히 작동합니다 .. 감사를하실

입니다 스크립트 소스 , Gaurav을 변경

출처

2012-03-05 12:52:30 Gaurav

감사하지만 다운로드 openlayers 버전 2.11 (우편) 오픈 레이어 웹 사이트 및 OpenlLayer.js에서 약 958kb입니다. – Tony

openlayers/geoserver와 함께 마커 추가

답변

관련 문제