<!DOCTYPE html>
<html>
<head> <title>OpenLayers KML Example</title> <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/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> </head>
<body>
<div id="
mapdivmap" class="map"></div>
<
script srcdiv id="
https:info"> </
div> <script> import Map from 'ol/
cdnjsMap.
cloudflarejs'; import View from 'ol/View.
comjs'; import KML from 'ol/
ajaxformat/
libsKML.js'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/
openlayers/2layer.
11js'; import BingMaps from 'ol/
libsource/
OpenLayersBingMaps.js
"><'; import VectorSource from 'ol/
script> source/Vector.js'; <script> map var raster = new
OpenLayers.MapTileLayer(
"mapdiv");{ map.addLayer( source: new
OpenLayersBingMaps({ imagerySet: 'Aerial', key: 'Your Bing Maps Key from http://www.
Layerbingmapsportal.
OSM(com/ here' })
});
var
kmllayer vector = new
OpenLayers.Layer.VectorVectorLayer(
"KML", {
strategies source:
[new
OpenLayers.Strategy.Fixed()], protocol: new OpenLayers.Protocol.HTTPVectorSource({
url:
"'http://www.wikiexplora.com/images/2/23/Monolito.kmz
"',
format: new
OpenLayers.FormatKMZ() }) }); var map = new Map({ layers: [raster, vector], target: document.
KMLgetElementById('map'), view: new View({
extractStyles center:
true[876970.8463461736, 5859807.853963373],
extractAttributes projection: 'EPSG:
true3857',
maxDepth zoom:
210 })
})
; var displayFeatureInfo = function(pixel) { var features = []; map.forEachFeatureAtPixel(pixel, function(feature) { features.push(feature); });
mapif (features.addLayer(kmllayerlength > 0); //Set start centrepoint and zoom{ //TODO: Is it possible to just zoom to extents of KML objects instead? var lonLat info = new OpenLayers.LonLat[]; var i, ii; for ( -i = 0.1279688 ,51ii = features.5077286 length; i < ii; ++i){ info.transformpush(features[i].get('name')); new OpenLayers } document.ProjectiongetElementById("EPSG:4326"'info').innerHTML = info.join(', // transform from WGS 1984') || '(unknown)'; map.getProjectionObjectgetTarget() // to Spherical Mercator Projection.style.cursor = 'pointer'; } else { document.getElementById('info'); var zoom.innerHTML =14' '; map.setCenter getTarget(lonLat, zoom); //Add a selector control to the kmllayer with popup functions var controls = { selector: new OpenLayers.Controlstyle.SelectFeature(kmllayer, { onSelect: createPopup, onUnselect: destroyPopup cursor = ''; }) };
map.on('pointermove', function createPopup(featureevt) { feature.popup = new OpenLayers.Popup.FramedCloud if ("pop", featureevt.geometry.getBounds(dragging).getCenterLonLat(),{ null,return; '<div class } var pixel ="markerContent">'+featuremap.attributes.description+'</div>', null, true, functiongetEventPixel() { controls['selector']evt.unselectAll(originalEvent); } displayFeatureInfo(pixel); //feature.popup.closeOnMove = true; map.addPopup(feature.popup}); }
map.on('click', function destroyPopup(featureevt) { feature displayFeatureInfo(evt.popup.destroy(pixel); feature.popup = null; } map.addControl(controls['selector']); controls['selector'].activate(); </script> </body></html>
