Javascript 如何从用户内存上传并在地图上显示kml文件
我有一个显示地图和使用openlayers库进行地理编码的代码。你也可以通过在地图上拖动来显示kml文件。 现在,我希望用户从设备内存中选择此文件并将其插入地图。例如,使用“搜索”按钮并选择要执行此操作的文件。可以使用openlayers库吗?我什么也找不到。我该怎么做?请引导我。 谢谢 这是我的代码:Javascript 如何从用户内存上传并在地图上显示kml文件,javascript,html,openlayers,kml,Javascript,Html,Openlayers,Kml,我有一个显示地图和使用openlayers库进行地理编码的代码。你也可以通过在地图上拖动来显示kml文件。 现在,我希望用户从设备内存中选择此文件并将其插入地图。例如,使用“搜索”按钮并选择要执行此操作的文件。可以使用openlayers库吗?我什么也找不到。我该怎么做?请引导我。 谢谢 这是我的代码: <!DOCTYPE html> <html> <head> <title>KML</title> <link
<!DOCTYPE html>
<html>
<head>
<title>KML</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>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="info"> </div>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
key: 'Ar3HbeAWJ2BNWw49Jnce_gbrbyqiPSBFuci9N4942gLNyBZgfzFPYn0d4QvpH06G'
})
});
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: 'Data/earth.kml',
format: new ol.format.KML()
})
});
var map = new ol.Map({
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: [58.3005,37.0554],
projection: 'EPSG:4326',
zoom: 13
})
});
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(', ') || '(unknown)';
map.getTarget().style.cursor = 'pointer';
} else {
document.getElementById('info').innerHTML = ' ';
map.getTarget().style.cursor = '';
}
};
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);
});
</script>
</body>
</html>
KML
var raster=新建ol.layer.Tile({
来源:新ol.source.BingMaps({
图像集:“天线”,
关键字:“Ar3HbeAWJ2BNWw49Jnce_gbrbyqiPSBFuci9N4942gLNyBZgfzFPYn0d4QvpH06G”
})
});
var vector=新的ol.layer.vector({
来源:新ol.source.Vector({
url:'Data/earth.kml',
格式:新建ol.format.KML()
})
});
var map=新ol.map({
图层:[光栅,矢量],
目标:document.getElementById('map'),
视图:新ol.view({
中心:[58.3005,37.0554],
投影:‘EPSG:4326’,
缩放:13
})
});
var displayFeatureInfo=函数(像素){
var特征=[];
map.forEachFeatureAtPixel(像素,函数(特征){
功能。推送(功能);
});
如果(features.length>0){
var信息=[];
变量i、ii;
对于(i=0,ii=features.length;i
您可以使用HTML输入和javascript文件读取器
<div id="map" class="map"></div>
<input id="selectfile" type="file" accept=".kml" onchange="addKML()">
<div id="info"> </div>
<script>
function addKML() {
var file = document.getElementById("selectfile").files[0];
if (file) {
var reader = new FileReader();
reader.onload = function () {
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: reader.result,
format: new ol.format.KML()
})
});
map.addLayer(vector);
}
reader.readAsDataURL(file);
}
}
函数addKML(){
var file=document.getElementById(“selectfile”).files[0];
如果(文件){
var reader=new FileReader();
reader.onload=函数(){
var vector=新的ol.layer.vector({
来源:新ol.source.Vector({
url:reader.result,
格式:新建ol.format.KML()
})
});
map.addLayer(向量);
}
reader.readAsDataURL(文件);
}
}
谢谢。这很有用,也很有效。但在向地图添加图层时,它不会放大。我使用了以下代码:map.getView().fit(vector.source.getExtent());但没有起作用。请您指导我。应该是map.getView().fit(vector.getSource().getExtent())代码>但由于源代码是异步处理的,因此需要一个超时,或者可以在添加每个新功能时调整('addfeature',function(){map.getView().fit(vector.getSource().getExtent());})代码>