1

我叫托尼。我来自越南。我想用 openlayers/geoserver 在 webgis 中添加一个标记。这是我的代码：

    <!-- 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>

我遇到的问题是它不会显示标记，只是一个网络地图，我不知道为什么。这是我的网络地图的样子：

----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 来编写我的代码。非常感谢您的阅读和帮助。

4

1 回答 1

0

我找到了解决您问题的方法。这是因为默认情况下，geoserver 中存在的 openlayer.js 文件为 171 kb，这对许多 openlayers 操作（如标记弹出等）没有帮助......因此，您需要获得一个完美的 OpenlLayer.js 文件，大约超过 300kb来自 openlayer 网站。

您的代码非常完美，无需更改任何内容。只需更改当前的脚本源

至

它肯定会起作用..问候， Gaurav

于 2012-03-05T12:52:30.007 回答