使用openLayer在地图上添加标注
生活随笔
收集整理的這篇文章主要介紹了
使用openLayer在地图上添加标注
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
因為在實際的項目中要用到這個功能，找了好久才得以實現，代碼來自：https://www.jianshu.com/p/4af2a52a0fc6
效果如下;
需要引入的類
//添加標注所用到的類
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'
添加標注所用到的函數
/*創建矢量標注
*@param{object} data 標注的數據
*/
createLabel() {
// 初始化標簽要素
let feature = new Feature({
geometry: new OlGeomPoint(fromLonLat([111.65, 40.82])), // 標簽位置
name: "data.name", // 標注顯示的文字
img: require('./../assets/index/selected.png'), // 標注顯示的logo圖片
})
feature.setId(1) // 設置ID
feature.setStyle(this.createLabelStyle(feature)) // 設置標注樣式
let source = new Vector({}) // 初始化矢量數據源
source.addFeature(feature) // 將標簽要素添加至矢量數據源
let layer = new Vectors({ // 創建矢量圖層
source: source
})
this.map.addLayer(layer) // 將矢量圖層添加至地圖
},
/*創建標注樣式
*@param{object} feature 標注要素
*@return {object} 返回創建的標注樣式對象
*/
createLabelStyle(feature) {
//返回一個樣式
return new OlStyleStyle({
//圖標樣式
image: new OlStyleIcon({
anchor: [10, 18], //設置圖標偏移
scale: 0.6, // 圖標縮小顯示
anchorOrigin: 'top-right', //標注樣式的起點位置
anchorXUnits: 'pixels', //X方向單位：分數
anchorYUnits: 'pixels', //Y方向單位：像素
offsetOrigin: 'bottom-left', //偏移起點位置的方向
opacity: 0.9, //透明度
src: feature.get('img') //圖片路徑
}),
//文本樣式
text: new Text({
textAlign: 'center', //對齊方式
textBaseline: 'middle', //文本基線
font: 'normal 12px 微軟雅黑', //字體樣式
text: feature.get('name'), //文本內容
offsetY: -25, // Y軸偏置
fill: new Fill({ //填充樣式
color: '#ffffff'
}),
backgroundFill: new Fill({ // 填充背景
color:"#082030",
}),
padding: [2, 5, 2, 5],
}),
// 設置層級
zIndex: 199
});
}
我的完整代碼：地圖引用的是天地圖中的衛星圖遺跡對應的標注圖層，在使用時需要輸入一個你自己申請的提啊你圖密鑰
<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";
//添加標注所用到的類
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(){
//天地圖衛星底圖
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: "天地圖衛星底圖",
layerName: "baseMap",
source: sourceSatellite
});
//天地圖衛星底圖標注圖層
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: "天地圖衛星底圖標注圖層",
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 //加載地圖的層級
})
this.map = new Map({
target: 'map',
view: this.view,
layers: [this.baseLayer1]
});
//調用方法創建標簽
this.createLabel();
},
/*創建矢量標注
*@param{object} data 標注的數據
*/
createLabel() {
// 初始化標簽要素
let feature = new Feature({
geometry: new OlGeomPoint(fromLonLat([111.65, 40.82])), // 標簽位置
name: "data.name", // 標注顯示的文字
img: require('./../assets/index/selected.png'), // 標注顯示的logo圖片
})
feature.setId(1) // 設置ID
feature.setStyle(this.createLabelStyle(feature)) // 設置標注樣式
let source = new Vector({}) // 初始化矢量數據源
source.addFeature(feature) // 將標簽要素添加至矢量數據源
let layer = new Vectors({ // 創建矢量圖層
source: source
})
this.map.addLayer(layer) // 將矢量圖層添加至地圖
},
/*創建標注樣式
*@param{object} feature 標注要素
*@return {object} 返回創建的標注樣式對象
*/
createLabelStyle(feature) {
//返回一個樣式
return new OlStyleStyle({
//圖標樣式
image: new OlStyleIcon({
anchor: [10, 18], //設置圖標偏移
scale: 0.6, // 圖標縮小顯示
anchorOrigin: 'top-right', //標注樣式的起點位置
anchorXUnits: 'pixels', //X方向單位：分數
anchorYUnits: 'pixels', //Y方向單位：像素
offsetOrigin: 'bottom-left', //偏移起點位置的方向
opacity: 0.9, //透明度
src: feature.get('img') //圖片路徑
}),
//文本樣式
text: new Text({
textAlign: 'center', //對齊方式
textBaseline: 'middle', //文本基線
font: 'normal 12px 微軟雅黑', //字體樣式
text: feature.get('name'), //文本內容
offsetY: -25, // Y軸偏置
fill: new Fill({ //填充樣式
color: '#ffffff'
}),
backgroundFill: new Fill({ // 填充背景
color:"#082030",
}),
padding: [2, 5, 2, 5],
}),
// 設置層級
zIndex: 199
});
}
},
mounted() {
this.initMap();
},
};
</script>
<style scoped>
#map {
100%;
height: 800px;
}
</style>
總結
以上是生活随笔為你收集整理的使用openLayer在地图上添加标注的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 火狐浏览器 安装网页视频下载插件（插件名
- 下一篇： windows常用快捷键