在地图中显示 KML 文件

Question

我有执行地理编码和显示图层的代码。现在我想添加 KML 文件显示 feature.There 是 openlayers 库中的代码 this.I 组合代码但它没有回答。请指导 me.It 看起来问题出在以下代码中：

interactions:ol.interaction.defaultInteractions().extend([拖放交互]) interactions:ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })

这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Bing Maps</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="description" content="Control to add a grid reference to a map." />
    <meta name="keywords" content="ol3, control, search, BAN, french, places, autocomplete" />

    <!-- FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <!-- jQuery -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <!-- IE 9 bug on ajax tranport  -->
    <!--[if lte IE 9]>
    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js'></script>
    <![endif]-->

    <!-- Openlayers -->
    <link rel="stylesheet" href="https://openlayers.org/en/latest/css/ol.css" />

    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>

    <!-- ol-ext -->
    <link rel="stylesheet" href="http://viglino.github.io/ol-ext/dist/ol-ext.css" />
    <script type="text/javascript" src="http://viglino.github.io/ol-ext/dist/ol-ext.js"></script>

    <link rel="stylesheet" href="../style.css"/>
    <style>
        .ol-search ul {
            color: #333;
            font-size:0.85em;
            max-width: 21em;
        }
        .ol-search ul i {
            display: block;
            color: #333;
            font-size:0.85em;
        }
        .info {
            display: inline-block;
            width: 100%;
        }
        .info a img {
            height: 100px;
            margin-right: .5em;
            float: left;
        }
    </style>
    <style>
      html, body {
        height: 100%;
        width: 100%;
    padding: 0px;
    margin: 0px;
      } 
      .map {
        height: 90%;
        width: 100%;
      }
    </style>
    <style>
      .tooltip {
        position: relative;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 4px;
        color: white;
        padding: 4px 8px;
        opacity: 0.7;
        white-space: nowrap;
      }
      .tooltip-measure {
        opacity: 1;
        font-weight: bold;
      }
      .tooltip-static {
        background-color: #ffcc33;
        color: black;
        border: 1px solid white;
      }
      .tooltip-measure:before,
      .tooltip-static:before {
        border-top: 6px solid rgba(0, 0, 0, 0.5);
        border-right: 6px solid transparent;
        border-left: 6px solid transparent;
        content: "";
        position: absolute;
        bottom: -6px;
        margin-left: -7px;
        left: 50%;
      }
      .tooltip-static:before {
        border-top-color: #ffcc33;
      }  
      .map {
        height: 50%;
        width: 70%;
      }   

      </style>
  </head>
  <body>
     <div id="map" class="map"></div>
     <div id="info">&nbsp;</div>

     <div>
      <label>Map or Arial picture: &nbsp;</label>
     <select id="layer-select">
       <option value="AerialWithLabels" selected>Arial picture</option>

       <option value="osmmap">Map </option>
     </select>
     </div>
    <script>


       var source = new ol.source.Vector();

      var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.2)'
          }),
          stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 2
          }),
          image: new ol.style.Circle({
            radius: 7,
            fill: new ol.style.Fill({
              color: '#ffcc33'
            })
          })
        })
      });


      /**
       * Currently drawn feature.
       * @type {ol.Feature}
       */
      var sketch;


      /**
       * The help tooltip element.
       * @type {Element}
       */
      var helpTooltipElement;


      /**
       * Overlay to show the help messages.
       * @type {ol.Overlay}
       */
      var helpTooltip;


      /**
       * The measure tooltip element.
       * @type {Element}
       */
      var measureTooltipElement;


      /**
       * Overlay to show the measurement.
       * @type {ol.Overlay}
       */
      var measureTooltip;


      /**
       * Message to show when the user is drawing a polygon.
       * @type {string}
       */
      var continuePolygonMsg = 'Click to continue drawing the polygon';


      /**
       * Message to show when the user is drawing a line.
       * @type {string}
       */
      var continueLineMsg = 'Click to continue drawing the line';


      /**
       * Handle pointer move.
       * @param {ol.MapBrowserEvent} evt The event.
       */
      var pointerMoveHandler = function(evt) {
        if (evt.dragging) {
          return;
        }
        /** @type {string} */
        var helpMsg = 'برای اندازه گیری کلیک کنید';

        if (sketch) {
          var geom = (sketch.getGeometry());
          if (geom instanceof ol.geom.Polygon) {
            helpMsg = continuePolygonMsg;
          } else if (geom instanceof ol.geom.LineString) {
            helpMsg = continueLineMsg;
          }
        }

        helpTooltipElement.innerHTML = helpMsg;
        helpTooltip.setPosition(evt.coordinate);

        helpTooltipElement.classList.remove('hidden');
      };


      var styles = [
        'AerialWithLabels',
        'osmmap'
      ];
      var layers = [];
      var i, ii;
      for (i = 0, ii = styles.length; i < ii-1; ++i) {
        layers.push(new ol.layer.Tile({
          visible: false,
          preload: Infinity,
          source: new ol.source.BingMaps({
            key: 'Ar3HbeAWJ2BNWw49Jnce_gbrbyqiPSBFuci9N4942gLNyBZgfzFPYn0d4QvpH06G ',
            imagerySet: styles[i]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
          })
        }));
      }
      layers.push(new ol.layer.Tile({
          visible: false,
          preload: Infinity,
          source: new ol.source.OSM({
            imagerySet: styles[1]
            // use maxZoom 19 to see stretched tiles instead of the BingMaps
            // "no photos at this zoom level" tiles
            // maxZoom: 19
          })
        }));
        layers.push(vector);
        // kml
    var dragAndDropInteraction = new ol.interaction.DragAndDrop({
        formatConstructors: [
          ol.format.GPX,
          ol.format.GeoJSON,
          ol.format.IGC,
          ol.format.KML,
          ol.format.TopoJSON
        ]
      });
      //end kml
      var map = new ol.Map({
        layers: layers,
        // Improve user experience by loading tiles while dragging/zooming. Will make
        // zooming choppy on mobile or slow devices.
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([51.39, 35.70]),
          zoom: 10
        }),
        interactions:ol.interaction.defaultInteractions().extend([dragAndDropInteraction])
      });

      var select = document.getElementById('layer-select');
      function onChange() {
        var style = select.value;
        for (var i = 0, ii = layers.length; i < ii; ++i) {
          layers[i].setVisible(styles[i] === style);
        }
      }
      select.addEventListener('change', onChange);
      onChange();

           map.on('pointermove', pointerMoveHandler);

      map.getViewport().addEventListener('mouseout', function() {
        helpTooltipElement.classList.add('hidden');
      });

      // Current selection
    var sLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                stroke: new ol.style.Stroke ({
                    color: 'rgb(255,165,0)',
                    width: 3
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,165,0,.3)'
                })
            }),
            stroke: new ol.style.Stroke ({
                color: 'rgb(255,165,0)',
                width: 3
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255,165,0,.3)'
            })
        })
    });
    map.addLayer(sLayer);

    // Set the search control 
    var search = new ol.control.SearchNominatim (
        {   //target: $(".options").get(0),
            polygon: $("#polygon").prop("checked"),
            position: true  // Search, with priority to geo position
        });
    map.addControl (search);

    // Select feature when click on the reference index
    search.on('select', function(e)
        {   // console.log(e);
            sLayer.getSource().clear();
            // Check if we get a geojson to describe the search
            if (e.search.geojson) {
                var format = new ol.format.GeoJSON();
                var f = format.readFeature(e.search.geojson, { dataProjection: "EPSG:4326", featureProjection: map.getView().getProjection() });
                sLayer.getSource().addFeature(f);
                var view = map.getView();
                var resolution = view.getResolutionForExtent(f.getGeometry().getExtent(), map.getSize());
                var zoom = view.getZoomForResolution(resolution);
                var center = ol.extent.getCenter(f.getGeometry().getExtent());
                // redraw before zoom
                setTimeout(function(){
                        view.animate({
                        center: center,
                        zoom: Math.min (zoom, 16)
                    });
                }, 100);
            }
            else {
                map.getView().animate({
                    center:e.coordinate,
                    zoom: Math.max (map.getView().getZoom(),16)
                });
            }
        });
        //kml

      dragAndDropInteraction.on('addfeatures', function(event) {
        var vectorSource = new ol.source.VectorSource({
          features: event.features
        });
        map.addLayer(new ol.layer.VectorLayer({
          source: vectorSource
        }));
        map.getView().fit(vectorSource.getExtent());
      });
      //
      var displayFeatureInfo = function(pixel) {
        var features = [];
        map.forEachFeatureAtPixel(pixel, function(feature) {
          features.push(feature);
        });
        if (features.length > 0) {
          var info = [];
          var i, ii;
          for (i = 0, ii = features.length; i < ii; ++i) {
            info.push(features[i].get('name'));
          }
          document.getElementById('info').innerHTML = info.join(', ') || '&nbsp';
        } else {
          document.getElementById('info').innerHTML = '&nbsp;';
        }
      };
      //
      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
      });

      map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
      });

      //end kml


    </script>
  </body>
</html>

Answer 1

您从模块语法更改为完整构建语法的代码中存在一些错误

interactions:ol.interaction.defaultInteractions().extend([dragAndDropInteraction])

var vectorSource = new ol.source.VectorSource({

map.addLayer(new ol.layer.VectorLayer({

应该是

interactions:ol.interaction.defaults().extend([dragAndDropInteraction])

var vectorSource = new ol.source.Vector({

map.addLayer(new ol.layer.Vector({

在地图中显示 KML 文件

Display KML file in the map

javascript

kml

openlayers