数据可视化大屏项目开发中，我们需要使用openlayers来渲染地图，并且地图只显示指定城市其他区域不显示。
Vue 3 和 OpenLayers 实现地图指定区域显示
在Web地图应用中，有时我们希望突出显示某个特定的区域，而将其他区域遮蔽。这种效果可以通过在地图上添加一个遮罩层来实现，该遮罩层覆盖整个地图，但会留下一个透明的窗口来凸显我们关注的区域。本文将介绍如何使用 Vue 3 和 OpenLayers 来实现这一功能，以湖南省为例，展示如何仅显示该省份的区域。
组件结构
首先，我们需要一个 Vue 组件来承载我们的地图。在这个组件的 <template> 部分，我们定义了一个容器来放置地图：
<template>
<div class="mapContainer" ref="mapContainer" id="mapContainer"></div>
</template>
样式设置
为了确保地图能够充满整个容器，我们需要设置一些基本的 CSS 样式：
<style scoped lang="scss">
.mapContainer {
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
</style>
地图初始化
在 Vue 组件的 <script> 部分，我们首先导入必要的 OpenLayers 类和样式：
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { XYZ, Vector as VectorSource } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { GeoJSON } from "ol/format";
import { defaults } from "ol/control";
import { LinearRing } from "ol/geom";
import { fromExtent } from "ol/geom/Polygon";
import { Style, Stroke, Fill } from "ol/style";
import mapData from './data/data.json';
然后，我们在组件的 data 函数中定义地图对象，并在 mounted 钩子中初始化地图：
export default {
data() {
return {
map: null
};
},
mounted() {
this.initIcingMap();
},
// ...其他方法...
};
添加天地图图层
我们使用天地图的卫星图和交通图标注作为地图的底图。通过 createTianDiTuLayer 方法，我们可以轻松添加这些图层：
methods: {
// 创建天地图类型
createTianDiTuLayer(layerId, url, zIndex) {
let tianDiTuLayer = new TileLayer({
layerId: layerId,
source: new XYZ({url: url}),
zIndex: zIndex,
});
this.icingMap.addLayer(tianDiTuLayer);
},
// 初始化地图
initIcingMap() {
// ...初始化地图对象...
// 添加地图类型
let baseMap = [
{name: "天地图卫星图", type: "img_w", zindex: 1},
{name: "天地图交通图标注", type: "cva_w", zindex: 2},
];
baseMap.forEach((item) => {
let mapUrl = `http://t0.tianditu.gov.cn/DataServer?T=${item.type}&x={x}&y={y}&l={z}&tk=您的天地图密钥`;
this.createTianDiTuLayer(`tianditu_${item.type}`, mapUrl, item.zindex);
});
// ...其他代码...
},
// ...其他方法...
};
创建遮罩层
为了凸显湖南省区域，我们创建一个遮罩层，并使用湖南省的 GeoJSON 数据来定义遮罩的形状：
methods: {
// ...其他方法...
// 创建蒙层，凸显湖南区域
showHunanArea() {
let initLayer = new VectorLayer({
zIndex: 3,
source: new VectorSource(),
style: new Style({
fill: new Fill({
color: "rgba( 255, 255, 255, 1)",
}),
stroke: new Stroke({
color: "#f4b49f",
width: 3
})
})
});
this.icingMap.addLayer(initLayer);
this.addConver(initLayer, mapData);
},
// 添加遮罩
addConver(converLayer, data) {
const fts = new GeoJSON().readFeatures(data);
const ft = fts[0];
const converGeom = this.erase(ft.getGeometry());
const convertFt = new Feature({
geometry: converGeom,
});
converLayer.getSource().addFeature(convertFt);
},
// 擦除操作，生成遮罩范围
erase(geom) {
const extent = [-180, -90, 180, 90];
const polygonRing = fromExtent(extent);
const coords = geom.getCoordinates();
coords.forEach(coord => {
const linearRing = new LinearRing(coord[0]);
polygonRing.appendLinearRing(linearRing);
});
return polygonRing;
}
// ...其他方法...
};
在这里，showHunanArea 方法创建了一个新的矢量图层，并调用 addConver 方法来添加遮罩。addConver 方法读取 GeoJSON 数据，并通过 erase 方法生成遮罩的几何形状。
结论
通过以上步骤，我们可以在 Vue 3 应用中使用 OpenLayers 显示一个只凸显湖南省区域的地图。这种方法可以通过替换 GeoJSON 数据来适用于任何其他特定区域的显示。这样的地图可以用于多种应用场景，如地理数据可视化、区域规划和管理等。
版本
在vue2项目中如果报错，可以适当降低版本号vue2 项目使用ol openlayers报错
"ol": "^9.0.0",
演示地址
类似效果
实例代码下载
代码运行环境vue3 vite js nodejs 16
