使用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 {
width: 100%;
height: 800px;
}
</style>
标签：ol,openLayer,feature,source,添加,import,new,标注 来源： https://www.cnblogs.com/1gaoyu/p/15239460.html