Fatal编程技术网
  • javascript/
  • Javascript 在地图中显示KML文件

Javascript 在地图中显示KML文件

javascript openlayers

Javascript 在地图中显示KML文件,javascript,openlayers,kml,Javascript,Openlayers,Kml,我有执行地理编码和显示图层的代码。现在我想添加KML文件显示功能。openlayers库中有用于此功能的代码。我合并了代码，但没有响应。请指导我。问题似乎出现在以下代码中： 交互：ol.interaction.defaultInteractions（）.extend（[dragAndDropInteraction]） 交互：ol.interaction.defaults（{altShiftDragRotate:false，pinchRotate:false}） 这是我的代码： <!DOCT

我有执行地理编码和显示图层的代码。现在我想添加KML文件显示功能。openlayers库中有用于此功能的代码。我合并了代码，但没有响应。请指导我。问题似乎出现在以下代码中：

交互：ol.interaction.defaultInteractions（）.extend（[dragAndDropInteraction]） 交互：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>


必应地图
.ol搜索ul{
颜色：#333；
字号：0.85em；
最大宽度：21em；
}
.ol搜索ul i{
显示：块；
颜色：#333；
字号：0.85em；
}
.info{
显示：内联块；
宽度：100%；
}
.info a img{
高度：100px；
右边距：.5em；
浮动：左；
}
html，正文{
身高：100%；
宽度：100%；
填充：0px；
边际：0px；
} 
.地图{
身高：90%；
宽度：100%；
}
.工具提示{
位置：相对位置；
背景：rgba（0,0,0,0.5）；
边界半径：4px；
颜色：白色；
填充：4px8px；
不透明度：0.7；
空白：nowrap；
}
.工具提示措施{
不透明度：1；
字体大小：粗体；
}
.工具提示静态{
背景色：#ffcc33；
颜色：黑色；
边框：1px纯白；
}
.工具提示度量值：之前，
.工具提示静态：之前{
边框顶部：6px实心rgba（0,0,0,0.5）；
右边框：6px实心透明；
左边框：6px实心透明；
内容：“；
位置：绝对位置；
底部：-6px；
左边距：-7px；
左：50%；
}
.工具提示静态：之前{
边框顶部颜色：#ffcc33；
}  
.地图{
身高：50%；
宽度：70%；
}   
地图或Arial图片：
Arial图片
地图
var source=new ol.source.Vector（）；
var vector=新的ol.layer.vector({
资料来源：资料来源，
风格：新的ol风格({
填充：新的ol.style.fill({
颜色：“rgba（255，255，255，0.2）”
}),
笔划：新的ol风格笔划({
颜色：“#ffcc33”，
宽度：2
}),
图片：新ol.style.Circle({
半径：7，
填充：新的ol.style.fill({
颜色：“#ffcc33”
})
})
})
});
/**
*当前绘制的特征。
*@type{ol.Feature}
*/
var草图；
/**
*帮助工具提示元素。
*@type{Element}
*/
var-helpTooltipElement；
/**
*覆盖以显示帮助消息。
*@type{ol.Overlay}
*/
工具提示；
/**
*度量工具提示元素。
*@type{Element}
*/
var测量电压元件；
/**
*覆盖以显示测量值。
*@type{ol.Overlay}
*/
无功测量；
/**
*用户绘制多边形时显示的消息。
*@type{string}
*/
var continuepolygonmg='单击以继续绘制多边形'；
/**
*显示用户绘制线时显示的消息。
*@type{string}
*/
var continueLineMsg='单击以继续绘制线'；
/**
*句柄指针移动。
*@param{ol.MapBrowserEvent}evt事件。
*/
var pointerMoveHandler=函数（evt）{
如果（evt.拖动）{
返回；
}
/**@type{string}*/
var helpMsg='；
如果（草图）{
var geom=（sketch.getGeometry（））；
if（几何多边形的几何实例）{
helpMsg=continuepolygonmg；
}else if（ol.geom.LineString的geom实例）{
helpMsg=continueLineMsg；
}
}
helpTooltipElement.innerHTML=helpMsg；
帮助工具提示.设置位置（evt.坐标）；
helpTooltipElement.classList.remove（'hidden'）；
};
变量样式=[
“带标签的天线”，
“osmmap”
];
var层=[]；
变量i、ii；
对于（i=0，ii=styles.length；iinteractions: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({