openlayers+vite+vue3实现在地图上打点+弹窗（三）

℡52Hz★

已于 2024-12-03 15:46:37 修改

阅读量871

点赞数 7

CC 4.0 BY-SA版权

分类专栏：地图相关文章标签： vue 前端 javascript tdesign

于 2024-12-03 15:44:53 首次发布

本文链接：https://blog.csdn.net/qq_53541336/article/details/144027860

地图相关专栏收录该内容

7 篇文章

订阅专栏

在前两期实现离线地图初始化以及规划某一特定区域的基础上，本文中主要阐述如何实现在所规划的区域地图上打点，同时在打的点上点击该点出现弹窗的效果。

提示：因本文实现的具体效果部分涉及到前面文章的知识点，如有不明白的小伙伴可进行查看前两篇文章，文章的的实现流程也是按照步骤来的。

一、初始化地图、规划某一特定区域

对于初始化地图以及规划某一特定区域的详细代码在这里就不在重新复述了，有看不懂的小伙伴查看我前面的两篇文章即可，里面详细讲解了关于这部分的内容，详细代码也有。这里因为打点和和实现弹窗需要，所以再重新将代码附上。

<template>
  <div id="container" class="map"></div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { CloseIcon } from 'tdesign-icons-vue-next'
import 'ol/ol.css' // 地图样式
import TileLayer from 'ol/layer/Tile' // 瓦片渲染方法
import XYZ from 'ol/source/XYZ'
import { Map, View, Feature } from 'ol' // 地图实例方法、视图方法
import { fromLonLat } from 'ol/proj'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import { Style, Icon, Stroke, Fill, Text, Circle } from 'ol/style'
import { Point, LineString, Polygon } from 'ol/geom'
import GeoJSON from 'ol/format/GeoJSON'
let map = ref(null)

//地图图层参数
const mapView = reactive({
  center: fromLonLat([120.299, 31.568]), // 地图中心点
  zoom: 10, // 初始缩放级别
  minZoom: 10, // 最小缩放级别
  maxZoom: 15 // 最大缩放级别
  // extent: [116, 29, 125, 31] // 设置地图中心范围
})
const mapUrl = ref(
  '这里填写离线地图的瓦片地址'
)

//规划区域
const addGeoJson = async () => {
  // 加载数据
  const json = await fetch('定区域的json API地址').then(response =>
    response.json()
  )
  const features = new GeoJSON({ featureProjection: 'EPSG:3857' }).readFeatures(json)
  const vectorSource = new VectorSource({ features: features })
  // 规划区域样式
  const areaStyle = feature => {
    return new Style({
      fill: new Fill({
        //矢量图层填充颜色，以及透明度
        // color: 'rgba(5,50,86,0.6)'
        color: 'rgba(0, 153, 148, 0.5)'
      }),
      stroke: new Stroke({
        //边界样式
        color: 'rgba(73,242,242,0.8)',
        width: 3
      }),
      text: new Text({
        //文本样式
        text: feature.get('name'),
        // 设置文本样式
        textAlign: 'center',
        textBaseline: 'bottom',
        padding: [5, 10, 5, 10],
        font: '14px Calibri,sans-serif',
        fill: new Fill({
          color: '#000'
        }),
        stroke: new Stroke({
          color: '#fff',
          width: 3
        })
      })
    })
  }
  const lineLayer = new VectorLayer({
    zIndex: 99,
    source: vectorSource,
    style: areaStyle
  })
  map.value.addLayer(lineLayer) // 把图层添加到地图
}
// 初始化地图
const init = () => {
  // 使用瓦片渲染方法
  const tileLayer = new TileLayer({
    source: new XYZ({
      url: mapUrl.value
    })
  })

  map.value = new Map({
    layers: [tileLayer],
    view: new View(mapView),
    target: 'container'
  })
  addGeoJson()
}

onMounted(() => {
  init()
})
</script>
<style lang="less" scoped>
#container {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>