這裡給大家分享我在OpenLayers 地圖開發工作中總結出的一下代碼和註意點，希望對大家有所幫助 效果如下： 核心代碼展示：附帶講解註釋 var map = new ol.Map({ // 初始化地圖 target: 'map',// 選擇地圖對象 layers: [ new ol.layer.T ...
這裡給大家分享我在OpenLayers 地圖開發工作中總結出的一下代碼和註意點，希望對大家有所幫助
效果如下：
核心代碼展示：附帶講解註釋
var map = new ol.Map({ // 初始化地圖
target: 'map',// 選擇地圖對象
layers: [
new ol.layer.Tile({// 初始化Tile外部圖層
source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
url:
'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服務地址
wrapX: false
})
}),
new ol.layer.Tile({// 初始化Tile外部圖層
source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
url:
'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
wrapX: false
})
})
],
view: new ol.View({
projection: 'EPSG:4326', //設置地圖坐標系
center: [113.87, 22.691],//設置地圖中心點
zoom: 12//設置地圖層級
}),
});
const BGLayer = new ol.layer.Tile({// 初始化Tile外部圖層
source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
wrapX: false
})
})
BGLayer.setVisible(false) //設置圖層顯示隱藏
map.addLayer(BGLayer)//添加圖層
//實例化矢量點要素，通過矢量圖層添加到地圖容器中
//這樣就實現了預先載入圖文標註
var iconFeature = new ol.Feature();
//設置點要素樣式
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量標註的數據源
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量標註圖層
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//矢量標註樣式設置函數，設置image為圖標ol.style.Icon
function createLabelStyle(feature) {
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [40, 42],
scale: 0.5, // 圖標縮小顯示
anchorOrigin: 'top-right', // 標註樣式的起點位置
anchorXUnits: 'pixels', // X方向單位：分數
anchorYUnits: 'pixels', // Y方向單位：像素
offsetOrigin: 'bottom-left', // 偏移起點位置的方向
opacity: 1, // 透明度
src: 'dian.png' //圖標的URL
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基準線
font: 'normal 14px 微軟雅黑', //文字樣式
fill: new ol.style.Fill({ //文本填充樣式（即文字顏色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
});
}
var newFeature = new ol.Feature({
geometry: new ol.geom.Point([0,0]) //幾何信息
});
newFeature.setStyle(createLabelStyle(newFeature)); //設置要素樣式
vectorSource.addFeature(newFeature);
map.on('click', function (evt) {
var coordinate = evt.coordinate; //滑鼠單擊點的坐標
//新建一個要素ol.Feature
newFeature.set('geometry',new ol.geom.Point(coordinate))
document.getElementsByClassName("list-box")[0].innerHTML = '<p> 經度：' + coordinate[0].toFixed(3) + ' 緯度：' + coordinate[1].toFixed(3) + '</p>'
});
map.on('moveend', function (evt) {
if (map.getView().getZoom() >= 16) {
BGLayer.setVisible(true)
} else {
BGLayer.setVisible(false)
}
})
點點陣圖片：
完整demo代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<title>點擊出點位</title>
<style>
*{padding: 0;margin: 0}
.list-box {
width: 300px;
height: 100px;
background: white;
box-sizing: border-box;
padding: 20px;
line-height: 60px;
overflow: auto;
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
text-align: center;
}
</style>
</head>
<body>
<div id="map"></div>
<div class="list-box">
</div>
<script>
var map = new ol.Map({ // 初始化地圖
target: 'map',// 選擇地圖對象
layers: [
new ol.layer.Tile({// 初始化Tile外部圖層
source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
url:
'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', // XYZ切片服務地址
wrapX: false
})
}),
new ol.layer.Tile({// 初始化Tile外部圖層
source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
url:
'http://t{0-7}.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
wrapX: false
})
})
],
view: new ol.View({
projection: 'EPSG:4326', //設置地圖坐標系
center: [113.87, 22.691],//設置地圖中心點
zoom: 12//設置地圖層級
}),
});
const BGLayer = new ol.layer.Tile({// 初始化Tile外部圖層
source: new ol.source.XYZ({// 初始化XYZ切片服務圖層
url: 'http://t{0-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d',// XYZ切片服務地址
wrapX: false
})
})
BGLayer.setVisible(false) //設置圖層顯示隱藏
map.addLayer(BGLayer)//添加圖層
//實例化矢量點要素，通過矢量圖層添加到地圖容器中
//這樣就實現了預先載入圖文標註
var iconFeature = new ol.Feature();
//設置點要素樣式
iconFeature.setStyle(createLabelStyle(iconFeature));
//矢量標註的數據源
var vectorSource = new ol.source.Vector({
features: [iconFeature]
});
//矢量標註圖層
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(vectorLayer);
//矢量標註樣式設置函數，設置image為圖標ol.style.Icon
function createLabelStyle(feature) {
return new ol.style.Style({
image: new ol.style.Icon({
anchor: [40, 42],
scale: 0.5, // 圖標縮小顯示
anchorOrigin: 'top-right', // 標註樣式的起點位置
anchorXUnits: 'pixels', // X方向單位：分數
anchorYUnits: 'pixels', // Y方向單位：像素
offsetOrigin: 'bottom-left', // 偏移起點位置的方向
opacity: 1, // 透明度
src: 'dian.png' //圖標的URL
}),
text: new ol.style.Text({
textAlign: 'center', //位置
textBaseline: 'middle', //基準線
font: 'normal 14px 微軟雅黑', //文字樣式
fill: new ol.style.Fill({ //文本填充樣式（即文字顏色)
color: '#000'
}),
stroke: new ol.style.Stroke({
color: '#F00',
width: 2
})
})
});
}
var newFeature = new ol.Feature({
geometry: new ol.geom.Point([0,0]) //幾何信息
});
newFeature.setStyle(createLabelStyle(newFeature)); //設置要素樣式
vectorSource.addFeature(newFeature);
map.on('click', function (evt) {
var coordinate = evt.coordinate; //滑鼠單擊點的坐標
//新建一個要素ol.Feature
newFeature.set('geometry',new ol.geom.Point(coordinate))
document.getElementsByClassName("list-box")[0].innerHTML = '<p> 經度：' + coordinate[0].toFixed(3) + ' 緯度：' + coordinate[1].toFixed(3) + '</p>'
});
map.on('moveend', function (evt) {
if (map.getView().getZoom() >= 16) {
BGLayer.setVisible(true)
} else {
BGLayer.setVisible(false)
}
})
</script>
</body>
</html>
如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。
