283:vue+openlayers 4326和3857坐标系下的分辨率区别

285 篇文章 202 订阅 ¥259.90 ¥399.90

作者: 还是大剑师兰特 ,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。

查看本专栏目录 - 本文是第 283个示例

一、示例效果图

二、示例简介

在OpenLayers中,view.getResolution() 方法返回的是地图视图当前的分辨率,这里的“分辨率”指的是每单位屏幕距离所代表的地图上的实际距离(通常是以地图单位/像素来表示)。这个值可以是小数,这是因为分辨率通常是为了适应不同的缩放级别而被设定的,并且这些缩放级别的分辨率不一定总是整数。

OpenLayers中的分辨率(resolution)和缩放级别(zoom level)是密切相关的。每个缩放级别都有一个对应的分辨率值,这个值决定了地图上每像素代表的实际地理长度。随着缩放级别的增加,

  • 23
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 16
    评论
Vue OpenLayers 是一种基于 Vue.js 的开源地图库,结合了 OpenLayers 的强大功能和 Vue.js 的易用性。其中,鼠标 pointermove 显示城市名片是 Vue OpenLayers 中非常有用的功能之一。下面我们来看一下示例代码。 在 Vue OpenLayers 中,我们可以使用 PointerMove() 方法来实现鼠标移动时的功能。我们可以在 mounted() 中添加以下代码: ```JavaScript mounted() { this.map.on('pointermove', this.displayCityCard); } ``` 这里,我们为指针移动事件添加了一个监听器,该监听器会调用 displayCityCard 方法。 接下来,我们需要实现 displayCityCard 方法,该方法会在指针移动时显示城市名片。代码如下: ```JavaScript methods: { displayCityCard(evt) { let features = this.map.getFeaturesAtPixel(evt.pixel); if (features.length) { let feature = features[0]; let city = feature.get('name'); this.city = city; this.showCityCard = true; } else { this.showCityCard = false; } } } ``` 这里,我们首先通过 getFeaturesAtPixel() 方法获取与指针所在位置对应的要素。如果有要素,则从中取出城市名,并将其赋值给 city。同时,我们将 showCityCard 属性设置为 true,以显示城市名片。如果没有要素,则将 showCityCard 设置为 false,以隐藏城市名片。 最后,我们需要在模板中添加一个 div 元素,用于显示城市名片: ```HTML <div v-if="showCityCard" class="city-card"> {{ city }} </div> ``` 这里,我们使用了 v-if 指令来控制 div 元素的显示与隐藏。如果 showCityCard 为 true,则显示该元素,并将城市名字显示在其中。 以上就是在 Vue OpenLayers 中实现鼠标 pointermove 显示城市名片的示例代码。通过这个函数,我们可以更加便捷地在地图上查看城市信息。
评论 16
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值