當(dāng)前位置：
首頁 >
使用openLayer在地图上添加标注
發(fā)布時(shí)間：2024/1/3
54
生活家
生活随笔
收集整理的這篇文章主要介紹了
使用openLayer在地图上添加标注
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
因?yàn)樵趯?shí)際的項(xiàng)目中要用到這個(gè)功能，找了好久才得以實(shí)現(xiàn)，代碼來自：https://www.jianshu.com/p/4af2a52a0fc6
效果如下;
需要引入的類
//添加標(biāo)注所用到的類
import Vectors from 'ol/layer/Vector.js'
import { WMTS, Vector } from 'ol/source.js'
import Feature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
添加標(biāo)注所用到的函數(shù)
/*創(chuàng)建矢量標(biāo)注
*@param{object} data 標(biāo)注的數(shù)據(jù)
*/
createLabel() {
// 初始化標(biāo)簽要素
let feature = new Feature({
geometry: new OlGeomPoint(fromLonLat([111.65, 40.82])), // 標(biāo)簽位置
name: "data.name", // 標(biāo)注顯示的文字
img: require('./../assets/index/selected.png'), // 標(biāo)注顯示的logo圖片
})
feature.setId(1) // 設(shè)置ID
feature.setStyle(this.createLabelStyle(feature)) // 設(shè)置標(biāo)注樣式
let source = new Vector({}) // 初始化矢量數(shù)據(jù)源
source.addFeature(feature) // 將標(biāo)簽要素添加至矢量數(shù)據(jù)源
let layer = new Vectors({ // 創(chuàng)建矢量圖層
source: source
})
this.map.addLayer(layer) // 將矢量圖層添加至地圖
},
/*創(chuàng)建標(biāo)注樣式
*@param{object} feature 標(biāo)注要素
*@return {object} 返回創(chuàng)建的標(biāo)注樣式對(duì)象
*/
createLabelStyle(feature) {
//返回一個(gè)樣式
return new OlStyleStyle({
//圖標(biāo)樣式
image: new OlStyleIcon({
anchor: [10, 18], //設(shè)置圖標(biāo)偏移
scale: 0.6, // 圖標(biāo)縮小顯示
anchorOrigin: 'top-right', //標(biāo)注樣式的起點(diǎn)位置
anchorXUnits: 'pixels', //X方向單位：分?jǐn)?shù)
anchorYUnits: 'pixels', //Y方向單位：像素
offsetOrigin: 'bottom-left', //偏移起點(diǎn)位置的方向
opacity: 0.9, //透明度
src: feature.get('img') //圖片路徑
}),
//文本樣式
text: new Text({
textAlign: 'center', //對(duì)齊方式
textBaseline: 'middle', //文本基線
font: 'normal 12px 微軟雅黑', //字體樣式
text: feature.get('name'), //文本內(nèi)容
offsetY: -25, // Y軸偏置
fill: new Fill({ //填充樣式
color: '#ffffff'
}),
backgroundFill: new Fill({ // 填充背景
color:"#082030",
}),
padding: [2, 5, 2, 5],
}),
// 設(shè)置層級(jí)
zIndex: 199
});
}
我的完整代碼：地圖引用的是天地圖中的衛(wèi)星圖遺跡對(duì)應(yīng)的標(biāo)注圖層，在使用時(shí)需要輸入一個(gè)你自己申請(qǐng)的提啊你圖密鑰
<template>
<div id="map" class="map"></div>
</template>
<script>
//引用地圖過程中用到的類
import MapInit from '../components/tianditu/Mapinit.js';
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
import {fromLonLat} from 'ol/proj.js';
import GroupLayer from "ol/layer/Group";
//添加標(biāo)注所用到的類
import Vectors from 'ol/layer/Vector.js'
import { WMTS, Vector } from 'ol/source.js'
import Feature from 'ol/Feature'
import OlGeomPoint from 'ol/geom/Point'
import OlStyleStyle from 'ol/style/Style'
import OlStyleIcon from 'ol/style/Icon'
import Text from 'ol/style/Text'
import Fill from 'ol/style/Fill'
export default {
data() {
return {
map: null,
baseLayer1:null,
view: null,
map_ter:null,
};
},
methods: {
initMap(){
//天地圖衛(wèi)星底圖
var sourceSatellite = new XYZ({
url: 'http://t3.tianditu.com/DataServer?T=img_w&tk=你的密鑰&x={x}&y={y}&l={z}'
});
var tileSatellite = new TileLayer({
id: "tileSatellite",
title: "天地圖衛(wèi)星底圖",
layerName: "baseMap",
source: sourceSatellite
});
//天地圖衛(wèi)星底圖標(biāo)注圖層
var sourceSatelliteMark = new XYZ({
url: "http://t4.tianditu.com/DataServer?T=cva_w&tk=你的密鑰&x={x}&y={y}&l={z}"
})
var satelliteMark = new TileLayer({
id: "satelliteMark",
title: "天地圖衛(wèi)星底圖標(biāo)注圖層",
layerName: "baseMap",
source: sourceSatelliteMark
});
this.baseLayer1 = new GroupLayer({
layers: [tileSatellite, satelliteMark],
visible: true
})
this.view = new View({
//初始位置（呼市）
// center: transform([111.65, 40.82], "EPSG:4326", "EPSG:3857"),
center: fromLonLat([111.65, 40.82]),
projection: 'EPSG:3857',
zoom: 10 //加載地圖的層級(jí)
})
this.map = new Map({
target: 'map',
view: this.view,
layers: [this.baseLayer1]
});
//調(diào)用方法創(chuàng)建標(biāo)簽
this.createLabel();
},
/*創(chuàng)建矢量標(biāo)注
*@param{object} data 標(biāo)注的數(shù)據(jù)
*/
createLabel() {
// 初始化標(biāo)簽要素
let feature = new Feature({
geometry: new OlGeomPoint(fromLonLat([111.65, 40.82])), // 標(biāo)簽位置
name: "data.name", // 標(biāo)注顯示的文字
img: require('./../assets/index/selected.png'), // 標(biāo)注顯示的logo圖片
})
feature.setId(1) // 設(shè)置ID
feature.setStyle(this.createLabelStyle(feature)) // 設(shè)置標(biāo)注樣式
let source = new Vector({}) // 初始化矢量數(shù)據(jù)源
source.addFeature(feature) // 將標(biāo)簽要素添加至矢量數(shù)據(jù)源
let layer = new Vectors({ // 創(chuàng)建矢量圖層
source: source
})
this.map.addLayer(layer) // 將矢量圖層添加至地圖
},
/*創(chuàng)建標(biāo)注樣式
*@param{object} feature 標(biāo)注要素
*@return {object} 返回創(chuàng)建的標(biāo)注樣式對(duì)象
*/
createLabelStyle(feature) {
//返回一個(gè)樣式
return new OlStyleStyle({
//圖標(biāo)樣式
image: new OlStyleIcon({
anchor: [10, 18], //設(shè)置圖標(biāo)偏移
scale: 0.6, // 圖標(biāo)縮小顯示
anchorOrigin: 'top-right', //標(biāo)注樣式的起點(diǎn)位置
anchorXUnits: 'pixels', //X方向單位：分?jǐn)?shù)
anchorYUnits: 'pixels', //Y方向單位：像素
offsetOrigin: 'bottom-left', //偏移起點(diǎn)位置的方向
opacity: 0.9, //透明度
src: feature.get('img') //圖片路徑
}),
//文本樣式
text: new Text({
textAlign: 'center', //對(duì)齊方式
textBaseline: 'middle', //文本基線
font: 'normal 12px 微軟雅黑', //字體樣式
text: feature.get('name'), //文本內(nèi)容
offsetY: -25, // Y軸偏置
fill: new Fill({ //填充樣式
color: '#ffffff'
}),
backgroundFill: new Fill({ // 填充背景
color:"#082030",
}),
padding: [2, 5, 2, 5],
}),
// 設(shè)置層級(jí)
zIndex: 199
});
}
},
mounted() {
this.initMap();
},
};
</script>
<style scoped>
#map {
100%;
height: 800px;
}
</style>
總結(jié)
以上是生活随笔為你收集整理的使用openLayer在地图上添加标注的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 火狐浏览器 安装网页视频下载插件（插件名
- 下一篇： windows常用快捷键