Fatal编程技术网
  • javascript/
  • Javascript Openlayers中的KML层不'；不能在本地主机上工作

Javascript Openlayers中的KML层不'；不能在本地主机上工作

javascript google-maps openlayers

Javascript Openlayers中的KML层不'；不能在本地主机上工作,javascript,google-maps,kml,openlayers,Javascript,Google Maps,Kml,Openlayers,我在OpenLayers中呈现KML文件时遇到了奇怪的问题。这似乎很容易，但事实并非如此。我从这里的一个例子开始。我想添加我自己的KML。它不起作用。我创建了一个带有绝对URL的示例的本地副本，如下所示： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="wid

我在OpenLayers中呈现KML文件时遇到了奇怪的问题。这似乎很容易，但事实并非如此。我从这里的一个例子开始。我想添加我自己的KML。它不起作用。我创建了一个带有绝对URL的示例的本地副本，如下所示：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
    <script src="http://openlayers.org/dev/OpenLayers.js"></script>            
    <style type="text/css">
        html, body {
            height: 100%;
        }
        #map {
            width: 100%;
            height: 80%;
            border: 1px solid black;
        }
        .olPopup p { margin:0px; font-size: .9em;}
        .olPopup h2 { font-size:1.2em; }
    </style>
    <script type="text/javascript">


        var lon = 5;
        var lat = 40;
        var zoom = 5;
        var map, select;

        function init(){
            map = new OpenLayers.Map('map');

            var wms = new OpenLayers.Layer.WMS(
                "OpenLayers WMS",
                "http://vmap0.tiles.osgeo.org/wms/vmap0",
                {layers: 'basic'}
            );

            var sundials = new OpenLayers.Layer.Vector("KML", {
                projection: map.displayProjection,
                strategies: [new OpenLayers.Strategy.Fixed()],
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "http://openlayers.org/dev/examples/kml/sundials.kml",
                    format: new OpenLayers.Format.KML({
                        extractStyles: true,
                        extractAttributes: true
                    })
                })
            });

            map.addLayers([wms, sundials]);
            alert("deded");
            select = new OpenLayers.Control.SelectFeature(sundials);

            sundials.events.on({
                "featureselected": onFeatureSelect,
                "featureunselected": onFeatureUnselect
            });

            map.addControl(select);
            select.activate();   
            map.zoomToExtent(new OpenLayers.Bounds(68.774414,11.381836,123.662109,34.628906));
        }
        function onPopupClose(evt) {
            select.unselectAll();
        }
        function onFeatureSelect(event) {
            var feature = event.feature;
            // Since KML is user-generated, do naive protection against
            // Javascript.
            var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
            if (content.search("<script") != -1) {
                content = "Content contained Javascript! Escaped content below.<br>" + content.replace(/</g, "&lt;");
            }
            popup = new OpenLayers.Popup.FramedCloud("chicken", 
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     new OpenLayers.Size(100,100),
                                     content,
                                     null, true, onPopupClose);
            feature.popup = popup;
            map.addPopup(popup);
        }
        function onFeatureUnselect(event) {
            var feature = event.feature;
            if(feature.popup) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                delete feature.popup;
            }
        }
    </script>
  </head>
  <body onload="init()">
      <h1 id="title">KML Layer Example</h1>

      <div id="tags">
          kml, popup, feature
      </div>

      <p id="shortdesc">
          Demonstrates loading and displaying a KML file on top of a basemap.
    </p>

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

    <div id="docs"></div>
  </body>
</html>


html，正文{
身高：100%；
}
#地图{
宽度：100%；
身高：80%；
边框：1px纯黑；
}
.p{margin:0px；字体大小：.9em；}
.OLH2{字体大小：1.2em；}
var-lon=5；
var-lat=40；
var=5；
var映射，选择；
函数init（）{
map=newOpenLayers.map（'map'）；
var wms=new OpenLayers.Layer.wms(
“OpenLayers WMS”，
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers:'basic'}
);
var Sundails=新的OpenLayers.Layer.Vector（“KML”{
投影：map.displayProjection，
策略：[新建OpenLayers.Strategy.Fixed（）]，
协议：新OpenLayers.protocol.HTTP({
url:“http://openlayers.org/dev/examples/kml/sundials.kml",
格式：new OpenLayers.format.KML({
这是真的，
属性：true
})
})
});
添加图层（[wms，日晷]）；
警惕（“deed”）；
选择=新建OpenLayers.Control.SelectFeature（日晷）；
日晷({
“featureselected”：在FeatureSelect上，
“featureunselected”：onFeatureUnselect
});
map.addControl（选择）；
选择。激活（）；
zoomToExtent（新的OpenLayers.Bounds（68.774414,11.381836123.662109,34.628906））；
}
函数onPopupClose（evt）{
select.unselectAll（）；
}
功能onFeatureSelect（事件）{
var-feature=event.feature；
//因为KML是用户生成的，所以要针对
//Javascript。
var content=“”+feature.attributes.name+“”+feature.attributes.description；

if（content.search（“您的
sundails.kml
本地副本无法呈现的原因是您使用的是
OpenLayers.Protocol.HTTP
，它不会加载此类地址
file://directory/file.kml

但我不知道你发布的代码为什么不能呈现。我目前正在努力解决同样的问题。我能告诉你的是还有什么不起作用

解释了如何使用GML层加载KML层。不幸的是，他们在文档中给出的代码片段与实际代码片段不匹配，这与他们的大多数其他KML（和GML）示例一样使用向量层

无论如何，我复制了示例代码，但根据文档，将向量层更改为
var layer=new OpenLayers.layer.GML（“GML”、“GML/polygon.xml”）；
。然后，我制作了OpenLayers.js、polygon.xml和.css样式表的本地副本，并将URL更改为指向本地副本。因此，所有内容都是本地的


<!DOCTYPE html> 
<html> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <title>GML Doesn't Render</title> 
        <link rel="stylesheet" href="defaultstyle.css" type="text/css"> 
        <link rel="stylesheet" href="examplesstyle.css" type="text/css"> 
        <script src="OpenLayers.js"></script> 
        <script type="text/javascript">
            var map;

            function init(){
                map = new OpenLayers.Map('map');
                var wms = new OpenLayers.Layer.WMS(
                    "OpenLayers WMS", "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'}
                );

                var layer = new OpenLayers.Layer.GML("GML", "gml/polygon.xml");

                map.addLayers([wms, layer]);
                map.zoomToExtent(new OpenLayers.Bounds(
                    -3.92, 44.34, 4.87, 49.55
                ));
            }
        </script> 
    </head> 
    <body onload="init()"> 
        <div id="map" class="smallmap"></div> 
    </body> 
</html> 


它不起作用

甚至有一个加载“在底图上本地存储的GML矢量数据”的特定示例。它使用与文档相同的代码，因此，不用说，它不起作用。我无法链接到它，因为我还没有足够的声誉来创建三个超链接，但如果您搜索示例中的“GML”，您可以找到它

Openlayers有一个安全特性，使得从完全不同的位置加载数据和javascript变得非常困难（如果必须这样做的话，还有一个称为“proxyhost”的解决方案）。但我看不出当所有URL都指向本地主机时，这会涉及到什么

请温柔一点，这是我的第一篇帖子


编辑：结果是a）这是浏览器的安全功能，而不是OpenLayers；b）它不允许本地主机上的脚本在本地主机上加载任何其他文件，即使您处于脱机状态。Chrome/Chrome有一个命令行参数-允许从文件访问文件。使用此参数，上述示例可以工作。其他解决方法（用谷歌搜索它们）看起来很棘手。
这条线索已经过时了，但我知道它仍然会被关注

尝试在创建KML图层时设置投影。这对我很有效


    var kmllayer = new OpenLayers.Layer.Vector("KML", {
            projection: map.displayProjection,



感谢您的回复。尽管它没有给出答案，但知道其他人也在为同样的问题而挣扎是件好事。但我发现：当我将所有内容存储在一台服务器上（而不是本地文件）时，它是有效的：（我的KML是欧洲的一些行，所以你需要平移地图才能看到它）.无论如何，这个错误让我的想法大打折扣：/@CloudCho这个答案已经有八年了，所以幸运的是还有什么可以链接的，但我已经尽了最大努力。请更新你的链接。

    var kmllayer = new OpenLayers.Layer.Vector("KML", {
            projection: map.displayProjection,