OpenLayers入门练习
一、实验内容
- 练习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>
OpenLayers入门练习的更多相关文章
- OpenLayers入门（一）
OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...
- Webgis中关于Openlayers入门使用（一）安装及生成基本地图
一．WebGis项目中使用的版本2.12 下载地址:https://github.com/openlayers/ol2/releases https://github.com/openlayers/o ...
- openlayers4 入门开发系列之地图展示篇（附源码下载）
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- GIS之家资源
分享资源之arcgis软件系列 arcgis10.0(arcgis desktop以及arcgis server):下载 arcgis10.1(arcgis desktop以及arcgis serve ...
- GIS之家demo源代码咨询
GIS之家demo源代码咨询收费服务(希望对 webgis 新人有所帮助) GIS之家QQ群(采取QQ群入群收费模式): GIS之家001:296438295 需要入群的giser们,入群之前联系GI ...
- OpenLayers 3 入门教程
OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它 ...
- openLayers 3 之入门
openLayers 3 之入门 openlayer是web GIS客户端开发提供的javascript类库,也是开源框架,可以加载本地数据进行展示地图 1.下载相关引用的js.css文件 2.类似于 ...
- 【OpenLayers】入门教程地址
[OpenLayers]入门教程地址: 点击进入 http://anzhihun.coding.me/ol3-primer/index.html 简书地址 : http://www.jians ...
- SuperMap iClient for JavaScript 新手入门
地理信息系统(英语:Geographic Information System,缩写:GIS)是一门综合性学科,结合地理学与地图学,已经广泛的应用在不同的领域,是用于输入.存储.查询.分析和显示地理数 ...
- openlayers 学习笔记之1
1. 为Web Gis客户端开发的javascript 框架 百度文库中的教程:入门经典> 1) 初始化map: map = new OpenLayers.Map(mapContainerNam ...
随机推荐
- 【实时数仓】Day04-DWS层业务：DWS设计、访客宽表、商品主题宽表、流合并、地区主题表、FlinkSQL、关键词主题表、分词
一.DWS层与DWM设计 1.思路 之前已经进行分流 但只需要一些指标进行实时计算,将这些指标以主题宽表的形式输出 2.需求 访客.商品.地区.关键词四层的需求(可视化大屏展示.多维分析) 3.DWS ...
- 把盏言欢,款款而谈,ChatGPT结合钉钉机器人(outgoing回调)打造人工智能群聊/单聊场景,基于Python3.10
就像黑火药时代里突然诞生的核弹一样,OpenAI的ChatGPT语言模型的横空出世,是人工智能技术发展史上的一个重要里程碑.这是一款无与伦比.超凡绝伦的模型,能够进行自然语言推理和对话,并且具有出色的 ...
- angr_ctf——从0学习angr（一）：angr简介与核心概念
我在学习angr时,先是阅读了开发者发布在IEEE上的论文IEEE Xplore Full-Text PDF:该文章讲述了自动化漏洞挖掘的背景和方法,并对angr的架构和核心模块进行了介绍,非常经典值 ...
- 前端程序员学python（爬虫向）(一文修到筑基期) （本文不含知识诅咒）
我踏马来辣 还有一件事: 本教程配合c语言中文网 python爬虫 教程 食用 本教程不适用于未成年人 一定要刷牙 本教程不存在知识诅咒 学完本教程即可进入筑基期 js 基础和本教程学习效率成正比 不 ...
- netkit-telnet源码编译安装
介绍 Linux 下流行的 telnet 实现有两个: GNU inetutils: http://ftp.gnu.org/gnu/inetutils/ 哈佛netkit-telnet 源码包:htt ...
- 用了这么多年的 SpringBoot 你知道什么是 SpringBoot 的 Web 类型推断吗？
用了这么多年的 SpringBoot 那么你知道什么是 SpringBoot 的 web 类型推断吗? 估计很多小伙伴都不知道,毕竟平时开发做项目的时候做的都是普通的 web 项目并不需要什么特别的了 ...
- [编程基础] Python格式化字符串常量f-string总结
Python格式化字符串常量f-string总结 本文主要总结在Python中如何使用格式化字符串常量f-string(Formatted string literals).在 Python 程序中, ...
- 如何用 Python 隐藏你的 API 密钥
你好,我是悦创. 博客首发:https://bornforthis.cn/posts/19.html 有时您需要在代码中存储敏感信息,例如密码或 API 密钥,而在 Python 中最简洁的方法是使用 ...
- 洛谷P3654 First Step题解
这是一道暴力枚举. 大致题意:R行C列的棋盘要放下长度为K的线段,"#"表示无法放置,问有多少种放置方法. 直接贴代码: #include<bits/stdc++.h> ...
- vue构建打包兼容操作（vue代码规范建议）-转载Vuejs项目不改动一行代码同时支持用Rollup，vue-cli，parcel构建的一些建议