前端地圖(openlayers)基礎(chǔ)使用示例代碼
更新時間：2025年07月01日 11:25:25 作者：Xiao_zuo_ya
這篇文章主要介紹了前端地圖(openlayers)基礎(chǔ)使用的相關(guān)資料,OpenLayers是開源地圖框架,支持加載國內(nèi)外地圖服務(wù)（如天地圖）,提供瓦片、矢量、影像圖層,需要的朋友可以參考下
最終效果
Openlayers框架的主要作用是什么？
在瀏覽器頁面中引入一個地圖，openlayers 是外國的一個地圖框架，本身內(nèi)置一些國外的地圖，但是必須科學(xué) 上網(wǎng)才能使用，可以通過加載url的形式訪問國內(nèi)的地圖服務(wù)，高德，百度，騰訊，天地圖等已經(jīng)發(fā)布的圖層。
地圖主流詞匯了解
- 瓦片
- 圖層
- 矢量地圖
- 影像地圖
- 墨卡托投影
安裝并且使用Openlayers
項(xiàng)目環(huán)境
"vite": "^5.4.1", "vue": "^3.4.37", "ol": "^10.4.0",
pnpm install ol
基于天地圖初步展示一個地圖
<template>
<div id="mapContainer" class="TianDiMap"></div>
</template>
<script setup lang="ts">
import {onMounted} from "vue";
import "ol/ol.css";
import {Map, View} from "ol";
import TileLayer from "ol/layer/Tile";
import {XYZ} from "ol/source";
// 地圖是一層一層的加載
// ol 是以面向?qū)ο蟮男问絹碓O(shè)計的api
// map中的配置選項(xiàng)
// target 表示地圖示例掛載的容器
// view 表示地圖的視圖
// layers 表示地圖的圖層 所有的地圖都有一個底圖，Source 就是地圖的來源
const initMap = () => {
const map = new Map({
target: "mapContainer",
view: new View({
center: [116.397477, 39.908692],
zoom: 10,
projection: "EPSG:4326",
}),
layers: [new TileLayer({
source: new XYZ({
url: 'http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk={你的秘鑰}',
})
})]
})
}
onMounted(() => {
initMap();
});
</script>
<style scoped lang="less">
.TianDiMap {
width: 100%;
height: 100%;
}
</style>
地圖增加動畫效果
const removeCenterTo = (target: Point) => {
view.animate({
center: [target.longitude, target.latitude],
zoom: 12,
duration: 2000,
});
};
圖層（layer）
layer & source
瓦片圖層tileLayer加載底圖
靜態(tài)圖片圖層imageLayer加載靜態(tài)圖片
矢量圖層vectorLayer加載矢量數(shù)據(jù)添加地圖標(biāo)注
瓦片數(shù)據(jù)源
靜態(tài)圖片數(shù)據(jù)源
矢量數(shù)據(jù)源
切換底圖
- 可以通過切換圖層的層級實(shí)現(xiàn)
const layers: Collection<BaseLayer> = map.getLayers(); layers.item(0).setZIndex(100); layers.item(1).setZIndex(99); layers.item(2).setZIndex(30);
- 也可以通過添加&移除圖層實(shí)現(xiàn)
map.removeLayer(layers.item(0)); map.addLayer(layers.item(1))
- 通過控制圖層的顯示和隱藏
layers.item(2).setVisible(false)
加載矢量圖層
將一些矢量數(shù)據(jù)（很多格式，最常見的是GeoJson）加載到地圖上
繪制行政區(qū)劃邊界
const geoJsonLayer = new VectorLayer({
source: new VectorSource({
// url: "https://geo.datav.aliyun.com/areas_v3/bound/220100_full.json",
url: "/geoJsonData/ChangChunGeo.json",
format: new GeoJSON(),
}),
});
行政區(qū)劃增加樣式
const geoJsonLayer = new VectorLayer({
// 加載行政區(qū)劃邊界
source: new VectorSource({
// url: "https://geo.datav.aliyun.com/areas_v3/bound/220100_full.json",
url: "/geoJsonData/ChangChunGeo.json",
format: new GeoJSON(),
}),
// 覆蓋物樣式
style: new Style({
fill: new Fill({
color: "rgba(216,91,91,0.2)",
}),
stroke: new Stroke({
width: 1,
color: "rgba(216,91,91,1)",
}),
}),
});
鼠標(biāo)移入高亮省份
const addGeoJsonLayer = () => {
const geoJsonLayer: VectorLayer = new VectorLayer({
// 加載行政區(qū)劃邊界
source: new VectorSource({
// url: "https://geo.datav.aliyun.com/areas_v3/bound/220100_full.json",
url: "/geoJsonData/ChangChunGeo.json",
format: new GeoJSON(),
}),
// 覆蓋物樣式
style: new Style({
fill: new Fill({
color: "rgba(216,91,91,0.2)",
}),
stroke: new Stroke({
width: 1,
color: "rgba(216,91,91,1)",
}),
}),
});
// 添加行政區(qū)劃邊界
map.addLayer(geoJsonLayer);
map.on("pointermove", (event) => {
// 獲取當(dāng)前鼠標(biāo)移動到的坐標(biāo)
const coordinate = event.coordinate;
// 當(dāng)前鼠標(biāo)位置是否具有要素信息--是否存在features
(geoJsonLayer as any)
.getSource()
.getFeatures()
.forEach((feature: Feature) => {
feature.setStyle(
new Style({
fill: new Fill({
color: "rgba(216,91,91,0.2)",
}),
stroke: new Stroke({
width: 1,
color: "rgba(216,91,91,1)",
}),
})
);
});
map.getTargetElement().style.cursor = "";
const features = (geoJsonLayer as any)
.getSource()
.getFeaturesAtCoordinate(coordinate);
if (features[0]) {
map.getTargetElement().style.cursor = "pointer";
features[0].setStyle(
new Style({
fill: new Fill({
color: "rgb(166,216,91,0.2)",
}),
})
);
}
});
};
地圖上點(diǎn)功能
const addPoints = (pointList: Array<Point>) => {
const iconFeatureList = pointList.map((point) => {
const feature = new Feature({
geometry: point,
});
feature.setStyle(
new Style({
image: new Icon({
src: "./camera_icon.png", // 補(bǔ)全圖片路徑
}),
})
);
return feature;
});
const iconSource = new VectorSource({
features: iconFeatureList,
});
const iconLayer = new VectorLayer({
source: iconSource,
});
map.addLayer(iconLayer);
};
繪制直線
const drawLine = (startPoint: Point, endPoint: Point) => {
const lineFeature = new Feature({
geometry: new LineString([
startPoint.getCoordinates(),
endPoint.getCoordinates(),
]),
});
lineFeature.setStyle(
new Style({
stroke: new Stroke({
color: "red",
width: 2,
}),
})
);
const lineSource = new VectorSource({
features: [lineFeature],
});
const lineLayer = new VectorLayer({
source: lineSource,
});
map.addLayer(lineLayer);
};
overLay
const pointList = [
new Point([125.285029, 43.825662]),
new Point([125.2849, 43.822039]),
new Point([125.295028, 43.824021]),
];
const htmlDocument =
'<div id="popup" class="ol-popup">' +
'<a href="#" rel="external nofollow" id="popup-closer" class="ol-popup-closer"></a>' +
'<div id="popup-content"><p>The location you clicked was:</p><code>232332</code></div>' +
"</div>";
pointList.forEach((item: Point) => {
const element = document.createElement("div");
element.innerHTML = htmlDocument;
const detailOverLay = new Overlay({
element: element,
position: item.getCoordinates(),
offset: [0, -10],
});
map.addOverlay(detailOverLay);
});
.ol-popup {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -220px;
min-width: 280px;
}
.ol-popup:after,
.ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 219px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 219px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.ol-popup-closer:after {
content: "?";
}總結(jié)
到此這篇關(guān)于前端地圖(openlayers)基礎(chǔ)使用的文章就介紹到這了,更多相關(guān)前端地圖openlayers基礎(chǔ)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js操作輸入框提示信息且響應(yīng)鼠標(biāo)事件
注冊網(wǎng)站的輸入框就有默認(rèn)提示值，當(dāng)獲取鼠標(biāo)焦點(diǎn)的時候，默認(rèn)值被刪除，當(dāng)用戶沒輸入東西焦點(diǎn)離開的時候，又恢復(fù)默認(rèn)提示值2014-03-03
這篇文章主要為大家詳細(xì)介紹了js帶點(diǎn)自動圖片輪播幻燈片特效，圖片輪播效果特別適合做產(chǎn)品展示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-09-09
javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子
這篇文章介紹了javascript查找字符串中出現(xiàn)最多的字符和次數(shù)的小例子，有需要的朋友可以參考一下2013-10-10
JavaScript使用concat連接數(shù)組的方法
這篇文章主要介紹了JavaScript使用concat連接數(shù)組的方法,實(shí)例分析了javascript中concat函數(shù)操作數(shù)組的技巧,需要的朋友可以參考下2015-04-04
JS中for...in?和?for...of?的區(qū)別解析
for?…?in?用于迭代對象的可枚舉字符串屬性,包括自身屬性和繼承的屬性,但不會遍歷對象的原型鏈上的?非可枚舉屬性,以及對象的方法,這篇文章主要介紹了JS中for...in?和?for...of?的區(qū)別,需要的朋友可以參考下2024-03-03
這篇文章介紹了JS異步的執(zhí)行順序，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
這篇文章主要介紹了淺談JS中this在各個場景下的指向，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
javascript結(jié)合ajax讀取txt文件內(nèi)容
這篇文章主要介紹了javascript結(jié)合ajax讀取txt文件內(nèi)容，方法非常簡單，很實(shí)用，這里推薦給大家2014-12-12
這篇文章主要介紹了包含中國城市的javascript對象,以一個javascript的json數(shù)據(jù)格式存儲為例分析了javascript存儲城市信息的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)獲取數(shù)組中最大值或最小值功能,結(jié)合實(shí)例形式總結(jié)分析了javascript獲取數(shù)組最大值與最小值的三種常見操作技巧,需要的朋友可以參考下2019-03-03