openlayers+vite+vue3实现规划某一特定行政区（二）

在前一期实现离线地图初始化的基础上，本文中主要阐述如何实现规划某一特定行政区，并展示其行政区的区县名称。

提示：因前文中阐述了如何实现离线地图的初始化，所以在此不再进行书写并详解初始化的过程和流程，如有不明白的小伙伴可进行查看该篇文章：https://blog.csdn.net/qq_53541336/article/details/141386340?spm=1001.2014.3001.5502。

目录

一、准备区域的json API文件数据

二、规划区域方法

三、加载数据

四、规划区域样式

五、初始化地图中引入该方法

六、全部代码

---

 一、准备区域的json API文件数据

在开始规划区域前应提前准备好所规划区域的json数据，可将此文件放入到项目中，后续需要是引入即可。也可直接复制此链接进行引用。如果不知道如何寻找所规划区域的json文件，可以去阿里云DataV数据中进行查找。

二、规划区域方法

 在以上工作做完之后，需要写一个方法用来规划此区域，用于在地图上进行展示，我这里用的是直接复制jsonAPI链接方式。

//规划区域方法
const addGeoJson = async () => {}

三、加载数据

// 加载数据
const json = await fetch('你所规划的区域链接').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()
}

六、全部代码

看上面的过程可能很多小伙伴有些懵，下面直接附上全部代码

<template>
  <div id="container" class="map"></div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
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>