OpenLayers入门练习
2024-09-08 11:57:07
一、实验内容
- 练习OpenLayers的引用形式;
- 简单地图加载;
- 控件加载。
二、实验步骤
2.1 ol引用
<!doctype html>
<html lang="zh">
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
</body>
</html>
2.2 单个地图显示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta content="text/html;charset=UTF-8">
<title>OpenLayers example</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body,
div {
height: 100%;
width: 100%;
margin: 0%;
}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 10
})
});
</script>
</body>
</html>
2.3 两幅静态地图显示
<html>
<head>
<meta charset="utf-8">
<title>单个地图加载</title>
<link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
}
#map_1 {
width: 49%;
height: 99%;
float: left;
}
#map_2 {
width: 49%;
height: 99%;
float: right;
}
</style>
</head>
<body>
<div id="map_1"></div>
<div id="map_2"></div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map_1',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
var map_2 = new ol.Map({
target: 'map_2',
layers: [new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
})
})],
view: new ol.View({
center: [0, 0],
zoom: 2
})
})
</script>
</body>
</html>
2.4 地图联动
<html>
<head>
<meta charset="utf-8">
<title>地图加载</title>
<link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
}
#map_1 {
width: 49%;
height: 99%;
float: left;
}
#map_2 {
width: 49%;
height: 99%;
float: right;
}
</style>
</head>
<body>
<div id="map_1"></div>
<div id="map_2"></div>
<script type="text/javascript">
var view = new ol.View({
center: [0, 0],
zoom: 2
})
var map = new ol.Map({
target: 'map_1',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: view
});
var map_2 = new ol.Map({
target: 'map_2',
layers: [new ol.layer.Tile({
source: new ol.source.OSM({
url: 'http://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
})
})],
view: view
})
</script>
</body>
</html>
2.5 视图属性-旋转角度
<html>
<head>
<meta charset="utf-8">
<title>地图加载</title>
<link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
}
#map_1 {
width: 49%;
height: 99%;
float: left;
}
#map_2 {
width: 49%;
height: 99%;
float: right;
}
</style>
</head>
<body>
<div id="map_1"></div>
<div id="map_2"></div>
<script type="text/javascript">
var view = new ol.View({
center: [0, 0],
zoom: 2
})
var map = new ol.Map({
target: 'map_1',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2,
rotation: Math.PI / 6
})
});
var map_2 = new ol.Map({
target: 'map_2',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: view
})
</script>
</body>
</html>
2.6 视图属性-限制地图缩放级别
<html>
<head>
<meta charset="utf-8">
<title>地图加载</title>
<link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
}
#map_1 {
width: 49%;
height: 99%;
float: left;
}
#map_2 {
width: 49%;
height: 99%;
float: right;
}
</style>
</head>
<body>
<div id="map_1"></div>
<div id="map_2"></div>
<script type="text/javascript">
var view = new ol.View({
center: [0, 0],
zoom: 2
})
var map = new ol.Map({
target: 'map_1',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
center: [0, 0],
zoom: 2,
rotation: Math.PI / 6,
minZoom: 4,
maxZoom: 7,
})
});
var map_2 = new ol.Map({
target: 'map_2',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: view
})
</script>
</body>
</html>
2.7 View-缩放到范围
<html>
<head>
<meta charset="utf-8">
<title>地图加载</title>
<link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
}
#menu {
position: absolute;
top: 100px;
left: 20px;
z-index: 11;
}
.btn {
background-color: rgba(0, 60, 136, 0.5);
display: block;
margin: 1px;
padding: 0;
color: #fff;
font-size: 1.14em;
text-decoration: none;
text-align: center;
height: 1.375em;
border: none;
border-radius: 0 0 2px 2px;
}
</style>
</head>
<body>
<div id="map">
<div id="menu">
<button class="btn" onclick="fitToChangsha()">长沙市</button>
<button class="btn" onclick="fitToPoint()">地信楼</button>
</div>
</div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
//设置北京市为地图中心
center: [12952902.8394, 4852401.2052],
zoom: 10,
})
});
function fitToChangsha() {
map.getView().fit([12560816.6134, 3273506.2545, 12591065.3310, 3281592.9487])
}
function fitToPoint() {
map.getView().fit(new ol.geom.Point([12570902.1896, 3269680.4449]), { maxZoom: 18 })
}
</script>
</body>
</html>
2.8 View-动画效果
<html>
<head>
<meta charset="utf-8">
<title>地图加载</title>
<link href="./v6.5.0-dist/ol.css" rel="stylesheet" />
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
}
#menu {
position: absolute;
top: 100px;
left: 20px;
z-index: 11;
}
.btn {
background-color: rgba(0, 60, 136, 0.5);
display: block;
margin: 1px;
padding: 0;
color: #fff;
font-size: 1.14em;
text-decoration: none;
text-align: center;
height: 1.375em;
border: none;
border-radius: 0 0 2px 2px;
}
</style>
</head>
<body>
<div id="map">
<div id="menu">
<button class="btn" onclick="fitToChangsha()">长沙市</button>
<button class="btn" onclick="fitToPoint()">地信楼</button>
</div>
</div>
<script type="text/javascript">
var map = new ol.Map({
target: 'map',
layers: [new ol.layer.Tile({
source: new ol.source.OSM()
})],
view: new ol.View({
//设置长沙市为地图中心
center: [12952902.8394, 4852401.2052],
zoom: 10,
})
});
var changsha = [12570902.1896, 3269680.4449];
var changsha_center = [12571883.0743, 3277963.5524
];
function fitToChangsha() {
map.getView().animate({
center: changsha_center,
duration: 2000,
})
}
</script>
</body>
</html>
最新文章
- SQL Server-5种常见的约束
- java中抽象、分装、继承和多态的理解
- error C2144: 语法错误:“int”的前面应有“;”
- webbench详解
- paip.提升效率---filter map reduce 的java 函数式编程实现
- hdu1272 并查集
- python 执行文件时传参
- 深入理解HTML5：语义、标准与样式
- Android基于GridView实现的翻牌游戏效果
- js学习笔记之：数组（一）
- C++的二进制兼容问题（以QT为例）
- dba_dependencies查询结果视图
- function $(id){ return document.getElementById(id); }导致所有的js不能用解决办法。。。。
- [CSS3] 学习笔记-CSS3常用操作
- springMVC初探
- 微信小程序入门
- Linux基础-命令（续）
- Python练手例子（13）
- Unity - Photon PUN 本地与网络同步的逻辑分离 （二）
- 吴恩达机器学习笔记47-K均值算法的优化目标、随机初始化与聚类数量的选择（Optimization Objective & Random Initialization & Choosing the Number of Clusters of K-Means Algorithm）