vue中使用openlayers离线地图计算两点之间距离(四)

计算两点之间距离首先要获取两点的经纬度,因为每个地图的经纬度都有些许的偏差,所以这里计算的距离也会有所偏差,大致是差不多的
需要引入计算距离的方法
import { getDistance } from 'ol/sphere'
创建计算距离的方法
// 计算距离
const diffDistance = (start, end) => {
  const length = getDistance(start, end)
  return length < 1000 ? Math.round(length) + '米' : Math.round(length / 1000) + '公里'
}
使用
onMounted(() => {
  // 传入两点的经纬度
  console.log(diffDistance([108.94655, 34.2321], [108.94655, 34.23183]), '>>距离')
})
  • 4
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
为了在Vue3使用OpenLayers显示离线地图,您需要执行以下步骤: 1. 首先,您需要安装OpenLayers和proj4js依赖项。您可以使用以下命令进行安装: ```shell npm install ol proj4 --save ``` 2. 接下来,您需要下载离线地图瓦片。您可以使用QGIS等工具创建自己的离线地图瓦片,或者从第三方提供商下载现成的瓦片。将下载的瓦片放在您的项目的public文件夹。 3. 在Vue组件,您需要导入OpenLayers和proj4js库,并创建一个地图实例。您需要使用proj4js库来设置地图的投影方式。以下是一个示例组件: ```vue <template> <div id="map" class="map"></div> </template> <script> import 'ol/ol.css'; import { Map, View } from 'ol'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import XYZ from 'ol/source/XYZ'; import proj4 from 'proj4'; export default { name: 'MapComponent', mounted() { // 设置投影方式 proj4.defs('EPSG:3857', '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs'); // 创建地图实例 const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new XYZ({ url: '/tiles/{z}/{x}/{y}.png', // 离线瓦片路径 }), }), ], view: new View({ center: [0, 0], zoom: 2, projection: 'EPSG:3857', }), }); }, }; </script> <style> .map { height: 500px; } </style> ``` 在上面的示例,我们使用XYZ源加载离线瓦片,并将其添加到地图图层。我们还设置了地图的投影方式为EPSG:3857。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值