因为在实际的项目中要用到这个功能，找了好久才得以实现，代码来自：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>
支付宝扫一扫
微信扫一扫
