035：vue+leaflet直接加载图片缩放，不需要地图底图

已于 2024-05-11 11:50:35 修改
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： # leaflet综合教程150+ 文章标签： leaflet加载图片 crs.SImple leaflet学习 leaflet教程 大剑师
于 2022-11-17 11:40:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/127900987
本文由大剑师兰特撰写，他是一名GIS领域的高级前端工程师，分享了如何在Vue+Leaflet环境下，不依赖地图底图直接加载并缩放图片的方法。该教程介绍了配置步骤和源代码，适用于平面地图应用，如游戏地图。通过简单的CRS映射，实现了经度和纬度到x、y轴的转换，且注意y轴需要反转。只需复制源代码，即可快速实现效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

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

文章目录

一、示例效果图

二、示例简介

本示例演示如何在vue+leaflet直接加载图片缩放，不需要地图底图。将经度和纬度直接映射到 x 和 y 的简单 CRS。 可用于平面地图（例如游戏地图）。 请注意，y 轴仍应反转（从下到上）。

直接复制下面的 vue+leaflet源代码，操作2分钟即可运行实现效果

三、配置方式

1）查看基础设置：http

了解本专栏 订阅专栏 解锁全文
003：vue+leaflet 清除所有图层的通用方法
大剑师兰特的GIS世界
09-08 3518
本示例的目的是介绍演示如何在vue+leaflet中添加各种地图，并清除所有的图层。貌似很简单的一个示例，但是在学习和工作中非常重要，往往会根据项目的需要来删除图层，达到预期效果。点击查看本专栏内容目录列表。
leaflet加载接入百度地图（leaflet篇.2）
地图之家
05-14 7804
完整代码文件在文章末尾处提供 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Historic Topographic Maps</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> <!-- L
leaflet加载百度地图
热门推荐
Jack的世界
10-18 1万+
leaflet加载百度地图 由于百度地图的切片规则和普通的互联网地图的切片规则不那么一样，所以大多数的文章介绍了如何加载例如：天地图，高德地图，腾讯地图等地图，但是唯独百度地图的介绍的不多也有一些感觉是不太合适的，我从这篇文章了解到了他的一些切片规则，然后决定将百度地图拓展出来，给需要他的人使用。 首先需要一些第三方的插件坐标系拓展首先我使用了这个玩意儿。这里需要注意的是，如果你使用的是0.7版
Leaflet加载百度地图
吴道简的博客
04-13 2276
为了验证一下百度地图的影像、矢量、注记等瓦片数据是否是坐标统一的，写了一个简单的leaflet加载百度影像瓦片、矢量瓦片、注记瓦片的页面，叠加在一起，看了一下，果然坐标系是统一的。 <!DOCTYPE html> <html> <head> <title>加载百度地图</title> <meta charset="utf-8"> <style type="text/css"&...
002：vue+leaflet 加载多种形式的高德地图
大剑师兰特的GIS世界
09-08 2715
本示例的目的是介绍演示如何在vue+leaflet中添加高德地图，有多种形式，分别是高德路网图、高德卫星影像图、高德矢量地图等。点击查看本专栏内容目录列表。
022：vue+leaflet 加载MapTilesAPI地图（多种形式）
大剑师兰特的GIS世界
11-11 555
第022个本示例的目的是介绍演示如何在vue+leaflet中添加MapTilesAPI地图，有多种形式，分别是英语版本、法语版本、西班牙语版本。MapTiles API 是一家经济实惠且可靠的图块提供商，提供覆盖地球的英语、法语或西班牙语地图图块以及 OpenStreetMap 标准图块（带有本地语言标签），以供大量业务使用。
019：vue+leaflet 加载Geoserver地图，wms格式数据
大剑师兰特的GIS世界
09-16 882
本示例的目的是介绍演示如何在vue+leaflet中添加geoserver发布的地图，wms格式的数据。点击查看本专栏内容目录列表。
034：vue+leaflet 加载腾讯地图 (路网、影像、地形)
大剑师兰特的GIS世界
11-17 1124
第034个本示例的目的是介绍演示如何在vue+leaflet加载腾讯地图，这里使用了control.layers进行切换3种不同的百腾讯底图。
leaflet加载百度地图底图
08-11
融合leaflet和百度地图底图
leaflet加载百度地图和其他网络在线地图
08-23
leaflet加载百度地图和其他网络在线地图，包含百度的瓦片、影像以及道路交通实况服务，测试，百度坐标数据无需转换，直接根据经纬度可以显示在正确位置。
leaflet 加载百度自定义地图
12-01
leaflet 加载百度自定义地图，支持自定义百度地图样式
leaflet加载百度地图(矫正版)
12-20
http://blog.csdn.net/u012087400/article/details/53744756
leaflet加载百度、高德、谷歌、天地图等在线地图
03-26
leaflet加载百度、高德、谷歌、天地图等在线地图
Leaflet加载GeoJSON数据，并添加到FeatureGroup
LbJ_MVP的博客
08-24 6568
Vue地图项目，加载 GeoJSON数据，并添加到定义好的 FeatureGroup 上；L.GeoJSON解析。
Leaflet地图加载百度底图
lihefei_coder的博客
08-11 962
源代码 <!DOCTYPE html> <html style="padding:0;margin:0;"> <head> <meta charset="utf-8"/> <title></title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css"> <script src="http.
leaflet加载GeoJSON文件及pointToLayer参数的使用方法
laugh666的博客
08-31 682
在这里，我们将点要素的半径设置为8，填充颜色为蓝色，边框颜色为白色，并设置透明度为0.8。通过以上代码，我们可以加载GeoJSON文件并自定义点要素的样式。当然，我们也可以根据实际需求对其他类型的地理要素进行个性化的渲染。Leaflet是一个用于创建交互式地图的JavaScript库，它提供了丰富的功能和易于使用的API。GeoJSON是一种常用的地理数据格式，它可以表示点、线、面等地理要素。首先，我们需要准备一个包含点要素的GeoJSON文件。这使得我们可以根据需要对每个点要素进行个性化的渲染。
leaflet 绘制带箭头的线条（路径）
zcylyzhi4的博客
03-30 8424
最近接到项目需求，需要在网页上实时展示APP用户巡检的轨迹，这个需求很简单，直接用leaflet画polyline就可以满足；很快便出了一版效果很项目经理，但是项目经理一看，说：这个和百度地址的路径展示差距太大，要求实现的效果和百度地图一样。OK，经过请教百度老师，发现leaflet的polylineDecorator可以满足此需求。经过实践，效果还不错，故分享出来，供参考和指导。 1、引入 leaflet.min.js 和 leaflet.polylineDecorator.js 访问polylineDe
深色地图vue3 + leaflet实现天气要素地图
最新发布
12-28
### 实现带有天气要素的深色地图 为了实现在 Vue3 中集成 Leaflet 并展示带天气要素的地图，可以按照如下方法操作： #### 安装依赖库 首先，在项目中安装必要的 npm 包来支持 Vue3 和 Leaflet 的工作。 ```bash npm install leaflet @vue-leaflet/vue-leaflet axios ``` 这会引入 `Leaflet` 地图库及其对应的 Vue 组件封装[@vue-leaflet/vue-leaflet][^1]以及用于获取外部 API 数据（比如天气信息）的工具包 `axios`. #### 创建组件并初始化地图实例 接着创建一个新的 Vue 单文件组件用来承载地图逻辑: ```html <template> <div id="mapContainer"></div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import L from 'leaflet'; import '@vue-leaflet/vue-leaflet/dist/style.css'; const mapRef = ref(null); onMounted(() => { const osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', osmAttribution = '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Weather data provided by OpenWeatherMap', darkLayerURL = "https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"; let map = L.map(mapRef.value).setView([51.505, -0.09], 13); // 添加底图瓦片层 (使用CartoDB Dark Matter样式) L.tileLayer(darkLayerURL, { attribution: osmAttribution, subdomains: ['a', 'b', 'c'], maxZoom: 18 }).addTo(map); }); </script> <style scoped> #mapContainer { height: 400px; } </style> ``` 上述代码片段展示了如何通过设置不同的 URL 来加载不同风格的地图切片服务。这里选择了 CartoDB 提供的一个暗色调主题作为背景[^2]. #### 获取实时气象数据并与地图关联显示 对于动态更新的天气图标或其他可视化效果，则需调用第三方API(如OpenWeatherMap)，并将返回的数据解析后绑定到特定位置上绘制出来。 ```javascript async function fetchWeatherData(latlng){ try{ const response = await axios.get(`http://api.openweathermap.org/data/2.5/weather?lat=${latlng.lat}&lon=${latlng.lng}&appid=YOUR_API_KEY`); console.log(response.data); // 处理接收到的信息... }catch(error){ console.error('Error fetching weather:', error); } } // 假设有一个按钮点击事件触发此函数去请求当前位置附近的天气状况. document.getElementById('getWeather').addEventListener('click', () => { var latlng = map.getCenter(); fetchWeatherData(latlng); }) ``` 这段 JavaScript 负责向指定坐标发起 HTTP 请求取得最新的气候条件报告，并打印至控制台以便后续处理。注意替换掉示例中的 YOUR_API_KEY 字符串为你自己的有效密钥[^3].
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

还是大剑师兰特

打赏一杯可口可乐

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

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

打赏作者

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

抵扣说明：

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

余额充值