openlayers根据下拉框选项在地图上显示图标

这里是关于一个根据下拉框的选项在地图上显示图标的需求,用的是vue+openlayers

显示效果大概是这样:

选中选项之后会跳转到所点击的城市,并且在地图上显示图标+温度,这一块UI没设计我就大概先弄了一下,比较丑。。

首先放一个层

javascript 复制代码
<div id="weatherInfo"></div>
//下面是遮盖物的div
<div id="temperatureOverlay" ></div>

接下来是js部分,首先创建一个地图,我这里使用的是本地静态切片。

javascript 复制代码
const center = ol.proj.transform([112, 38.42], 'EPSG:4326', 'EPSG:3857');
						
						const map = new ol.Map({
						target: 'map',
						layers: [
							
							
						
							new ol.layer.Tile({
							source: new ol.source.XYZ({
								url: 'satellite/{z}/{x}/{y}.jpg'
							}),
							isGroup: true,
						
							}),
							new ol.layer.Tile({
							source: new ol.source.XYZ({
								url: 'overlay/{z}/{x}/{y}.png'
								
							}),
							isGroup: true,
							name: '天地图文字标注'
							}),
						],

						view: new ol.View({
							center: center,
							zoom:4
						})
						})

接下来是用本地的数据生成下拉框选项,以及绘制/创建天气text覆盖物

javascript 复制代码
//创建天气列表
							const cityWeatherData = [
							{
								city: '北京',
								temperature: 25,
								icon: 'icon/sun.png',
								coordinates: [116.4074, 39.9042]
							},
							{
								city: '上海',
								temperature: 28,
								icon: 'icon/sun.png',
								coordinates: [121.4737, 31.2304]
							},
							// 其他城市的天气数据
							];

							const citySelect = document.getElementById('citySelect');
							const iconLayer = new ol.layer.Vector({
							source: new ol.source.Vector()
							});
							map.addLayer(iconLayer);

							cityWeatherData.forEach(function(data) {
							const option = document.createElement('option');
							option.value = data.city;
							option.textContent = data.city;
							citySelect.appendChild(option);
							});

							const weatherInfo = document.getElementById('weatherInfo');

							citySelect.addEventListener('change', function() {
							const selectedCity = citySelect.value;
							const selectedWeatherData = cityWeatherData.find(function(data) {
								return data.city === selectedCity;
							});
							iconLayer.getSource().clear();

							if (selectedWeatherData) {
								const iconFeature = new ol.Feature({
								geometry: new ol.geom.Point(ol.proj.fromLonLat(selectedWeatherData.coordinates)),
								name: selectedWeatherData.city,
								temperature: selectedWeatherData.temperature,
								icon: selectedWeatherData.icon
								});
								const iconStyle = new ol.style.Style({
								image: new ol.style.Icon({
									src: selectedWeatherData.icon,
									scale: 0.5
								})
								});
								iconFeature.setStyle(iconStyle);
								iconLayer.getSource().addFeature(iconFeature);
								map.getView().animate({
								center: ol.proj.fromLonLat(selectedWeatherData.coordinates),
								zoom: 10
								});
							} else {
								iconLayer.getSource().clear();
								map.getView().animate({
								center: ol.proj.fromLonLat([0, 0]),
								zoom: 2
								});
							}
							});
						// 创建天气温度覆盖物
						const temperatureOverlay = new ol.Overlay({
						element: document.getElementById('temperatureOverlay'),
						positioning: 'bottom-center',
						offset: [0, -10],
						stopEvent: false // 允许覆盖物接收事件
						});
						map.addOverlay(temperatureOverlay);

						// 在城市选择事件中更新天气温度覆盖物
						citySelect.addEventListener('change', function() {
						const selectedCity = citySelect.value;
						const selectedWeatherData = cityWeatherData.find(function(data) {
							return data.city === selectedCity;
						});

						if (selectedWeatherData) {
							// 更新覆盖物内容
							const temperatureElement = temperatureOverlay.getElement();
							temperatureElement.innerHTML = selectedWeatherData.temperature + '°C';

							// 更新覆盖物位置
							temperatureOverlay.setPosition(ol.proj.fromLonLat(selectedWeatherData.coordinates));
						} else {
							// 隐藏覆盖物
							temperatureOverlay.setPosition(undefined);
						}
						});
相关推荐
勤劳打代码24 分钟前
妙笔生花 —— Flutter 实现飞入动画
前端·flutter·设计模式
银安31 分钟前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
昭昭日月明33 分钟前
mac 效率工具:Raycast 的扩展开发
前端·mac·设计
white-persist37 分钟前
XXE 注入漏洞全解析:从原理到实战
开发语言·前端·网络·安全·web安全·网络安全·信息可视化
练习时长一年1 小时前
Spring内置功能
java·前端·spring
SHUIPING_YANG1 小时前
完美迁移:将 nvm 和 npm 完全安装到 Windows D 盘
前端·windows·npm
lypzcgf1 小时前
Coze源码分析-资源库-编辑数据库-前端源码-核心组件
前端·数据库·源码分析·coze·coze源码分析·ai应用平台·agent平台
勤奋菲菲2 小时前
Koa.js 完全指南:下一代 Node.js Web 框架
前端·javascript·node.js
晒太阳5792 小时前
懒加载与按需加载
前端