参考地址:http://linwei.xyz/ol3-primer
一、加载不同的瓦片地图(layer基本)
1.切换地图源
OpenLayers3主要包括开源的Open Street Map,微软的Bing地图,Map Quest地图,然而Map Quest收费了,因此我们学习的时候就忽略这玩意儿吧,下面做一个切换地图源的小例子,直接上代码
<html lang="en">
<head>
<style>
* {padding: 0;margin: 0;}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
</style>
<title>DiracHome</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map"></div>
<input type="button" value="OpenStreetMap地图" onclick="getOSMap()">
<input type="button" value="bing地图" onclick="getBing()">
<input type="button" value="Stamen地图" onclick="getStame()">
<input type="button" value="加载在线OpenStreetMap地图" onclick="getXYZOpenStreetMap()">
<input type="button" value="加载在线高德地图" onclick="getXYZgaode()">
<input type="button" value="加载在线雅虎地图" onclick="getXYZyahoo()">
<script type="text/javascript">
var yahooMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
tileSize: 512,
url:'https://{0-3}.base.maps.api.here.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/512/png8?lg=ENG&ppi=250&token=TrLJuXVK62IQk0vuXFzaig%3D%3D&requestid=yahoo.prod&app_id=eAdkWGYRoc4RfxVo0Z4B'
})
});
var XYZOpenStreetMap = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
})
});
var XYZgaode = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
})
});
// Open Street Map 地图层
let OSMapLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
// Bing地图层
var bingMapLayer = new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ',
imagerySet: 'Road'
})
});
// Stamen地图层
var stamenLayer = new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'watercolor'
})
});
// 定义视图
let view = new ol.View({
// projection: 'EPSG:4326',
center: ol.proj.fromLonLat([118.78, 32.07]),
zoom: 10,
minZoom:10,
maxZoom:14,
})
// 实例化地图对象
var map = new ol.Map({
target: 'map',
layers: [
OSMapLayer
//默认OSMapLayer地图层
],
view,
});
function getOSMap(){
// 先移除当前的地图,再添加Open Street Map 地图
map.removeLayer(map.getLayers().item(0));
map.addLayer(OSMapLayer);
}
function getBing(){
// 先移除当前的地图,再添加Open Street Map 地图
map.removeLayer(map.getLayers().item(0));
map.addLayer(bingMapLayer);
}
function getStame(){
// 先移除当前的地图,再添加Open Street Map 地图
map.removeLayer(map.getLayers().item(0));
map.addLayer(stamenLayer);
}
function getXYZOpenStreetMap(){
map.removeLayer(map.getLayers().item(0));
map.addLayer(XYZOpenStreetMap);
}
function getXYZgaode(){
map.removeLayer(map.getLayers().item(0));
map.addLayer(XYZgaode);
}
function getXYZyahoo(){
map.removeLayer(map.getLayers().item(0));
map.addLayer(yahooMapLayer);
}
</script>
</body>
</html>
注意了,以上代码可以直接复制的,关于引入在第一天有详细的介绍。
代码很简单,removeLayer完了之后再addLayer就行了,别忘了事先定义好layer。
2.加载离线瓦片地图
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
// 地图设置中心,设置到南京,本地离线地图可以通过抓取在线地图的请求获取
var center = ol.proj.transform([118.78, 32.07], 'EPSG:4326', 'EPSG:3857');
//创建地图
var map = new ol.Map({
view: new ol.View({
center: center,
zoom: 10
}),
target: 'map'
});
// 加载图层
map.addLayer(new ol.layer.Image({
source: new ol.source.ImageStatic({
url: '../study/images/414.jpg',
imageExtent: extent
})
}));
</script>
</body>
</html>
灰常简单,继续
3.图层叠加和管理
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<div> 显示/隐藏:
<input type="checkbox" checked="checked" onclick="checkOsm(this);" />底图
<input type="checkbox" checked="checked" onclick="checkCircle(this);"/>圆
<input type="checkbox" checked="checked" onclick="checkPoint(this);"/>点
</div>
<div>
图层顺序:
<input name="seq" type="radio" value="" onclick="upOsm(this);" />底图最上
<input name="seq" type="radio" value="" checked="checked" onclick="upCircle(this);"/>圆最上
<input name="seq" type="radio" value="" onclick="upPoint(this);"/>点最上
</div>
<script type="text/javascript">
// 创建3个图层
// var offlineMapLayer = new ol.layer.Tile({
// source: new ol.source.OSM()
// });
var pointLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var circleLayer = new ol.layer.Vector({
source: new ol.source.Vector()
});
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
})
});
//创建地图
var map = new ol.Map({
layers:[offlineMapLayer,circleLayer,pointLayer],
view: new ol.View({
projection: 'EPSG:4326',
center: [118.78, 32.07],
// center: ol.proj.transform([118.78, 32.07], 'EPSG:4326', 'EPSG:3857'),
zoom: 10
}),
target: 'map'
});
// 添加点
var point = new ol.Feature({
geometry: new ol.geom.Point([118.78, 32.07])
});
point.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'red'
}),
// stroke: new ol.style.Stroke({
// color: 'red',
// size: 10
// })
})
}));
pointLayer.getSource().addFeature(point);
// 添加圆
var circle = new ol.Feature({
geometry: new ol.geom.Point([118.78, 32.07])
});
circle.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: 15,
stroke: new ol.style.Stroke({
color: 'green',
// size:20
})
})
}));
circleLayer.getSource().addFeature(circle);
// 隐藏显示osm图层
function checkOsm(elem) {
offlineMapLayer.setVisible(elem.checked);
}
// 隐藏显示point图层
function checkPoint(elem) {
pointLayer.setVisible(elem.checked);
}
// 隐藏显示circle图层
function checkCircle(elem) {
circleLayer.setVisible(elem.checked);
}
// 置顶osm图层到最上面
function upOsm (elem) {
if (elem.checked) {
offlineMapLayer.setZIndex(3);
circleLayer.setZIndex(circleLayer.getZIndex()-1);
pointLayer.setZIndex(pointLayer.getZIndex()-1);
}
}
// 置顶circle图层到最上面
function upCircle (elem) {
if (elem.checked) {
circleLayer.setZIndex(3);
offlineMapLayer.setZIndex(offlineMapLayer.getZIndex()-1);
pointLayer.setZIndex(pointLayer.getZIndex()-1);
}
}
// 置顶point图层到最上面
function upPoint(elem) {
if (elem.checked) {
pointLayer.setZIndex(3);
offlineMapLayer.setZIndex(offlineMapLayer.getZIndex()-1);
circleLayer.setZIndex(circleLayer.getZIndex()-1);
}
}
</script>
</body>
</html>
总结一下,就是setZIndex设置层级,使得点圆地图分层显示
3.加载图标
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
#anchor {
cursor:pointer;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
// 我们需要一个vector的layer来放置图标
var layer = new ol.layer.Vector({
source: new ol.source.Vector()
})
//离线地图,也可以设置在线地图
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
})
});
//创建地图
var map = new ol.Map({
layers:[offlineMapLayer,layer],
view: new ol.View({
projection: 'EPSG:4326',
center: [118.78, 32.07],
zoom: 8,
maxZoom:10,
minZoom:5,
}),
target: 'map'
});
// 创建一个Feature,并设置好在地图上的位置
var anchor = new ol.Feature({
geometry: new ol.geom.Point([118.78, 32.07])
});
// 设置样式,在样式中就可以设置图标
anchor.setStyle(new ol.style.Style({
image: new ol.style.Icon({
src: '../study/images/sign.png',
anchor: [0, 1],//图标位置 范围0-1
scale: 0.3 //图标相对自己大小 范围0.1-1
})
}));
// 添加到之前的创建的layer中去
layer.getSource().addFeature(anchor);
// 监听地图层级变化
map.getView().on('change:resolution', function(){
var style = anchor.getStyle();
// 重新设置图标的缩放率,基于层级30来做缩放
style.getImage().setScale(this.getZoom() / 30);
anchor.setStyle(style);
})
</script>
</body>
</html>
具体的玩意都注释出来了,一步步看懂干嘛的就完事了,底层原理不用追究
4.添加文字
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
#anchor {
cursor:pointer;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
// 我们需要一个vector的layer来放置图标
var layer = new ol.layer.Vector({
source: new ol.source.Vector()
})
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
})
});
//创建地图
var map = new ol.Map({
layers:[offlineMapLayer,layer],
view: new ol.View({
projection: 'EPSG:4326',
center: [118.78, 32.07],
zoom: 8,
maxZoom:10,
minZoom:5,
}),
target: 'map'
});
// 添加一个文字模板
var anchor = new ol.Feature({
geometry: new ol.geom.Point([118.78, 32.07])
});
// 设置文字style
anchor.setStyle(new ol.style.Style({
text: new ol.style.Text({
font: '20px sans-serif', //默认这个字体,可以修改成其他的,格式和css的字体设置一样
text: 'DiracHome',//文字内容
fill: new ol.style.Fill({
color: 'red'
})
})
}));
layer.getSource().addFeature(anchor);
</script>
</body>
</html>
完事了,也是挺简单的
5.提示信息
这个就厉害了,有效果了,项目里面用的多,一定要整出来。先看代码
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
#container{
width: 100%;
height: 20px;
}
#popup{
width: 80px;
height: 20px;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script type="text/javascript">
var offlineMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://192.168.0.241:8447/map/{z}/{x}/{y}.jpg'
})
});
// 获取到popup的节点
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
// 创建一个overlay, 绑定html元素container
var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
//创建地图
var map = new ol.Map({
layers:[offlineMapLayer, ],
view: new ol.View({
projection: 'EPSG:4326',
center: [118.78, 32.07],
zoom: 8,
maxZoom:10,
minZoom:5,
}),
target: 'map'
});
// 监听地图点击事件
map.on('singleclick', function(evt) {
console.log(evt.coordinate)//这就是当前坐标
// 获取当前点击坐标,并设置到HTML元素上去
let zb = evt.coordinate;
var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(zb, 'EPSG:3857', 'EPSG:4326'));
content.innerHTML = '<p>You clicked here:</p><code>' + hdms +
'</code>';
// 设置overlay的位置,从而显示在鼠标点击处
overlay.setPosition(zb);
//将overlay追加到map
map.addOverlay(overlay)
});
</script>
</body>
</html>
这里用到了事件监听,后面会详细讲,这里只要知道触发单击事件就完事了
二、地图事件
先来一个简单的点击事件
<!Doctype html>
<head>
<title>OpenLayers</title>
<link rel="stylesheet" href="../v6.3.1-dist/ol.css">
<script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
#map {
height: 80%;
width: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 100%"></div>
<script type="text/javascript">
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
center: ol.proj.transform([118.78, 32.07], 'EPSG:4326', 'EPSG:3857'),
zoom: 10,
minZoom:5,
maxZoom:15
})
});
// 监听singleclick事件
map.on('singleclick', function(event){
// 通过getEventCoordinate方法获取地理位置,再转换为wgs84坐标,并弹出对话框显示
// alert(ol.proj.transform(map.getEventCoordinate(event), 'EPSG:3857', 'EPSG:4326'));
alert(ol.proj.transform(event.coordinate, 'EPSG:3857', 'EPSG:4326'));
})
/*
设置点击事件只触发一次的方法如下
1.map.once 只响应一次
2.将事件赋值给kye,在事件中末尾加入 map.unByKey(key)
3.函数中 map.un('singleclick', 事件名) 注销事件
*/
/*
ol.map:
左键单击:singleclick
右键单击:dblclick
鼠标点击:click
鼠标移动:pointermove
鼠标拖拽:pointerdrag
地图移动:moveend
ol.View
地图缩放:change:resolution
地图中心改变: change:center
*/
</script>
</body>
</html>
这个例子中只实现了点击事件的功能,其他事件注释中都已列出,可以自己试试,更详细的说明请移步官方文档
哦吼,下班了,先写到这,以后再补充修改