uniapp 整合openlayers 在线服务增删改

原创

已于 2025-03-18 16:24:49 修改 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #前端 #javascript

于 2025-02-21 14:21:18 首次发布

1、依赖

import TileLayer from 'ol/layer/Tile.js'// OpenLayers的瓦片图层类 
import TileWMS from 'ol/source/TileWMS.js';
import XYZ from 'ol/source/XYZ.js'
import Overlay from 'ol/Overlay';
import { transform,toLonLat } from 'ol/proj.js'// OpenLayers的投影转换函数，用于经纬度坐标和投影坐标之间的转换
import Feature from 'ol/Feature.js';
import MultiPoint from 'ol/geom/MultiPoint.js';
import MultiLineString from 'ol/geom/MultiLineString.js';
import MultiPolygon from 'ol/geom/MultiPolygon.js';
import {getCenter} from 'ol/extent';
import {GeoJSON, GML, WFS} from 'ol/format'; 
import {Select, Draw, Modify, Snap} from 'ol/interaction.js';
import { Vector as VectorLayer } from 'ol/layer.js'  // OpenLayers的矢量图层类，用于显示矢量数据        
import { Vector as VectorSource } from 'ol/source.js'  // OpenLayers的矢量数据源类，用于管理和提供矢量数据       
import { Circle as CircleStyle, Style, Stroke, Fill, Icon } from "ol/style.js"

2、弹窗设置和调用方法

<template>
    ***
	<div id="overlay-popup" class="overlay-popup"></div>
</template>
<script>
***
// 获取dom
const container = document.getElementById('overlay-popup');
//调用选择方法
selectLayer(newKeys,container);
***
</script>
<style scoped lang="scss">
***
// 点选弹窗样式
 	.overlay-popup{
 	    position: absolute;
 		background-color: white;
 		font-size: 14rpx;
 		-webkit-filter: drop-shadow(0 1rpx 4rpx rgba(0,0,0,0.2));
 		filter: drop-shadow(0 1rpx 4rpx rgba(0,0,0,0.2));
 		padding: 15rpx;
 		border-radius: 10rpx;
 		border: 1rpx solid #cccccc;
 		bottom: 12rpx;
 		text-align: left;// 内容居中
 		left: -140rpx;// 整体位置往左偏移60px(根据实际情况调整)
 		width: 240rpx;
 	  }
 	  .overlay-popup:before {// 弹出框底部的三角
 	    position: absolute;
 	    top: 100%;
 	    border: 10rpx solid transparent;
 	    border-top-color: #ffffff;
 	    content: "";
 	    left: 130rpx;// 根据上面的宽度进行三角号的调整
 	  }
 	  .overlay-popup-hidden{// 隐藏样式
 	    display: none
 	  }
	
</style>

3、点选方法并弹出弹窗

var layers = [];// 图层列表
var layersMap = null;// map对象
var layersContainer = null;// dom对象 

// 选择图层
export const selectLayer = (newKeys,container) =>{
	layersContainer = container;
	
	Object.keys(layers).forEach(key => {
		const layer = layer