一、OpenLayers介绍
用于WEB-GIS开发的js包,很强很好用。
二、代码功能介绍
基于OpenLayers的地图加载和显示地图,并做一个简单的搜索功能。
三、代码
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="OpenLayers/css/ol.css" type="text/css">
<script src="OpenLayers/js/ol.js"></script>
<title>Z</title>
</head>
<style>
.map {
width: 100%;
}
#turns{
position: fixed;
right: 1rem;
top: 1rem;
z-index: 9999;
}
#x{
background: #F4F4F4;
}
#y{
background: #F4F4F4;
}
</style>
<body>
<div id='turns'>
<input id="x" type="text" placeholder="请输入经度" value=''/>
<input id="y" type="text" placeholder="请输入纬度" value=''/>
<input type="button" value="点击切换" onclick="change()"/>
</div>
<div id="map" class="map"></div>
<script type="text/javascript">
// 屏幕高度
document.getElementById("map").style.height = window.innerHeight - 20 + "px";
// 初始值
var x = 119.7218677900;
var y = 30.2611135600;
var zoom = 15;
// 实例化地图
var map = new ol.Map({
// 定位html🐎中的位置
target: 'map',
layers: [
layers = new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
// 中心位置
center: ol.proj.fromLonLat([x, y]),
// 缩放等级
zoom: zoom
})
});
function change(){
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
if(x == '' || y == ''){
alert("请输入经纬度!");
}else{
// 重来
document.getElementById("map").innerHTML = '';
// 要是能重来,我就选李白
var map = new ol.Map({
// 定位html🐎中的位置
target: 'map',
layers: [
layers = new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
// 中心位置
center: ol.proj.fromLonLat([x, y]),
// 缩放等级
zoom: zoom
})
});
// alert(map);
}
}
</script>
</body>
</html>
四、说明
1、OpenLayers必不可少的是target、layers和view,掌握这些内容就能掌握基本的地图显示
2、搜索功能的实现是通过innerHTML先清除div内容,在通过实例OpenLayers添加内容。