我如何渲染geojson格式和gml格式?

时间:2012-12-24 21:13:31

标签: openlayers geojson gml

我可以显示wms png格式我的地图,但我没有通过我的网址正确服务的方式呈现jeojson和gml格式。添加我使用相同的代码,除了我本地的网址,我可以渲染本地地理服务器。 Plz告诉我一些方法???当我调用gml格式时,firebug中没有execption非常奇怪且没有渲染映射,但是当我调用geojson格式时,firebug说SyntaxError:JSON.parse:意外的数据结束。但是当我使用我的本地地理服务器时,我编辑选项和网址,我可以在我的本地显示地图gml和geojson格式。但是当我添加服务网址时我没有渲染。但是我再次可以渲染wms格式。当我在servcice url工作时,我没有使用代理不记得。谢谢你的建议 ????我的环境Openlayers,Geoserver。评论行中的一些代码。

<!DOCTYPE html>
<html>
<head>
<script src="http://myurl.com/geoserver/openlayers/OpenLayers.js"type="text/javascript">
 </script>
 <!--<script src="http://svn.osgeo.org/metacrs/proj4js/trunk/lib/proj4js-combined.js"> </script>-->
<style type="text/css">
    body {
        font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
        font-size: small;
    }
    /* Toolbar styles */

        #toolbar {
        position: relative;
        padding-bottom: 0.5em;
        display: none;
    }

       #toolbar ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #toolbar ul li {
        float: left;
        padding-right: 1em;
        padding-bottom: 0.5em;
    }

    #toolbar ul li a {
        font-weight: bold;
        font-size: smaller;
        vertical-align: middle;
        color: black;
        text-decoration: none;
    }

    #toolbar ul li a:hover {
        text-decoration: underline;
    }

    #toolbar ul li * {
        vertical-align: middle;
    }

    /* The map and the location bar */
    #map {
        clear: both;
        position: relative;
        width: 778px;
        height: 330px;
        border: 1px solid black;
    }

    #wrapper {
        width: 778px;
    }

    #location {
        float: right;
    }

    #options {
        position: absolute;
        left: 13px;
        top: 7px;
        z-index: 3000;
    }

    /* Styles used by the default GetFeatureInfo output, added to make IE happy */
    table.featureInfo, table.featureInfo td, table.featureInfo th {
        border: 1px solid #ddd;
        border-collapse: collapse;
        margin: 0;
        padding: 0;
        font-size: 90%;
        padding: .2em .1em;
    }

    table.featureInfo th {
        padding: .2em .2em;
        text-transform: uppercase;
        font-weight: bold;
        background: #eee;
    }

    table.featureInfo td {
        background: #fff;
    }

    table.featureInfo tr.odd td {
        background: #eee;
    }

    table.featureInfo caption {
        text-align: left;
        font-size: 100%;
        font-weight: bold;
        text-transform: uppercase;
        padding: .2em .2em;
    }
 </style>
 <script defer="defer" type="text/javascript">
 OpenLayers.ProxyHost = "/gt/proxy.cgi?url=";
 var lon = 5;
 var lat = 44;
 var zoom = 5;
 var map, layer;

 function init(){
    var bounds = new OpenLayers.Bounds(
            25.663514785385082,35.80899164217125,44.82543228354381,42.10495847294918
        );

         var options = {
            controls: [],
            maxExtent: bounds,
            maxResolution:6541.59135,
            projection: "EPSG:4326",
            units: 'm'
        };

         map = new OpenLayers.Map('map', options);

        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')}));

                //Gml geliyor kardes 
        map.addLayer(new OpenLayers.Layer.Vector("GML", {
        isBaseLayer: true , 
        //styleMap: myStyles,

        protocol: new OpenLayers.Protocol.HTTP({
            url: "http://myurl.com/geoserver/Tarim/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=Tarim:Iller&maxFeatures=50",
            format: new OpenLayers.Format.GML()
        }),
        strategies: [new OpenLayers.Strategy.Fixed()]
    }));
     /*var geojson_format = new OpenLayers.Format.GeoJSON();
    var vl2 = new OpenLayers.Layer.Vector("",{isBaseLayer: true});
    map.addLayer(vl2);

    var selectCtrl = new OpenLayers.Control.SelectFeature(vl2,
        {
        clickout: true, onSelect:onFeatureSelect }
    );
    var hoverCtrl = new OpenLayers.Control.SelectFeature(vl2,
        {highlightOnly: true}
    );
    //map.addControl(hoverCtrl);

    //hoverCtrl.activate();

    map.addControl(selectCtrl);
    selectCtrl.activate();

    function onFeatureSelect(evt) {
        map.zoomToExtent(evt.geometry.bounds, closest=true);
    }

    //v12.events.register("featureselected", v12, selected);

    //var controlu = new OpenLayers.Control.SelectFeature(v12);

    //map.addControl(controlu);
    //controlu.activate();
    //var bounds = new OpenLayers.Control.Navigation({
    //defaultDblClick: function(event) { return; }
    //});

    //map.addControl(Navigation);


    var report = function(e) {
        OpenLayers.Console.log(e.type, e.feature.id);
    };

   function handler(request) {
  vl2.addFeatures(geojson_format.read(request.responseText))
  map.zoomToExtent(bounds); 
  }
  var request = OpenLayers.Request.GET({
  url:"http://my url.com/geoserver/Tarim/ows?service=WFS&version=1.0.0&request=GetFeature&   typeName=Tarim:IcmeSuyuHatti&maxFeatures=50&outputFormat=json",            
 callback: handler
  });*/
 }
  </script>
 </body>
 </html>

1 个答案:

答案 0 :(得分:0)

你可以看看这个链接也许它可以帮助你访问http://openlayers.org/dev/examples// 以及关于geojson的所有例子