openlayers 添加图片和文字点位图层

最新推荐文章于 2025-05-29 11:59:20 发布

代码工人笔记

最新推荐文章于 2025-05-29 11:59:20 发布

阅读量264

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： vue.js

本文链接：https://blog.csdn.net/zhao3756/article/details/147280096

Web前端专栏收录该内容

164 篇文章

订阅专栏

openlayers 添加图片和文字点位图层

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Point } from 'ol/geom'
import * as olInteraction from 'ol/interaction'
import DragRotateAndZoom from 'ol/interaction/DragRotateAndZoom'
import ImageLayer from 'ol/layer/Image'
import { ImageStatic } from 'ol/source'
import { getCenter } from 'ol/extent'
import { Projection } from 'ol/proj'
import { Icon, Style, Text, Fill, Stroke } from 'ol/style'
import Feature from 'ol/Feature'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { TileWMS, Vector as VectorSource } from 'ol/source'
import Overlay from 'ol/Overlay' 
import { defaults } from 'ol/interaction'



addImgTextLayer(map){
	const vectorSource = new VectorSource()
	let iconLayer = new VectorLayer({
		source: vectorSource,
		zIndex: 10, 
	})

	const iconFeature = new Feature({
        geometry: new Point([经度, 纬度]),
      })

      // 设置属性
      iconFeature.setProperties({
        name: '未命名',
      })

      // 图标样式
      const iconStyle = new Style({
        image: new Icon({
          src: '图标url',
          scale: 0.6,
          anchor: [0.5, 0.5],
        }),
      })

      // 文本样式
      const textStyle = new Style({
        text: new Text({
          text: '测试文字',
          font: 'bold 12px Microsoft YaHei',
          fill: new Fill({ color: '#ffffff' }),
          stroke: new Stroke({ color: '#000000', width: 2 }),
          offsetY: -20,
          textAlign: 'center',
          backgroundFill: new Fill({
            color: 'rgba(0, 111, 255, 0.7)',
          }),
        }),
      })

      iconFeature.setStyle([iconStyle, textStyle])
      iconLayer.getSource().addFeature(iconFeature)
	  
	  map.addLayer(iconLayer)
}