百度地图、天地图等地图类隐藏关注的区域外地图

最新推荐文章于 2024-02-23 10:37:22 发布
最新推荐文章于 2024-02-23 10:37:22 发布
阅读量558 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011964241/article/details/132496745
版权

最近收到需求，要在地图上画出一块区域来，其他区域隐藏掉，天地图有添加带洞多边形的操作。效果如下，实现原理是把左上至右下全部遮挡，中间区域挖空。我想到了另一种方法，既然地图是img拼成的，那把我需要的地方绘制出来，然后把地图的img标签设置为visibility:hidden就搞定。这样整个地图就变成了一个svg，使用地图的api随便在上面添加覆盖物吧。有时候官网推荐的做法不一定优雅。

效果如下。

隐藏前：

 

 

隐藏后：

 

 

aghh
关注
【Leaflet + 天地图】通过经纬度、角度方向、距离（米）计算偏移后的经纬度
前端知识分享喵
08-14 2186
通过经纬度、角度方向、距离（米）计算偏移后的经纬度
天地图 添加遮罩层效果
m0_64409387的博客
09-04 2547
天地图引入就不写了，这里写引入最基本的地图后，怎样变成遮罩效果1，思路：外部是蓝色遮罩层，中间镂空为新乡市地图。通过天地图demo修改为自己想要的效果。 2，阿里云 下载新乡市四周边界坐标 对数据进行处理，再引入到项目中，public/xinxiangshi.json(数据处理一下) 3，页面引入相对路径 4，使用天地图添加遮罩层的方法输出
百度地图高亮显示选中的行政区域,其余区域加遮罩
有梦想的咸鱼
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,
百度地图隐藏无关区域
10-11
让百度地图只显示你想要的行政区，而将无关的区域进行隐藏。这样会让界面简介许多。echrts虽然也能做，但是百度已经不提供相关的数据下载了，同时echarts不能提供许多百度地图的特性。
百度地图api(javascript)只显示某一行政区域的地图，其他周边地区的都不显示
Half of if的博客
08-22 1万+
var map = new BMap.Map("map_container"); var cityName = '浙江省'; map.centerAndZoom(cityName, 8); // 初始化地图,设置中心点坐标和地图级别。 map.addControl(new BMap.ScaleControl()); ...
高德地图隐藏区域外的地图
weixin_46031207的博客
08-02 546
至此，地图外部的区域就隐藏完成了！在list数组中存放地图的边界，
百度地图BMapGL通过geojson数据画镇级别区域图，并掩膜其他区域不展示
weixin_40935738的博客
01-03 1578
/ 开启鼠标滚轮缩放。
天地图隐藏天地图版权信息
qq_35177516的博客
03-14 721
Chrome F11选择版权部分，找到class名为tdt-control-copyright的div,对该div做隐藏操作 hiddenCopyRight() function hiddenCopyRight(){ $(".tdt-control-copyright").hide(); }
百度3D地图开发，自定义marker标注物，地图样式、区域掩摸、行政区划、闪烁图标
无极低码
02-04 2961
百度3D地图开发，自定义marker标注物，地图样式、区域掩摸、行政区划、闪烁图标
百度地图--获取自定义区域JSON数据（上）
cc_百川
10-22 8197
基于百度地图的自定义区域绘图–调用地图 注册百度地图的SDK： 这一步是调用百度地图的核心，通过获取SDK才能进行相关操作。 使用百度地图： 在html中引入js文件： <script src="http://api.map.baidu.com/api?v=1.2&ak=kDfrUwYGgSaUbDLwKGXBwlaseKZbI7I9" type=&amp
vue百度地图只显示某个省或市的地图，其余部分都不显示
热门推荐
iorn_mangg的博客
08-27 1万+
通过这个博主的博客https://www.cnblogs.com/zhengxiaoqing/p/5038241.html，了解到怎么实现这个效果。 安装好vue-baidu-map后，methods，添加如下方法，并且在mounted中调用该方法 baiduMap() { var map = new BMap.Map("xjMap"); var cityName = '阿克陶县';...
天地图（卫星地图）可指定某一区域，进行图片覆盖物，另做多点覆盖物定位，点击触发弹框事件
qq_40295815的博客
01-13 4357
<divclass="bg"v-if="panelShow"> 弹框，切记隐藏显示div v-if要比v-show好控制，特别是你弹框内想放echarts的时候，就会发现v-show会不能让echarts自适应div大小。 <divclass="point"> ...
openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图
最新发布
qq_36287830的博客
02-23 1692
openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图。
高德地图 只显示某个地区或省份，并设定显示范围
m0_58293192的博客
12-08 1万+
高德地图 只显示某个地区或省份，并设定显示范围
天地图绘制区域图层
MingleHDU的博客
09-21 1526
如何切换不同坐标系的地图源，实现快速绘图呢
隐藏在线地图的放大缩小水印等其他自带的图标，使之成为纯净版的地图。
GiScript的博客
01-27 970
我想把在线地图上的一些无用的图标给隐藏掉，让这个地图非常纯净，摸索了一个小方法。 首先你把地图在firefox浏览器中打开。 然后选中你想要隐去的图标等元素。例如想去掉+-放大缩小号： 选中，点击“右键”，选择  “使用Firebug查看元素”，可见这个div的id。 然后利用这个div的id给它设置为不显示即可。 JavaSc
OpenLayers 6实现底图裁剪效果,只显示指定城市或区域范围内的地图
liu2004051957的博客
11-22 2808
本源代码基于OpenLayers 6开发库实现底图的区域裁剪显示效果，比如只显示某城市或指定边界范围内的地图。
调用地图JS/API只显示一个省
yucheng_1995的博客
05-13 5683
辽宁省地图样式 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0"> <meta http-equiv="Content-Type...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值