描述在前
書接上回，作為打工人，學(xué)習(xí)還是要以項(xiàng)目為導(dǎo)向。由于領(lǐng)導(dǎo)想看衛(wèi)星地圖顯示，這次我們記錄下，如何使用OpenLayer 加載顯示常見的幾種二維地圖，包括普通地圖，衛(wèi)星地圖，和衛(wèi)星路網(wǎng)混合地圖。還是以高德地圖為例，下面我們直接上代碼，從實(shí)例入手學(xué)習(xí)。
代碼在后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
html { height: 100% }
body { height: 100%;margin: 0px;padding: 0px }
#container{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
.unselectMap{
float: left;
box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px;
border-left: 1px solid rgb(139, 164, 220);
border-top: 1px solid rgb(139, 164, 220);
border-bottom: 1px solid rgb(139, 164, 220);
background: rgb(255, 255, 255);
padding: 2px 6px;
font-style: normal;
font-variant: normal;
font-kerning: auto;
font-optical-sizing: auto;
font-feature-settings: normal;
font-variation-settings: normal;
font-stretch: normal;
font-size: 12px;
line-height: 1.3em;
font-family: arial, sans-serif;
text-align: center;
white-space: nowrap;
border-radius: 3px 0px 0px 3px;
color: rgb(0, 0, 0);
}
.selectMap{
float: left;
box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 3px;
border-width: 1px;
border-style: solid;
border-color: rgb(139, 164, 220);
background: rgb(142, 168, 224);
padding: 2px 6px;
font: bold 12px / 1.3em arial, sans-serif;
text-align: center;
white-space: nowrap;
border-radius: 0px 3px 3px 0px;
color: rgb(255, 255, 255);
}
.mapChange{
padding-left: 10px;
padding-top: 10px;
white-space: nowrap;
cursor: pointer;
position: absolute;
z-index: 10;
text-size-adjust: none;
}
/* 去除放大縮小號(hào) */
.ol-zoom{
display:none;
}
</style>
<title>Multiple Map</title>
</head>
<body>
<div id="container"></div>
<script>
// 核心圖層layer 為三種地圖形式創(chuàng)建各自的 Layer，其中混合地圖需要 路網(wǎng)地圖AMapLayerRoadNet 與 衛(wèi)星地圖AMapLayerSatellite 疊加
// AMapLayer 為普通地圖的 Layer
AMapLayer = new ol.layer.Tile({
// 每個(gè)圖層有對(duì)應(yīng)的數(shù)據(jù)源（Source）
source: new ol.source.XYZ({
// 該url為高德瓦片地圖地址
url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
})
});
// AMapLayerRoadNet 為路網(wǎng)地圖的 Layer
AMapLayerRoadNet = new ol.layer.Tile({
// 每個(gè)圖層有對(duì)應(yīng)的數(shù)據(jù)源（Source）
source: new ol.source.XYZ({
// 該url為高德瓦片地圖地址
url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
});
// AMapLayerSatellite 為衛(wèi)星地圖的 Layer
AMapLayerSatellite = new ol.layer.Tile({
// 每個(gè)圖層有對(duì)應(yīng)的數(shù)據(jù)源（Source）
source: new ol.source.XYZ({
// 該url為高德瓦片地圖地址
url:'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}'
})
});
// 把整個(gè)地圖看作一個(gè)容器（Map）
var map = new ol.Map({
target: 'container',
// 核心為地圖圖層（Layer），若想實(shí)現(xiàn)路網(wǎng)與衛(wèi)星地圖混合，AMapLayerSatellite 需要在 AMapLayerRoadNet 之前
layers: [AMapLayer,AMapLayerSatellite,AMapLayerRoadNet],
// 并由地圖視圖（View）進(jìn)行地圖表現(xiàn)
view: new ol.View({
//設(shè)定默認(rèn)坐標(biāo)系
projection: 'EPSG:3857',
//設(shè)定中心點(diǎn)，因?yàn)槟J(rèn)坐標(biāo)系為 3587，所以要將我們常用的經(jīng)緯度坐標(biāo)系4326 轉(zhuǎn)換為 3587坐標(biāo)系
center: ol.proj.transform([120.266053,31.550228], 'EPSG:4326', 'EPSG:3857'),
// 默認(rèn)顯示級(jí)別，相當(dāng)于瓦片地圖的 Z 級(jí)別
zoom: 5,
// 最小顯示級(jí)別
minZoom:3,
// 最大顯示級(jí)別
maxZoom:19
})
});
// 默認(rèn)顯示普通地圖，所以將 AMapLayer 的 Visible 設(shè)定為true，其他設(shè)定為fasle
AMapLayer.setVisible(true);
AMapLayerRoadNet.setVisible(false);
AMapLayerSatellite.setVisible(false);
//創(chuàng)建地圖形式切換按鈕
function createMapChangeBar(){
let htmllet = "";
htmllet += "<div title=\"顯示普通地圖\" id=\"usualMap\" class=\"selectMap\">地圖</div>";
htmllet += "<div title=\"顯示衛(wèi)星地圖\" id=\"satelliteMap\" class=\"unselectMap\">衛(wèi)星</div>";
htmllet += "<div title=\"顯示混合地圖\" id=\"hybridMap\" class=\"unselectMap\">混合</div>";
let p = document.createElement("div");
p.className = "mapChange";
p.innerHTML = htmllet;
document.body.appendChild(p);
}
// 設(shè)定地圖形式切換按鈕的響應(yīng)函數(shù)
function mapTypeChangeMap() {
createMapChangeBar();
var usualMap=document.getElementById("usualMap");
var satelliteMap=document.getElementById("satelliteMap");
var hybridMap=document.getElementById("hybridMap");
usualMap.addEventListener('click',function(){
usualMap.className="selectMap";
satelliteMap.className="unselectMap";
hybridMap.className="unselectMap";
AMapLayer.setVisible(true);
AMapLayerRoadNet.setVisible(false);
AMapLayerSatellite.setVisible(false);
})
satelliteMap.addEventListener('click',function(){
usualMap.className="unselectMap";
satelliteMap.className="selectMap";
hybridMap.className="unselectMap";
AMapLayer.setVisible(false);
AMapLayerRoadNet.setVisible(false);
AMapLayerSatellite.setVisible(true);
})
hybridMap.addEventListener('click',function(){
usualMap.className="unselectMap";
satelliteMap.className="unselectMap";
hybridMap.className="selectMap";
AMapLayer.setVisible(false);
AMapLayerRoadNet.setVisible(true);
AMapLayerSatellite.setVisible(true);
})
}
mapTypeChangeMap();
</script>
</body>
</html>
混合地圖實(shí)現(xiàn)效果![[Webgis][地圖加載]OpenLayer加載多種形式地圖,Openlayer學(xué)習(xí),javascript](https://imgs.yssmx.com/Uploads/2024/01/791174-1.png)
衛(wèi)星地圖實(shí)現(xiàn)效果![[Webgis][地圖加載]OpenLayer加載多種形式地圖,Openlayer學(xué)習(xí),javascript](https://imgs.yssmx.com/Uploads/2024/01/791174-2.png)
普通地圖實(shí)現(xiàn)效果![[Webgis][地圖加載]OpenLayer加載多種形式地圖,Openlayer學(xué)習(xí),javascript](https://imgs.yssmx.com/Uploads/2024/01/791174-3.png)
文章來源：http://www.zghlxwxcb.cn/news/detail-791174.html
以上為多種地圖實(shí)現(xiàn)代碼與效果，在此記錄，下次我們記錄如何使用一些小工具，以及與地圖的一些常用交互。文章來源地址http://www.zghlxwxcb.cn/news/detail-791174.html
到了這里，關(guān)于[Webgis][地圖加載]OpenLayer加載多種形式地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
