vue-baiduMap开发百度地图的自定义图片----瓦片图层

最新推荐文章于 2024-05-14 11:21:45 发布

jewelleryGold

最新推荐文章于 2024-05-14 11:21:45 发布

阅读量1.8k

点赞数

文章标签：百度 vue.js

本文链接：https://blog.youkuaiyun.com/website__/article/details/120367272

版权

Vue Baidu Map这个是官网的地址，大家可以参考下

最近的一个需求是用到我们公司自己设计出来的图片替换成百度地图上的图片，看了网上的很多教程，没有相对完整的教程，于是自己找了很多文档，实践了，实现了这个需求，下面分享给大家

<bm-tile :isTransparentPng="true" :tileUrlTemplate="imgUploadUrl +'/Content/sms_map/tiles/{Z}/tile-{X}_{Y}.png'" :zIndex="999">
               </bm-tile>

tileUrlTemplate这个图片的路径需要在后台配置，让你们的后端给它放在服务器上，以便于你可以访问到，我尝试的是在前端直接放静态图片请求没用！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jewelleryGold

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue+mapbox通过地图添加自定义图层(工作笔记，不能直接复制使用，需要自行调整部分代码)

_小郑有点困了的博客

09-05

852

有时候地图上需要叠加标签，但是marker可能不能达不到更好的效果，例如，点击事件，popup等，那么这时候就可以考虑通过自定义图层达到目的了。

java+vue使用百度地图用代理方式访问瓦片

11-06

百度离线瓦片放入tomcat或者nginx中代理使用离线瓦片地图在index.htm中引入具体目录图片格式自己可以在 load文件中进行更改

2 条评论您还未登录，请先登录后发表或查看评论

vue2+百度瓦片地图

Jdanne的博客

05-14

706

最近发现很多小伙伴都在问内网怎么使用百度地图，或者是断网情况下能使用百度地图吗后面经过一番研究，主要难点是，正常情况下我们是访问公网百度图片，数据，才能使用内网时访问不了百度地图资源时就会使用不了，如果我们能把我们需要数据下载到本地，自己访问自己，那这个问题就可以解决我们可以使用地图下载器下载我们需要的瓦片图数据，使用serve运行起来，这样内网和断网就可以使用了遗憾的是只能基本展示，定位。vue-内网，离线使用百度地图（地图瓦片图下载静态资源展示定位）_vue 百度离线地图-优快云博客。

在vue中使用百度地图的MapVGL 添加自定义模型图层（gltf模型）

盛典

07-14

2480

找遍全网没有有用信息，看来就只能自己摸索了，今天就说一下vue中怎么加载glft 简单分析问题:主要的坑就是vue每个文件都是模块化，都需要loader解析的（css，js，vue模板等等），但是就是没有解析glft 第一种方法使用axios请求线上地址。需要后端配合，直接跳过需要loader的前端模块化第二种方法把文件放入public中，使用http://localhost:8080/glft 直接请求本地文件是不是很简单，哈哈哈 ...

vue加载百度离线地图V3.0瓦片数据，瓦片数据做nginx代理

这个人很懒，什么都没留下！

10-21

6764

1：资源准备 1.1百度离线文件链接: https://pan.baidu.com/s/1-3tZ6eZvp2vdCsWLi-9MAg 提取码: vjxa 1.2瓦片数据下载器链接: https://pan.baidu.com/s/1MZjWobc1DQGX_ApYBNtROg 提取码: pxd1 2：构建vue的空项目此步直接略过，不会的自行解决 3：在vue2.x中使用 3.1 把下载的1.1中的百度离线文件解压到 public/static下，static文件夹自己新建一个 3.2 在inde

vue使用百度地图----离线地图

ʚ菲菲的博客ɞ

10-09

3175

vue使用百度离线地图三要素： 1、地图API文件； 2、依赖文件； 3、地图瓦片。 1、文件结构注：相关文件需放在public文件夹下 2、api文件修改修改 bmapcfg.tiles_dir 值为本地瓦片路径或自己的瓦片地址 3、引入 map_load.js引入 index.html引入 4、页面使用 HTML部分 <div class='baiduMap' id='mapShow' ref="mapShow"></div> JS数据方法部分

我是直接import BaiduMap from "vue-baidu-map";使用的百度地图 所以如何更改层级

最新发布

03-19

在 `vue-baidu-map` 中，可以通过设置 BMap 的 `setMapType` 方法或者直接操作图层来更改百度地图的显示层级。具体来说，可以利用 `<baidu-map>` 组件中的 `ak` 属性加载 API 并配置相关参数[^1]。以下是实现调整...

Vue-baidu-map教程大揭秘：离线地图实现与性能优化策略

本文全面探讨了Vue-baidu-map组件的集成、原理、离线地图实现技术、性能优化以及应用场景与开发技巧。首先介绍了Vue-baidu-map的集成过程和初步体验，然后深入分析了其组件架构、事件和回调机制以及依赖和插件管理。...

Vue-baidu-map插件使用全攻略：高效处理离线地图数据

[Vue-baidu-map插件使用全攻略：高效处理离线地图数据](https://opengraph.githubassets.com/44ad0473ab3783e96003ba265a536749583b4f2b486372e4e7c5baaf974b428f/whj0117/vue-baidu-map-scheduling) # 摘要本文...

前端项目加载离线的百度地图，利用工具进行切指定区域的地图影像，自定义图层getTilesUrl

qq_920189602的博客

05-08

3299

百度地图在开发中我们经常使用，但是有些项目是需要在内网进行，这时候我们不得不考虑项目中一些功能需要请求外网静态资源，比如百度地图。只有把包下载到本地，才能让静态资源文件的正常的访问。

百度地图瓦片

05-28

html百度地图，11到13级瓦片，可用于制作离线版本的百度地图。

vue-baidu-map,百度地图切图工具，瓦片图制作利器

04-03

百度地图切图工具，瓦片图制作利器，结合vue-baidu-map制作瓦片图，可直接生成瓦片图内容，生成对应的瓦片图内容的HTML

Vue Baidu Map

09-25

Vue Baidu Map的demo 在vue里面直接使用百度地图的一个demo,供大家学习参考,有不足的地方留言一块讨论

leaflet-tileLayer-baidugaode:leaflet 加载百度瓦片地图图层以及高德、天地图等国内常用地图

05-22

Leaflet加载国内百度、高德、谷歌、天地图等地图加载百度地图 //注意将map的crs赋值 crs: L.CRS.Baidu 详情请阅读示例页面 var map = L.map('map', { crs: L.CRS.Baidu, minZoom: 3, maxZoom: 18, attributionControl: false, center: [31.834912, 117.220102], zoom: 12 }); //控制地图底图 L.control.layers({ "百度地图": L.tileLayer.baidu({ layer: 'vec' }).addTo(map), "百度卫星": L.tileLayer.baidu({ layer: 'img' }), "百度地图-大字体": L.tileLayer.baidu({ layer: 've

vue-baidu-map离线百度地图，并附带jar包免费下载百度瓦片数据

02-23

1.vue-baidu-map在线地图代码不用改动，只用按照文档添加baidu-api.js和baidu-init.js，并在vue依赖包 node_modules文件找到，修改vue-baidu-map的 index.js文件就能完成离线配置 2.jar包可以免费下载百度地图瓦片数据 3.瓦片数据如果下载层级过大，建议放在nginx代理，文档也是以nginx代理的方式去实现离线效果 4.2022-12-05日更新，可能会出现项目实际部署之后，地图无法拖拽的问题，新添加了8个js文件，并修改了一下baidu-api.js代码引入这八个js(直接搜索http://127.0.0.1/js换成你本地路径就行) 5.提供了四川和贵州的离线瓦片百度云数据，可以下载下来之后，实验一下离线地图效果

vue+mapbox通过地图添加自定义图层、聚合、点击等(工作笔记，不能直接复制使用，需要自行调整部分代码)

_小郑有点困了的博客

09-05

1350

mapbox聚合显示、自定义图层图标点等。

【vue-baidu-map】自定义地图

joanmelon的博客

06-28

3329

☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~

vue中使用vue-baidu-map时的自定义个性化地图问题

small_animation的博客

07-05

1528

1.找到node_modules/vue-baidu-map/index.js文件，修改其中https://api.map.baidu.com/api?v=2.0的版本到3.0，然后查看项目，示例如下：2.之后就只需要增加map.setMapStyleV2()，示例如下：

BaiduMap SDK-TileOverlay(瓦片图层)

牛八少爷的专栏

07-21

2256

1 瓦片简介瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小(比如256x256像素)的正方形地图瓦片，形成第0层瓦片矩阵;在第0层地...