vue天地图遮罩层添加

最新推荐文章于 2024-07-18 16:57:05 发布
最新推荐文章于 2024-07-18 16:57:05 发布
阅读量1.1k 收藏 3
点赞数 2
分类专栏： vue3.0 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yjnain3066/article/details/126090873
版权
本文详细介绍了如何在Vue项目中引入并使用天地图资源包，包括从阿里云下载地图资源，将其放置在项目目录下，然后在页面中引入地图，并创建遮罩层。通过设置Polygon参数实现指定区域的遮罩效果，最终展示了实现后的地图遮罩层视觉效果。
摘要由CSDN通过智能技术生成

关于vue引入天地图在我的上一篇博客有详细的介绍 

天地图添加遮罩层

1.首先下载一个地图资源包（我的话是在阿里云上面下载的）这里注意不要包含子区域

 2.放在你的vue项目上面

 

 3.然后在你的页面上面引入一下

 4.然后创建遮罩层（我这里的Polygon里有两个参数第一个是你需要加上遮罩的，第二个是你不需要遮罩的）

然后向地图里面添加即可

效果：

 

无人与我粥可温
关注
专栏目录
vue项目中使用天地图
DAKADI
08-23 3403
天地图使用示例一、申请key二、代码部分1.静态引入2.创建容器3.创建基础地图4.创建卫星图图层5.创建点位遮盖物6.点位弹窗展示 一、申请key 链接: http://lbs.tianditu.gov.cn/. 登陆网址，注册账号后点击控制台。 创建新应用，并填写好信息，就可以在应用管理表格里看到生成的key。我是pc端项目，应用类型选择了浏览器。 二、代码部分 1.静态引入 在index.html内引入，对应的key修改成自己申请的。 <script type="text/javascr
从零开始的VUE+ArcGIS API for JS项目——底图切换工具（天地图，高德）
最新发布
hfhf45_的博客
08-01 1818
实现自定义底图切换的工具，添加天地图，高德等地图作为底图。
vue 全局透明遮罩层
Zhong_zong_ming的博客
01-08 2114
在Vue中创建一个全局透明遮罩层可以通过几个步骤来实现。这通常涉及到创建一个自定义组件，然后通过全局方法或在根Vue实例中动态创建组件实例来显示遮罩层。以上步骤实现了一个简单的全局遮罩层，你可以根据你的应用需要进行调整和增强（例如，添加动画或更多的自定义事件处理）。
天地图绘制区域图层
MingleHDU的博客
09-21 1409
如何切换不同坐标系的地图源，实现快速绘图呢
vue3 集成天地图，完美实例
cesske的博客
07-18 1430
在Vue 3中，你可以使用天地图JavaScript API进行集成。以下是一个基本的例子，展示了如何在Vue 3组件中集成天地图并添加一个地图实例： 1、首先，确保你已经在你的项目中包含了天地图的JavaScript API。你可以通过以下方式添加： <!-- 在你的index.html或者相应的模板文件中 --> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key"></script>
vue 弹出遮罩层样式实例
10-15
主要介绍了vue 弹出遮罩层样式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
天地图 添加遮罩层效果
m0_64409387的博客
09-04 2429
天地图引入就不写了，这里写引入最基本的地图后，怎样变成遮罩效果1，思路：外部是蓝色遮罩层，中间镂空为新乡市地图。通过天地图demo修改为自己想要的效果。 2，阿里云 下载新乡市四周边界坐标 对数据进行处理，再引入到项目中，public/xinxiangshi.json(数据处理一下) 3，页面引入相对路径 4，使用天地图添加遮罩层的方法输出
教你用vue自定义指令做一个组件的遮罩层loading效果
球球不吃虾WHR2349博客
09-24 3425
时间有限，不上图了。 <div class="w-box-connent" v-whr-loading="isloading"></div> 大概意思就是，有一个div，当isloading==true时候我要给这个div上面蒙上一层遮罩层。 Vue.directive('whr-loading', { bind(el, bindingvnode, vnode) { let divzhezhao = document.createElemen
【VUE】加载提示遮罩
SZnAl的博客
11-17 2327
在向后端请求数据或向后端发送数据时，为防止用户在此期间乱操作，所以在页面添加一个加载提示的遮罩，防止用户乱操作。
vue全局遮罩
seimeii的博客
07-31 1603
vue全局遮罩
openlayers使用Canvas实现行政区划遮罩地图
mapmonster的博客
02-21 3386
有时候我们做GIS开发时需要只显示某个区域的地图，需要把其他地方遮罩住，比如下图这样： 好了，上代码： //添加遮罩 function clipmap(data) { $.getJSON(data, function(data) { var fts = new ol.format.GeoJSON().readFeatures(data); ...
百度地图高亮显示选中的行政区域,其余区域加遮罩
热门推荐
有梦想的咸鱼
09-10 1万+
html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> style type="text/css"> body,
Vuetify + iView + echarts下拉菜单被canvas图表挡住的问题
等时钟成长
11-16 2112
很多时候，一个组件库往往不能满足我们的需求，我们可以同时引入多个组件库，但这样会导致一些“不兼容”的现象出现。 例如，博主在应用中使用 vuetify中的 toolbar 和 iview 的Select 或者 DatePiker 等结合在一起，结果会出现下拉菜单被echarts图表挡住的现象。 图一（没有绘制echarts图表时）： 图二（绘制玩图表再选时间时）： 发现下拉菜单被挡住...
vue实现遮罩层
weixin_42785434的博客
07-07 3021
vue实现遮罩层 div.zzc{ background(0,0,0,0.5) top:0 right:0 left:0 bottom:0 position:fixed padding:100px 0 0 300px }
天地图-第五篇-覆盖物
cherry_vicent的专栏
01-21 2653
天地图-覆盖物
vue2+高德地图加遮罩,一些marker显示在遮罩上，一些在遮罩下
momo_mom177的博客
09-22 1430
// 遮罩的z-index是300,路线是301，marker是302 highLightPoint.initialIndex = highLightPoint.getzIndex(); highLightPoint.setzIndex(302); 项目需求：高德地图上加一个遮罩，画一堆marker，一些marker在遮罩上,一些marker在遮罩下，效果如下图 通过强制修改css样式实现 遮罩放的位置,如上图，找到元素添加遮罩层 const amapLayerDom = docume..
leaflet实现地图遮罩
WhyLearnCode的博客
08-04 1434
leaflet实现地图遮罩：有多个洞，洞中有洞
关于在vue2中使用elementUI加入全屏加载中的遮罩效果
I_Allen_Liu的博客
07-16 429
项目中需要引入elementUI。不多说了直接上代码。
【OpenLayers+vue】加载天地图
Android_wq的博客
11-08 289
el-button type="primary" @click='qhdt(1)'>矢量中文标记矢量英文标记卫星中文标记卫星英文标记
vue 天地图添加航标
07-20
Vue.js 和天地图（Tangram）结合可以创建交互式地图应用，包括添加航标（Marker）。要在 Vue 中添加航标，你需要遵循以下步骤： 1. **安装依赖**: 首先确保已安装 Vue 及其 CLI，然后安装天地图相关的库，如 `vue-tangram` 或 `@tangrams/vue`。 ```bash npm install vue-tangram @tangrams/api --save ``` 2. **设置组件**: 创建一个新的 Vue 组件，并引入天地图所需的 API。例如，创建一个名为 `MapMarker.vue` 的文件: ```html <template> <div ref="map" :style="{ width: '100%', height: '500px' }"></div> </template> <script> import { Map, Marker } from '@tangrams/api'; export default { data() { return { map: null, position: [39.9138, 116.407], // 北京经纬度示例 }; }, mounted() { this.initMap(); }, methods: { initMap() { const map = new Map(this.$refs.map, { center: this.position, zoom: 13, // 初始缩放级别 }); // 添加航标 const marker = new Marker({ latitude: this.position, longitude: this.position, anchor: ['bottom', 'center'], }); map.addLayer(marker); this.map = map; }, }, }; </script> ``` 3. **在父组件中使用**: 将这个组件引入到需要显示地图的地方，并传递经纬度数据。 ```html <template> <div> <MapMarker :position="地标位置" /> </div> </template> <script> import MapMarker from './MapMarker.vue'; export default { components: { MapMarker, }, data() { return { 地标位置: [39.9138, 116.407], // 替换为你想要添加航标的实际经纬度 }; }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

无人与我粥可温

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值