Display KML file in the map
Question
I have code that performs geocoding and show layers. Now I want to add the KML file display feature.There are the code in the openlayers library for this.I combined the code but it does not answer. please guide me.It looks like the problem is in the following code:
interactions:ol.interaction.defaultInteractions().extend([dragAndDropInteraction]) interactions:ol.interaction.defaults({ altShiftDragRotate:false, pinchRotate:false })
this is my code:
<!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"> </div>
<div>
<label>Map or Arial picture: </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(', ') || ' ';
} else {
document.getElementById('info').innerHTML = ' ';
}
};
//
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>
1 answers
solution1
1 ACCPTED 2019-06-12 19:14:11
There are some errors in your code where you have changed from modules to full build syntax
interactions:ol.interaction.defaultInteractions().extend([dragAndDropInteraction])
var vectorSource = new ol.source.VectorSource({
map.addLayer(new ol.layer.VectorLayer({
Should be
interactions:ol.interaction.defaults().extend([dragAndDropInteraction])
var vectorSource = new ol.source.Vector({
map.addLayer(new ol.layer.Vector({
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Google Map won't load/display KML file
Display KML file data in a table
KML file not overlaying on google map in wordpress site
Unable to render KML file into google map
Draw Google map using kml file
KML-file loaded but background map not visible
KML file loads but doesn't display - why not?
Cannot display custom icons from KML file
Display polygon kml file using geoxml3
Google Maps API, using a KML file, map is blank
Related Tags