2

我正在尝试在 OpenLayers 中的 VirtualEarth 地图上放置 KML，但它不起作用。我想它必须与投影有关。

Map:
var options = {
    controls: [ new OpenLayers.Control.KeyboardDefaults(),
                new OpenLayers.Control.MouseDefaults(),
                new OpenLayers.Control.PanZoomBar(),
                new OpenLayers.Control.LayerSwitcher()
                ],
    maxExtent: new OpenLayers.Bounds( -200000, -200000, 200000, 200000),
    numZoomLevels: 19,
    units: 'm',
    projection: new OpenLayers.Projection("EPSG:900913"),
 displayProjection: new OpenLayers.Projection("EPSG:4326"),
sphericalMercator: true

};


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

var binghybrid = new OpenLayers.Layer.VirtualEarth("Hybrid", {
            type: VEMapStyle.Hybrid
});


KML:
var animals = new OpenLayers.Layer.Vector("Animals", {
           projection: new OpenLayers.Projection("EPSG:4326"),
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "kml/animals.kml",
                format: new OpenLayers.Format.KML({
                    extractStyles: true,
                    extractAttributes: true
                })
            })
        });

有人吗？！谢谢你。

4

3 回答 3

1

我在本文档中找到了答案：http: //docs.openlayers.org/library/spherical_mercator.html

编辑示例： http: //openlayers.org/dev/examples/spherical-mercator.html

关键在于：

    var in_options = {
      'internalProjection': new OpenLayers.Projection("EPSG:900913"),
      'externalProjection': new OpenLayers.Projection("EPSG:4326")
    };
    var kmlOptionsIn = OpenLayers.Util.extend({ extractStyles: false },in_options);

    var features = new OpenLayers.Format.KML(kmlOptionsIn).read(kml);

这里是示例的完整来源。（只需复制/粘贴到 html 文件中，加载并单击“添加 KML”按钮）。

<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <link rel="stylesheet" href="js/OpenLayers/theme/default/style.css" type="text/css" /> 
    <script src='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
    <script src="js/OpenLayers/OpenLayers.js"></script> 
    <script type="text/javascript">
        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, layer, vectors, formats;
        function init() {

            var options = {
                units: "m",
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
                restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            };


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


            var hybrid = new OpenLayers.Layer.VirtualEarth("Bing Base Map",
            {
                sphericalMercator: true,
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)

            });


            var venctor_options = {
                units: "m",
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
                restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
            };

            vectors = new OpenLayers.Layer.Vector("Vector Layer", venctor_options);
            map.addControl(new OpenLayers.Control.MousePosition());
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addLayers([hybrid, vectors]);
            map.zoomToMaxExtent();
//            var center = new OpenLayers.LonLat(-30, 12);
//            map.setCenter(center, 1);



        }


        function deserialize() {

            var kml = "<?xml version='1.0' encoding='UTF-8'?><kml xmlns='http://www.opengis.net/kml/2.2'><Document><name>Granules</name><description>Exported on Wed Nov 24 2010 09:41:38 GMT-0500 (Eastern Standard Time)</description><Placemark><name>GRAN-46</name><description>{ ID:46, TYPE:'OPT', START_DATE:'7/23/2003 4:21:17 PM', END_DATE:'7/23/2003 4:22:13 PM', INGESTDATE:'3/25/2004 12:00:00 AM', EXTERNAL_ID:null, PIXELS:6000, LINES:37494, DATA_PRODIVER_ID:1, COMMENTS:'null' }</description><Polygon><outerBoundaryIs><LinearRing id=''><coordinates>-81.2162649929523,31.1248919963837 -81.177305996418,31.2556949853897 -81.0197220146656,31.781594991684 -80.8606449961662,32.3073099851608 -80.7000299990177,32.8328340053558 -80.5378299951553,33.3581640124321 -80.3739939928055,33.8832920193672 -80.2084729969502,34.4082159996033 -80.8601450026035,34.515996992588 -81.0217449963093,33.9903180003166 -81.18175598979,33.4644510149956 -81.3402259945869,32.9384009838104 -81.4972029924393,32.412172973156 -81.6527320146561,31.8857709765434 -81.8068569898605,31.359197974205 -81.8449699878693,31.2282310128212 -81.2162649929523,31.1248919963837 </coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark></Document></kml>"

            var type = "kml";
            var in_options = {
              'internalProjection': new OpenLayers.Projection("EPSG:900913"),
              'externalProjection': new OpenLayers.Projection("EPSG:4326")
            };
            var kmlOptionsIn = OpenLayers.Util.extend({ extractStyles: false },in_options);

            var features = new OpenLayers.Format.KML(kmlOptionsIn).read(kml);
            var bounds;

            if (features) {
                if (features.constructor != Array) {
                    features = [features];
                }
                for (var i = 0; i < features.length; ++i) {
                    if (!bounds) {
                        bounds = features[i].geometry.getBounds();
                    } else {
                        bounds.extend(features[i].geometry.getBounds());
                    }
                }
                vectors.addFeatures(features);
                map.zoomToExtent(bounds);

            }
        }

    </script> 
    <style type="text/css">
/**
 * CSS Reset
 * From Blueprint reset.css
 * http://blueprintcss.googlecode.com
 */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/**
 * Basic Typography
 */
body {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #222;
    background: #fff;
    margin: 1em 1.5em;
}
pre, code {
    margin: 1.5em 0;
    white-space: pre;
}
pre, code {
    font: 1em 'andale mono', 'lucida console', monospace;
    line-height:1.5;
}
a[href] {
    color: #436976;
    background-color: transparent;
}
h1, h2, h3, h4, h5, h6 {
    color: #003a6b;
    background-color: transparent;
    font: 100% 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
    margin: 0;
    padding-top: 0.5em;
}
h1 {
    font-size: 130%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #fcb100;
}
h2 {
    font-size: 120%;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #aaa;
}
h3 {
    font-size: 110%;
    margin-bottom: 0.5em;
    text-decoration: underline;
}
h4 {
    font-size: 100%;
    font-weight: bold;
}
h5 {
    font-size: 100%;
    font-weight: bold;
}
h6 {
    font-size: 80%;
    font-weight: bold;
}

/**
 * Map Examples Specific
 */
.smallmap {
    width: 800px;
    height: 600px;
    border: 1px solid #ccc;
}
#tags {
    display: none;
}

#docs p {
    margin-bottom: 0.5em;
}    
    </style>
  </head> 
  <body onload="init()"> 
      <h1 id="title">KML Layer Example</h1> 

      <div id="tags"> 
        KML
      </div> 

      <p id="shortdesc"> 
          Demonstrates loading and displaying a KML file on top of a basemap. <button onclick="deserialize()">Add KML</button>
    </p> 

    <div id="map" class="smallmap"></div> 

    <div id="docs"></div> 
  </body> 
</html>
于 2010-11-29T17:03:19.533 回答
0

Please bother that I use OpenLayers example by previous programmer. But, I made some innovative changes that even better. For now, I strongly recommend you to use Google Maps. Here I simplify a JavaScript where you can put in head tag:

    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>

Then, you may insert Google Maps into the OpenLayers as follow:

<script type="text/javascript">
    var lon = 5;
    var lat = 40;
    var zoom = 5;
    var map, layer, vectors, formats;
    function init() {var options = {
            units: "m",
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };
map = new OpenLayers.Map('map', options);
var gmap = new OpenLayers.Layer.Google(
        "Google Streets", 
        {
            numZoomLevels: 20,
            sphericalMercator: true,
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        });
var vector_options = {
            units: "m",
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            restrictedExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
        };
vectors = new OpenLayers.Layer.Vector("Vector Layer", vector_options);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.addLayers([gmap, vectors]);
        map.zoomToMaxExtent();
    }
</script>

I'm just happy to help. Good luck!

于 2011-07-12T04:31:29.907 回答
0

KML 和 Bing 地图应使用相同的投影和坐标系。您是否尝试将它们设置为相同？这是 Thqr 关于 addLayers 建议的补充（因为您有一个代码片段，不清楚您是否正在这样做）

在一般情况下，OpenLayers 可以重新投影矢量数据，但您还需要包含 Proj4JS 库。

于 2010-11-19T15:02:02.080 回答