打开第 3 层：如何仅显示 KML 图层答案

【问题标题】：Open Layers 3: how to display only a KML layer打开第 3 层：如何仅显示 KML 图层
【发布时间】：2015-06-17 15:26:00
【问题描述】：

我正在尝试创建一个 OpenLayers 地图，该地图仅显示 KML 图层，而没有底图或底层切片图层。

KML 图层将是一个室内平面图，但它不需要位于现有地图之上的特定坐标位置。我只需要自己显示平面图，没有其他地图。我还想设置平移限制，这样用户就不能平移离开地图。

以下是我用来在现有基础地图上成功显示 KML 图层的一些代码。我尝试了很多方法来尝试让 KML 图层自行显示，但无济于事。

谁能帮助解决这个问题，或者告诉我我需要用下面的代码更改什么以单独显示 KML？

var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            url: MAPS_URL + 'map1.kml',
            format: new ol.format.KML()
        })
    });

var map = new ol.Map({
           target: 'map',
           layers: [
              new ol.layer.Tile({
                  source: new ol.source.MapQuest({layer: 'sat'})
              }),
              vector
           ],
           view: new ol.View({
           center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
           zoom: 2
       })
   });

map.addLayer(vector);

谢谢！

【问题讨论】：

如果你删除了瓦片层会发生什么？
我已经分叉了一个openlayers kml example，删除了基本地图，一切都很好。
是的，工作正常。我以前试过这个，但无法让它工作！可能只是一个愚蠢的语法错误之类的，感谢您向我指出这一点！

标签： javascript kml openlayers-3

【解决方案1】：

正如 Jonatas 和 Tsauerwein 所说，我只需要移除平铺层即可。

拉拉：

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: MAPS_URL + 'map1.kml',
        format: new ol.format.KML()
    })
});

var map = new ol.Map({
       target: 'map',
       layers: [vector],
       view: new ol.View({
       center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
       zoom: 2
   })
});

map.addLayer(vector);

【讨论】：

【解决方案2】：

您是否检查过是否可以读取 KML 文件？可能存在 CORS 问题。

我建议使用 AJAX 调用来加载 KML，然后使用 ol.format.KML 读取功能并将这些添加到源中。

sourceVector = new ol.source.Vector();
layerVector = new ol.layer.Vector({
  source: sourceVector
  });
formatKML = new ol.format.KML({extractStyles: false});
$.ajax('http://storage.googleapis.com/dbauszus-file-bucket/rtmLmpHg.kml',{
  type: 'GET',
  contentType: 'application/vnd.google-earth.kml+xml', 
  success : function(response) {
    features = formatKML.readFeatures(response,{
      dataProjection: 'EPSG:4326',
      featureProjection: 'EPSG:3857'
    });
    sourceVector.addFeatures(features);
    }
  });

如果您无法像这样读取文件，请在 Firebugz NET 选项卡中检查 CORS 问题。

【讨论】：