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

最新推荐文章于 2024-05-16 02:23:14 发布
最新推荐文章于 2024-05-16 02:23:14 发布
阅读量1.7k 收藏 2
点赞数
文章标签： 百度 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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这个图片的路径需要在后台配置，让你们的后端给它放在服务器上，以便于你可以访问到，我尝试的是在前端直接放静态图片请求没用！！！

jewelleryGold
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue+mapbox通过地图添加自定义图层(工作笔记，不能直接复制使用，需要自行调整部分代码)
_小郑有点困了的博客
09-05 778
有时候地图上需要叠加标签，但是marker可能不能达不到更好的效果，例如，点击事件，popup等，那么这时候就可以考虑通过自定义图层达到目的了。
vue+mapbox通过地图添加自定义图层、聚合、点击等(工作笔记，不能直接复制使用，需要自行调整部分代码)
_小郑有点困了的博客
09-05 1202
mapbox聚合显示、自定义图层图标点等。
在vue中使用百度地图的MapVGL 添加自定义模型图层（gltf模型）
盛典
07-14 2278
找遍全网没有有用信息，看来就只能自己摸索了，今天就说一下vue中怎么加载glft 简单分析问题:主要的坑就是vue每个文件都是模块化，都需要loader解析的（css，js，vue模板等等），但是就是没有解析glft 第一种方法 使用axios请求线上地址。需要后端配合，直接跳过需要loader的前端模块化 第二种方法 把文件放入public中，使用http://localhost:8080/glft 直接请求本地文件 是不是很简单，哈哈哈 ...
vue + echart 百度地图添加本地图片渲染_vue+echarts添加本地图片(2)
最新发布
2401_84617477的博客
05-16 156
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】ak: ‘你的百度地图的key’})百度地图开放平台 | 百度地图API SDK | 地图开发//百度地图title: {},tooltip: {return ("基站名称: " + params.name + "" +"公里标: " + params.value[2] + ""+
vue中使用vue-baidu-map时的自定义个性化地图问题
small_animation的博客
07-05 1439
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 2039
1 瓦片简介    瓦片地图金字塔模型是一种多分辨率层次模型，从瓦片金字塔的底层到顶层，分辨率越来越低，但表示的地理范围不变。首先确定地图服务平台所要提供的缩放级别的数量N，把缩放级别最高、地图比例尺最大的地图图片作为金字塔的底层，即第0层，并对其进行分块，从地图图片的左上角开始，从左至右、从上到下进行切割，分割成相同大小(比如256x256像素)的正方形地图瓦片，形成第0层瓦片矩阵;在第0层地...
使用Vue-Grid-Layout实现自定义工作台
02-01
Vue-Grid-Layout 是一个基于 Vue.js 的响应式栅格布局系统，它允许开发者创建自定义的工作台，用户可以根据需要自由调整各个组件的位置和大小。在本教程中，我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作...
vue-baidu-map,百度地图切图工具，瓦片图制作利器
04-03
百度地图切图工具，瓦片图制作利器，结合vue-baidu-map制作瓦片图，可直接生成瓦片图内容，生成对应的瓦片图内容的HTML
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包可以免费下载百度地图瓦片...
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
10-15
主要介绍了vue-quill-editor 自定义工具栏和自定义图片上传路径操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
10-18
在本文中，我们将探讨如何使用`vue-video-player`这个Vue.js组件来实现自定义全屏切换效果。`vue-video-player`是一个基于`video.js`的视频播放器，它提供了丰富的API和自定义选项，使得在Vue项目中集成视频播放变得...
百度地图瓦片
05-28
html百度地图，11到13级瓦片，可用于制作离线版本的百度地图。
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
java+vue使用百度地图用代理方式访问瓦片
11-06
百度离线瓦片 放入tomcat或者nginx中代理使用离线瓦片地图 在index.htm中引入 具体目录图片格式自己可以在 load文件中进行更改
vue+mapbox添加自定义图片图层、选中效果、显示popup、增加marker、图层过滤等
_小郑有点困了的博客
11-04 1297
例如：平时需要在地图上显示一些设备的分布及状态。
vue加载百度离线地图V3.0瓦片数据，瓦片数据做nginx代理
这个人很懒，什么都没留下！
10-21 6051
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中使用百度地图
zky1065563491的博客
06-09 153
项目引地图，同事扒拉瓦片图 用了一个月也没有把地图引入上去，属实是高手，为防止再度出现受害者，见到此文章，请点击https://dafrok.github.io/vue-baidu-map/#/zh/start/installation 官方文档
android百度地图深入,深入学习百度地图Android SDK v4.0.0【第五关】瓦片图层
weixin_29832179的博客
05-26 557
官方说是可以使用自己的图片，但是图片的大小和规格都没有明说，主要用于添加自己的图层信息，有在线和离线两种！估计使用率很低，也就不多说了！package cq.cake.chwl.ui;import android.content.res.AssetManager;import android.graphics.Bitmap;import android.graphics.BitmapFactory...
vue-lazyload 再封装自定义图片指令
05-18
好的，可以的。 首先，我们需要知道 `vue-lazyload` 是一个 Vue 插件，它提供了一个指令 `v-lazy`，可以用来实现图片懒加载。它的使用方式如下： ```html <img v-lazy="imgUrl"> ``` 其中，`imgUrl` 是图片的地址。当图片进入可视区域时，`v-lazy` 指令会自动将 `img` 标签的 `src` 属性设置为 `imgUrl`，从而实现图片的加载。 接下来，我们可以封装一个自定义指令，来简化 `v-lazy` 的使用。 ```js import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { loading: require('@/assets/loading.gif') }) Vue.directive('lazy', { bind: (el, binding) => { el.setAttribute('data-src', binding.value) el.setAttribute('src', require('@/assets/loading.gif')) }, inserted: el => { const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { const imgSrc = el.getAttribute('data-src') el.setAttribute('src', imgSrc) observer.disconnect() } }) observer.observe(el) } }) ``` 上面的代码中，我们使用 `Vue.directive` 方法定义了一个名为 `lazy` 的自定义指令。该指令的作用和 `v-lazy` 相同，用于实现图片的懒加载。 在自定义指令的 `bind` 钩子函数中，我们获取了图片的地址，并将其设置为 `data-src` 属性的值。同时，我们将 `src` 属性的值设置为一个占位图，这里使用了一个 loading 图片。 在自定义指令的 `inserted` 钩子函数中，我们使用了 `IntersectionObserver` API 来观察图片是否进入了可视区域。当图片进入可视区域时，我们将 `src` 属性的值设置为 `data-src` 属性的值，从而实现图片的加载。 最后，我们使用 `Vue.use` 方法将 `vue-lazyload` 插件安装到 Vue 中，并设置了一个全局的 loading 图片。 接下来，在 Vue 模板中，就可以使用我们自定义的指令了： ```html <img v-lazy="imgUrl"> ``` 其中，`imgUrl` 是图片的地址。 希望这个例子能对你有所帮助！
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值