OpenLayers多源資料載入
阿新 • • 發佈：2022-03-27
一、實驗內容
-
柵格瓦片資料載入；
-
向量資料載入；
-
向量瓦片資料載入。
二、實驗步驟
2.1 載入已經封裝的線上瓦片地圖
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./v6.5.0-dist/ol.css"> <script src="./v6.5.0-dist/ol.js"></script> <style> #mymap { width: 100%; height: 99%; position: absolute; } #menu { position: absolute; top: 30px; right: 20px; z-index: 11; } #layer-select { background-color: rgba(0, 60, 136, .5); display: block; margin: 1px; padding: 0; color: #fff; font-size: 1. 14em; text-decoration: none; text-align: center; height: 2. 375em; width: 8. 375em; line-height: .4em; border: none; border-radius: 0 0 2px 2px; } </style> </head> <body> <div id="mymap"> <div id="menu"> <select id="layer-select"> <option value="Aerial">Aerial</option> <option value="AerialWithLabelsOnDemand">Aerial with labels</option> <option value="RoadOnDemand" selected>Road</option> <option value="CanvasDark">Road dark</option> </select> </div> </div> <script type="text/javascript"> var styles = ['RoadOnDemand', 'Aerial', 'AerialWithLabelsOnDemand', 'CanvasDark']; var layers = []; var i, ii; for (i = 0, ii = styles.length; i < ii; ++i) { layers.push( new ol.layer.Tile({ visible: false, source: new ol.source.BingMaps({ key: "ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp", imagerySet: styles[i], }), }) ); } var map = new ol.Map({ target: 'mymap', layers: layers, view: new ol.View({ center: [0, 0], zoom: 2, projection: "EPSG:4326" }) }); var select = document.getElementById('layer-select'); function onChange() { var style = select.value; for (var i = 0, ii = layers.length; i < ii; ++i) { layers[i].setVisible(styles[i] === style); } } select.addEventListener('change', onChange); onChange(); </script> </body> </html>
2.2 利用XYZ載入OSM資料
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./v6.5.0-dist/ol.css"> <script src="./v6.5.0-dist/ol.js"></script> <style> #mymap { width: 100%; height: 99%; position: absolute; } </style> </head> <body> <body> <div id="mymap"></div> <script> var openStreetMapLayer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png' }) }); var map = new ol.Map({ layers: [ openStreetMapLayer ], view: new ol.View({ center: [12570904.1896, 3269680.4449], projection: 'EPSG:3857', zoom: 10 }), target: 'mymap' }); </script> </body> </html>
2.3 利用XYZ載入百度地圖
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./v6.5.0-dist/ol.css"> <script src="./v6.5.0-dist/ol.js"></script> <style> #mymap { width: 100%; height: 99%; position: absolute; } </style> </head> <body> <body> <div id="mymap"></div> <script type="text/javascript"> //座標參考系 var projection = ol.proj.get("EPSG:3857"); //解析度 var resolutions = []; for (var i = 0; i < 19; i++) { resolutions[i] = Math.pow(2, 18 - i); } var tilegrid = new ol.tilegrid.TileGrid({ origin: [0, 0], resolutions: resolutions }); var urlTemplate = "http://online2.map.bdimg.com/tile/?qt=tile&x=" + "{x}" + "&y=" + "{y}" + "&z=" + '{z}' + "&styles=pl&udt=20141219&scaler=1" //拼接白度地圖地址 var baidu_source = new ol.source.TileImage({ //設定座標參考系 projection: projection, //設定解析度 tileGrid: tilegrid, //出圖基地址 tileUrlFunction: function (tileCoord, pixelRatio, proj) { if (!tileCoord) { return ""; } var z = tileCoord[0]; var x = tileCoord[1]; var y = -tileCoord[2] - 1; if (x < 0) { x = "M" + (-x); } if (y < 0) { y = "M" + (-y); } return urlTemplate.replace('{z}', z.toString()) .replace('{y}', y.toString()) .replace('{x}', x.toString()); } }); //百度地圖 var baidu_layer = new ol.layer.Tile({ source: baidu_source }); //地圖容器 var map = new ol.Map({ target: 'mymap', layers: [baidu_layer], view: new ol.View({ center: [0, 0], zoom: 2 }) }); </script> </body> </html>
2.4 利用XYZ載入天地圖
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap">
<div id="menu">
<select id="layer-select">
<option value="6" selected>Aerial</option>
<option value="7">VectorMap</option>
<option value="8">Roadwithlable</option>
</select>
</div>
</div>
<script type="text/javascript">
var urls = [
'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=8&x={x}&y={y}&z={z}'
];
var layers = [];
var i, ii;
for (i = 0, ii = urls.length; i < ii; ++i) {
layers.push(
new ol.layer.Tile({
title: "高德地圖" + i,
source: new ol.source.XYZ({
url: urls[i],
wrapX: false
})
})
);
}
var map = new ol.Map({
target: 'mymap',
layers: layers,
view: new ol.View({
center: [12570904.1896, 3269680.4449],
zoom: 10,
minZomm: 1,
projection: "EPSG:3857"
})
});
var select = document.getElementById('layer-select');
function onChange() {
var style = select.selectedIndex;
for (var i = 0, ii = layers.length; i < ii; ++i) {
layers[i].setVisible(i === style);
}
}
select.addEventListener('change', onChange);
onChange();
</script>
</body>
</html>
2.5 載入GeoJSON
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 3
})
})
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [0, 0],
zoom: 2
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/geojson/buildings.geojson",
format: new ol.format.GeoJSON()
})
var vectorLayer = new ol.layer.Vector({
style: style,
source: vectorSource
})
map.addLayer(vectorLayer)
</script>
</body>
</html>
2.6 載入TopoJSON
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 3
})
})
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [0, 0],
zoom: 2
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/topojson/ne_10m_us_states.topojson",
format: new ol.format.TopoJSON()
})
var vectorLayer = new ol.layer.Vector({
style: style,
source: vectorSource
})
map.addLayer(vectorLayer)
</script>
</body>
</html>
2.7 載入GPX
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 3
})
})
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [14.357652292, 45.772163216],
zoom: 10
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/gpx/cerknicko-jezero.gpx",
format: new ol.format.GPX()
})
var vectorLayer = new ol.layer.Vector({
style: style,
source: vectorSource
})
map.addLayer(vectorLayer)
</script>
</body>
</html>
2.8 載入KML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 3
})
})
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [7.5083945,46.4586075],
zoom: 14
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/kml/2012-02-10.kml",
format: new ol.format.KML()
})
var vectorLayer = new ol.layer.Vector({
style: style,
source: vectorSource
})
map.addLayer(vectorLayer)
</script>
</body>
</html>
2.9 載入GML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 3
})
})
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [-114.50376, 33.826012000000006],
zoom: 14
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/gml/topp-states-wfs.xml",
format: new ol.format.GML3()
})
var vectorLayer = new ol.layer.Vector({
style: style,
source: vectorSource
})
map.addLayer(vectorLayer)
let mousePosition = new ol.control.MousePosition()
map.addControl(mousePosition)
</script>
</body>
</html>
2.10 向量資料樣式練習一
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var projection = ol.proj.get('EPSG:4326')
var image = new ol.style.Circle({
radius: 5,
fill: null,
stroke: new ol.style.Stroke({
color: 'red',
width: 1
})
})
var styles = {
'Point': [new ol.style.Style({
image: image
})],
'LineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: "green",
width: 1
})
})],
'MultiLineString': [new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'green',
width: 1
})
})],
'MultiPoint':[new ol.style.Style({
image:image
})],
'MultiPolygon':[new ol.style.Style({
stroke:new ol.style.Stroke({
color:'yellow',
width:1
}),
fill:new ol.style.Fill({
color:'rgba(255,255,0,0.1)'
})
})],
'Polygon':[new ol.style.Style({
stroke:new ol.style.Stroke({
color:'blue',
lineDash:[4],
width:3
}),
fill:new ol.style.Fill({
color:'rgba(0,0,255,0.1)'
})
})],
'GeometryCollection':[new ol.style.Style({
stroke:new ol.style.Stroke({
color:'magenta',
width:2
}),
fill:new ol.style.Fill({
color:'magenta'
}),
image:new ol.style.Circle({
radius:10,
fill:null,
stroke:new ol.style.Stroke({
color:'magenta'
})
})
})],
'Circle':[new ol.style.Style({
stroke:new ol.style.Stroke({
color:'red',
width:2
}),
fill:new ol.style.Fill({
color:'rgba(255,0,0,0.2)'
})
})]
}
var styleFunction=function (feature,resolution){
return styles[feature.getGeometry().getType()]
}
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [7.5083945, 46.4586075],
zoom: 8
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/kml/2012_Earthquakes_Mag5.kml",
format: new ol.format.KML({
extractStyles:false
})
})
var vectorLayer = new ol.layer.Vector({
style: styleFunction,
source: vectorSource
})
map.addLayer(vectorLayer)
let mousePosition = new ol.control.MousePosition()
map.addControl(mousePosition)
</script>
</body>
</html>
2.11 向量資料樣式練習二
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width:
100%;
height: 99%;
position: absolute;
}
#menu {
position: absolute;
top: 30px;
left: 20px;
z-index: 11;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var projection = ol.proj.get('EPSG:4326')
var styleCache = {}
var styleFunction = function (feature, resolution) {
var name = feature.get('name')
var magnitude = parseFloat(name.substr(2))
var radius = 5 + 20 * (magnitude - 5)
var style = styleCache[radius]
console.log(feature)
if (!style) {
style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
fill: new ol.style.Fill({
color: 'rgba(255, 153, 0,0.4)',
}),
stroke: new ol.style.Stroke({
color: 'rgba(255, 204, 0,0.2)',
width: 1,
}),
}),
});
styleCache[radius] = style;
}
return style;
}
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp',
imagerySet: 'CanvasDark'
})
})
],
view: new ol.View({
projection: "EPSG:4326",
center: [7.5083945, 46.4586075],
zoom: 2
})
})
var vectorSource = new ol.source.Vector({
url: "./data/data/kml/2012_Earthquakes_Mag5.kml",
format: new ol.format.KML({
extractStyles: false
})
})
var vectorLayer = new ol.layer.Vector({
style: styleFunction,
source: vectorSource
})
map.addLayer(vectorLayer)
let mousePosition = new ol.control.MousePosition()
map.addControl(mousePosition)
</script>
</body>
</html>
2.12 向量瓦片資料載入
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
#mymap {
width: 100%;
height: 99%;
position: absolute;
}
</style>
</head>
<body>
<body>
<div id="mymap"></div>
<script type="text/javascript">
var map = new ol.Map({
target: "mymap",
layers: [
new ol.layer.Tile({
source: new ol.source.BingMaps({
key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp',
imagerySet: 'AerialWithLabelsOnDemand'
})
})
],
view: new ol.View({
center: [0, 0],
zoom: 2
})
})
var tileLayer = new ol.layer.VectorTile({
source: new ol.source.VectorTile({
format: new ol.format.MVT(),
url:
'https://ahocevar.com/geoserver/gwc/service/tms/1.0.0/' +
'ne:ne_10m_admin_0_countries@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
})
})
var wmsLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: { 'LAYERS': 'topp:states' },
ratio: 1,
serverType: 'geoserver',
})
});
map.addLayer(wmsLayer)
map.addLayer(tileLayer)
let mousePosition = new ol.control.MousePosition()
map.addControl(mousePosition)
</script>
</body>
</html>