在前一期实现离线地图初始化的基础上，本文中主要阐述如何实现规划某一特定行政区，并展示其行政区的区县名称。
提示：因前文中阐述了如何实现离线地图的初始化，所以在此不再进行书写并详解初始化的过程和流程，如有不明白的小伙伴可进行查看该篇文章：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>
