1.OpenLayers简介
OpenLayers是一个用于开发WebGIS客户端的JavaScript包，为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，主要还是以面向对象进行开发的。
2.初始化地图
（1）安装
npm install ol
（2）实例化地图
要显示一个基本的地图首先需要提供一个容器，设置好宽高，然后引入OpenLayers，添加一个地图图层，地图服务可以使用内置的一个开源地图OSM，也可以使用其他的在线瓦片服务，比如：百度、高德、天地图、必应、谷歌等，具体服务地址可以自行百度，本文使用的是高德的服务
<template>
<div class="ol-map" id="olMap"></div>
</template>引入这模块和组件
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue'
import Map from 'ol/Map' // OpenLayers的主要类，用于创建和管理地图
import View from 'ol/View' // OpenLayers的视图类，定义地图的视图属性
import { Tile as TileLayer } from 'ol/layer' // OpenLayers的瓦片图层类
import { XYZ, OSM } from 'ol/source' // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
import { fromLonLat, toLonLat } from 'ol/proj' // OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换
初始化地图函数
onMounted(() => {
// 地图初始化
initOLMap()
})
let map: any = null
/**
* Date:2024/3/26
* Author:zx
* Function:【初始化地图】
* @param 无
*/
function initOLMap() {
// 创造地图实例
map = new Map({
// 设置地图容器的ID
target: 'olMap',
// 定义地图的图层列表，用于显示特定的地理信息。
layers: [
// 高德地图
// TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
new TileLayer({
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
source: new XYZ({
url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
})
],
// 设置地图的视图参数
// View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
view: new View({
// fromLonLat是一个函数，用于将经纬度坐标转换为地图的坐标系统。
center: fromLonLat([108.924652, 34.208527]),//地图中心点
zoom: 15,// 缩放级别
minZoom: 0,// 最小缩放级别
maxZoom: 18,// 最大缩放级别
constrainResolution: true// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
})
})
}一个基本地图就出来了
添加了地图的旋转效果，包括一些控件以及一些常用的事件，完整代码如下
<template>
<div class="ol-map" id="olMap"></div>
</template>
<script lang='ts' setup>
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue'
import Map from 'ol/Map' // OpenLayers的主要类，用于创建和管理地图
import View from 'ol/View' // OpenLayers的视图类，定义地图的视图属性
import { Tile as TileLayer } from 'ol/layer' // OpenLayers的瓦片图层类
import { XYZ, OSM } from 'ol/source' // OpenLayers的瓦片数据源，包括XYZ格式和OpenStreetMap专用的数据源
import { fromLonLat, toLonLat } from 'ol/proj' // OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换
import {
defaults as defaultInteractions,
DragRotateAndZoom,
} from 'ol/interaction' // OpenLayers的交互类，包括默认的交互集合和特定的旋转缩放交互
import { defaults, FullScreen, MousePosition, ScaleLine } from 'ol/control' // OpenLayers的控件类，包括默认的控件集合和特定的全屏、鼠标位置、比例尺控件
import Feature from 'ol/Feature' // OpenLayers的要素类，表示地图上的一个对象或实体
import Point from 'ol/geom/Point' // OpenLayers的点几何类，用于表示点状的地理数据
import { Vector as VectorLayer } from 'ol/layer' // OpenLayers的矢量图层类，用于显示矢量数据
import { Vector as VectorSource } from 'ol/source' // OpenLayers的矢量数据源类，用于管理和提供矢量数据
import { Circle as CircleStyle, Style, Stroke, Fill, Icon } from "ol/style" // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标
import LineString from 'ol/geom/LineString' // OpenLayers的线几何类，用于表示线状的地理数据
import tb from '@/assets/image/hyfw.png' // 导入一个图片资源
import Polygon from "ol/geom/Polygon" // OpenLayers的多边形几何类，用于表示面状的地理数据
onMounted(() => {
// 地图初始化
initOLMap()
})
let map: any = null
/**
* Date:2024/3/26
* Author:zx
* Function:【初始化地图】
* @param 无
*/
function initOLMap() {
// 创造地图实例
map = new Map({
// 设置地图容器的ID
target: 'olMap',
// 定义地图的图层列表，用于显示特定的地理信息。
layers: [
// 高德地图
// TileLayer表示一个瓦片图层，它由一系列瓦片（通常是图片）组成，用于在地图上显示地理数据。
new TileLayer({
// 设置图层的数据源为XYZ类型。XYZ是一个通用的瓦片图层源，它允许你通过URL模板来获取瓦片
source: new XYZ({
url: 'https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
})
})
],
// 设置地图的视图参数
// View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
view: new View({
// fromLonLat是一个函数，用于将经纬度坐标转换为地图的坐标系统。
center: fromLonLat([108.924652, 34.208527]),//地图中心点
zoom: 15,// 缩放级别
minZoom: 0,// 最小缩放级别
maxZoom: 18,// 最大缩放级别
constrainResolution: true// 因为存在非整数的缩放级别，所以设置该参数为true来让每次缩放结束后自动缩放到距离最近的一个整数级别，这个必须要设置，当缩放在非整数级别时地图会糊
}),
// 按住shift进行旋转
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
// 控件
controls: defaults().extend([
new FullScreen(), // 全屏
new MousePosition(), // 显示鼠标当前位置的地图坐标
new ScaleLine()// 显示比例尺
])
})
// 事件
map.on('moveend', (e:any) => {
console.log('地图移动', e)
// 获取当前缩放级别
var zoomLevel = map.getView().getZoom();
console.log('当前缩放级别：', zoomLevel);
})
map.on('rendercomplete', () => {
console.log('渲染完成')
})
map.on('click', (e:any) => {
console.log('地图点击', e)
var coordinate = e.coordinate;
// 将投影坐标转换为经纬度坐标
var lonLatCoordinate = toLonLat(coordinate);
// 输出转换后的经纬度坐标
console.log('经纬度坐标：', lonLatCoordinate);
})
}3.openlayers实战
（1）openlayers添加点
自己设置点位或者添加图片都可
/**
* Date:2024/3/26
* Author:zx
* Function:【点】
* @param 无
*/
const dotMethod = () => {
// 创建点特征（Feature）:
let feature = new Feature({
title: 'xian',
geometry: new Point(fromLonLat([108.924652, 34.208527])) // 转换坐标
})
// 设置特征样式（Style）:
feature.setStyle(
new Style({
// 使用 CircleStyle 创建一个圆形的点
image: new CircleStyle({
fill: new Fill({
color: 'red',
}),
radius: 7,
}),
})
);
// 创建和添加特征到源（Source）
// VectorSource表示一个矢量要素源，它用于存储和显示地理数据。
let source = new VectorSource()
source.addFeature(feature)
// 创建图层并设置源（Layer）
// VectorLayer表示一个矢量图层，它由一系列矢量要素（Feature）组成，用于在地图上显示地理数据。
let layer = new VectorLayer()
layer.setSource(source)
map.addLayer(layer)
}（2）鼠标点击生成点
/**
* Date:2024/3/26
* Author:zx
* Function:【鼠标点击生成点】
* @param 无
*/
const DrawMethod = () => {
// 创建一个绘制交互（Draw）
// 监听地图上的鼠标点击事件
map.on('click', function (event: any) {
// 获取点击位置的坐标
let coordinate = event.coordinate;
// 创建点特征（Feature）
let pointFeature = new Feature({
geometry: new Point(coordinate)
});
// 设置点特征的样式（Style）
pointFeature.setStyle(
new Style({
image: new CircleStyle({
fill: new Fill({
color: 'red' // 点的填充颜色为红色
}),
radius: 7, // 点的半径
stroke: new Stroke({
color: 'black', // 点的边界颜色为黑色
width: 2 // 点的边界宽度
})
})
})
);
// 创建和添加特征到源（Source）
let source = new VectorSource();
source.addFeature(pointFeature);
// 创建图层并设置源（Layer）
let layer = new VectorLayer();
layer.setSource(source);
// 将图层添加到地图上
map.addLayer(layer);
});
}（3）openlayers添加线
/**
* Date:2024/3/26
* Author:zx
* Function:【线】
* @param 无
*/
const lineMethod = () => {
// 创建线特征（Feature）:
let lineFeature = new Feature({
geometry: new LineString([
fromLonLat([108.924652, 34.208527]), // 起点经纬度坐标
fromLonLat([108.92314996295164, 34.220681741967226]), // 终点经纬度坐标
// 你可以在这里添加更多的坐标点，以绘制更复杂的线
])
});
// 设置线特征的样式（Style）:
lineFeature.setStyle(
new Style({
stroke: new Stroke({
color: 'red', // 线的颜色
width: 2 // 线的宽度
})
})
);
// 创建和添加特征到源（Source）
let source = new VectorSource();
source.addFeature(lineFeature);
// 创建图层并设置源（Layer）
let layer = new VectorLayer();
layer.setSource(source);
// 将图层添加到地图上
map.addLayer(layer);
}（4）openlayers添加面
/**
* Date:2024/3/26
* Author:zx
* Function:【面】
* @param 无
*/
const faceMethod = () => {
// 定义多边形的坐标数组，这里使用一个简单的正方形作为示例
let coordinates = [
[
fromLonLat([108.924652, 34.208527]),
fromLonLat([108.925652, 34.208527]),
fromLonLat([108.925652, 34.209527]),
fromLonLat([108.924652, 34.209527]),
fromLonLat([108.924652, 34.208527])
]
];
// 创建多边形的几何对象
let polygon = new Polygon(coordinates);
// 创建特征（Feature）
let polygonFeature = new Feature({
geometry: polygon
});
// 设置多边形的样式（Style）
polygonFeature.setStyle(
new Style({
stroke: new Stroke({
color: 'red', // 多边形边界线的颜色
width: 2 // 多边形边界线的宽度
}),
fill: new Fill({
color: 'rgba(255, 0, 0, 0.5)' // 多边形填充颜色，这里设置为半透明红色
})
})
);
// 创建和添加特征到源（Source）
let source = new VectorSource();
source.addFeature(polygonFeature);
// 创建图层并设置源（Layer）
let layer = new VectorLayer();
layer.setSource(source);
// 将图层添加到地图上
map.addLayer(layer);
}
（5）openlayers添加图片
const dotMethod = () => {
// 创建点特征（Feature）:
let feature = new Feature({
title: 'xian',
geometry: new Point(fromLonLat([108.924652, 34.208527])) // 转换坐标
})
// 设置特征样式（Style）:
feature.setStyle(
new Style({
// 自定义图片
image: new Icon({
// anchor: [1, 1],// 显示位置
//图标缩放比例
// scale:0.5,
//透明度
opacity: 0.75,
src: zq// 图片url
})
})
);
// 创建和添加特征到源（Source）
// VectorSource表示一个矢量要素源，它用于存储和显示地理数据。
let source = new VectorSource()
source.addFeature(feature)
// 创建图层并设置源（Layer）
// VectorLayer表示一个矢量图层，它由一系列矢量要素（Feature）组成，用于在地图上显示地理数据。
let layer = new VectorLayer()
layer.setSource(source)
map.addLayer(layer)
}（6）openlayers添加文字标注
/**
* Date:2024/3/26
* Author:zx
* Function:【文字标注】
* @param 无
*/
const addTextAnnotation = (text:any, coordinates:any) => {
// 创建一个点特征（Feature）作为文本标注的位置
let pointFeature = new Feature({
geometry: new Point(coordinates) // 设置点的坐标
});
// 创建一个带有文本的样式（Style）
let textStyle = new Style({
text: new Text({
text: text, // 文本内容
font: '28px Arial, sans-serif', // 字体样式
fill: new Fill({ color: 'red' }), // 文本填充颜色
stroke: new Stroke({ color: 'white', width: 5 }), // 文本边框样式
offsetX: 0, // 文本水平偏移量
offsetY: -10, // 文本垂直偏移量
textAlign: 'center' // 文本水平对齐方式
})
});
pointFeature.setStyle(textStyle);
// 创建一个特征源（Source）并添加点特征
let source = new VectorSource();
source.addFeature(pointFeature);
// 创建一个矢量图层（Layer）并设置特征源
let layer = new VectorLayer({
source: source
});
// 将图层添加到地图上
map.addLayer(layer);
};
注：在需要的地方引用
addTextAnnotation('你好呀', fromLonLat([108.924652, 34.208527]));（7）openlayers添加popup
注：引入Text
import { Circle as CircleStyle, Style, Text,Stroke, Fill, Icon } from "ol/style" // OpenLayers的样式类，用于定义图层的样式，包括圆形样式、基本样式、边框、填充和图标 
/**
* Date:2024/3/26
* Author:zx
* Function:【添加popup】
* @param 无
*/
const createPopup = () => {
// 创建一个弹出窗口容器元素
const popupContainer = document.createElement('div');
popupContainer.setAttribute('id', 'popup');
popupContainer.innerHTML = '<p>Your Popup Content Here</p>';
popupContainer.style.height = '50px';
popupContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; // 设置背景颜色，这里使用了半透明白色
popupContainer.style.textAlign = 'center';
popupContainer.style.padding = '10px';
popupContainer.style.border = '1px solid #ccc';
popupContainer.style.color = 'red';
// 创建一个 Overlay 实例，将弹出窗口容器元素添加到 Overlay 中
const popupOverlay = new Overlay({
element: popupContainer,
autoPan: {
animation: {
duration: 250 // 设置自动平移动画的持续时间，单位为毫秒
}
}
});
// 将 Overlay 添加到地图上
map.addOverlay(popupOverlay);
// 设置弹出窗口的位置（示例位置）
const popupPosition = fromLonLat([108.924652, 34.208527]); // 替换 longitude 和 latitude 为实际的经纬度值
popupOverlay.setPosition(popupPosition);
// 显示弹出窗口
popupContainer.style.display = 'block';
}（8）openlayers添加热力图
注：引入热力图库
import HeatmapLayer from 'ol/layer/Heatmap';
/**
* Date:2024/3/26
* Author:zx
* Function:【热力图】
* @param 无
*/
const heatMap = ()=>{
// 添加随机点数据
const heatmapData = [];
for (let i = 0; i < 100; i++) {
const randomLon = 108.924652 + (Math.random() - 0.5) * 0.2; // 在中心经度附近随机生成经度
const randomLat = 34.208527 + (Math.random() - 0.5) * 0.2; // 在中心纬度附近随机生成纬度
heatmapData.push(fromLonLat([randomLon, randomLat]));
}
// 创建一个矢量数据源，并添加随机点数据
const vectorSource = new VectorSource({
features: heatmapData.map(coord => new Feature(new Point(coord)))
});
// 创建一个热力图层
const heatmapLayer = new HeatmapLayer({
source: vectorSource,
blur: 15, // 设置模糊半径
radius: 20 // 设置热力点半径
});
// 将热力图层添加到地图中
map.addLayer(heatmapLayer);
}（9）openlayers添加聚合点
创建聚合点（Cluster）的逻辑通常用于在地图上显示大量的点数据，当点过于密集时，它们会被聚合到一个表示多个点的单个聚合点中。在OpenLayers等地图库中，你可以使用特定的聚合图层来实现这一功能。
/**
* Date: 2024/3/27
* Author: zx
* Function: 【聚合点图层】
* @param 无
*/
const createClusterLayer = () => {
// 添加随机点数据
const clusterData = [];
for (let i = 0; i < 1000; i++) { // 假设有1000个随机点
const randomLon = 108.924652 + (Math.random() - 0.5) * 0.2; // 在中心经度附近随机生成经度
const randomLat = 34.208527 + (Math.random() - 0.5) * 0.2; // 在中心纬度附近随机生成纬度
clusterData.push(fromLonLat([randomLon, randomLat]));
}
// 创建一个矢量数据源，并添加随机点数据
const vectorSource = new VectorSource({
features: clusterData.map(coord => new Feature(new Point(coord)))
});
// 创建一个聚合图层
const clusterLayer = new VectorLayer({
source: new Cluster({
distance: 40, // 设置聚合的距离阈值
source: vectorSource
}),
style: function(feature) {
// 根据聚合点的数量设置不同的样式
const size = feature.get('features').length;
return new Style({
image: new CircleStyle({
radius: 10 + size / 10, // 半径根据聚合点数量进行调整
stroke: new Stroke({ color: 'white', width: 2 }),
fill: new Fill({ color: getColor(size) }) // 通过数量获取颜色
}),
text: new Text({
text: size.toString(),
fill: new Fill({ color: '#fff' }),
stroke: new Stroke({ color: '#000', width: 3 })
})
});
}
});
// 辅助函数：根据聚合点的数量获取不同的颜色
function getColor(size: number) {
let color = 'blue';
if (size > 100) color = 'red';
else if (size > 50) color = 'orange';
else if (size > 20) color = 'yellow';
return color;
}
// 将聚合图层添加到地图中
map.addLayer(clusterLayer);
};4.地图打印
（1）引入
先引入一个打印模块，一个样式文件
import OlExtPrintDialog from 'ol-ext/control/PrintDialog'; //地图打印
import 'ol-ext/dist/ol-ext.min.css'; //样式文件（2）配置
配置打印控件
let printControl = new OlExtPrintDialog({
lang: "zh", // 设置语言为中文
pdf: true, // 允许生成PDF文件
openWindow: false, // 不在新的浏览器窗口中打开打印对话框，而是在当前页面的某个元素中打开
title: '打印地图' // 打印对话框的标题
});（3）添加
添加到 OpenLayers 地图实例中
//new Map完成之后
map.addControl(printControl);（4）打印
点击地图左上角打印按钮，实现地图打印功能
注：打印预览的一切样式都建立在地图中
2520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
