OpenLayers 3 не показывает слой KML

Я новичок в OpenLayers, и я пытаюсь добавить слой KML к карте.OpenLayers 3 не показывает слой KML

Вот мой сценарий:

var projection = ol.proj.get('EPSG:3857'); 

var mapa = new ol.layer.Tile({ 
    source: new ol.source.OSM() 
}); 

var map = new ol.Map({ 
    target: 'map', 
    controls: ol.control.defaults({ 
     attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ 
      collapsible: false 
     }) 
    }), 
    view: new ol.View({ 
     center: [-5462834.47, -3058929.70], 
     projection: projection, 
     zoom: 10 
    }) 
}); 

map.addLayer(mapa); 

var alfalfa_zaragoza = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     url: 'kml/ms_alfalfazaragoza_rgba_ndvi.kml', 
     format: new ol.format.KML() 
    }), 
    extractStyles: true, 
    extractAttributes: true, 
    maxDepth: 2, 
    setVisibility: true 
}); 



document.getElementById('addKML').onclick = function() { 
    map.addLayer(alfalfa_zaragoza); 
};

И мой HTML-страница:

<html> 
<head> 
    <title>Title</title> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.2.0/css/ol.css" type="text/css"> 
    <script type="javascript" src="<%=request.getContextPath()%>/resources/OpenLayersv3.14.2/build/ol.js"></script> 
    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script> 
    <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/OpenLayersv3.14.2/css/ol.css" type="text/css" /> 
    <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/ol3-google-maps-v0.4/ol3gm.css" type="text/css" /> 
    <link rel="stylesheet" href="<%=request.getContextPath()%>/resources/layout.css" type="text/css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 

</head> 
<body> 

<div class="container-fluid"> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <div id="map" class="map"></div> 
     </div> 
    </div> 
    <div class="row-fluid"> 
     <div class="span12"> 
      <h4>Concept example</h4> 

      <div class="row"> 
       <div class="col-md-4 col-sm-4"> 
        <fieldset> 
         <input id="addKML" type="button" value="Add KML" 
           title="Add KML layer"/> 
        </fieldset> 
       </div> 
      </div> 

     </div> 
    </div> 
</div> 
<script src="<%=request.getContextPath()%>/resources/ol3-google-maps-v0.4/ol3gm.js"></script> 
<script src="<%=request.getContextPath()%>/resources/kml.js"></script> 

</body> 
</html>

Где ошибка? Идея состоит в том, чтобы нажать кнопку «addKML», и слой добавляется к карте, но когда я нажимаю ее, ничего не происходит.

источник

2016-03-23 Miguel Ortega

Это странно, что он работает на меня. Вы просто забыли маленькую вещь:

Замените эту строку:

var projection = ol.proj.get('EPSG:3857');

С этим:

var projection = new ol.proj.get('EPSG:3857');

Вы забыли 'новый'!

Я тестировал его с помощью KML-файлов, и он работает. Вероятно, ваш KML-файл поврежден или проекция неверна. Но для меня он работает только с заменой файла url KML.

источник

2017-01-26 08:45:45 KBill

ответ

Смежные вопросы