高德api覆盖区域由层级控制显示和隐藏

这个是一个区域化的从外面请求的json然后在给到高德

先看一下外部的JSON

[{"name": "11","areas": [[121.296733,31.190657],[121.297184,31.191244],[121.297892,31.191648],[121.298342,31.192015]]

开始请求了

  var allBankuai1var polygons1// $(document).ready(function () {function xianshioryicang(num){console.log(num)// 绘制板块$.ajax({url: ctx + '/map/demonstration/json/jinbohui.json',async: false,success: function (data) {polygons1 = outPolygon1(data);allBankuai1 = new AMap.OverlayGroup(polygons1);if(num){// allBankuai1.hide()map.remove(allBankuai1);allBankuai1.hide()return}else{// 创建小区覆盖物群组allBankuai1 = new AMap.OverlayGroup(polygons1);}}});}

上面有num 下面会有讲解

  // 创建外层不规则图形var polygons1 = [];var polygon1function outPolygon1(areaDatas,num) {console.log(num)// let polygons1 = [];for (let i = 0; i < areaDatas.length; i++) {let areaData = areaDatas[i];let name = areaData.name;let areas = areaData.areas;let strokeColor = '#00B6DA';let fillColor = '#00A2E8';polygon1 = new AMap.Polygon({path: areas,fillColor: fillColor, // 多边形填充颜色//这个是不规则的区域的fillOpacity: 0,  // 填充透明度borderWeight: 2, // 线条宽度，默认为 1strokeWeight: 3, // 轮廓线宽度strokeColor: strokeColor, // 轮廓线条颜色bubble: true});polygons1.push(polygon1);}return polygons1;}

开始获取地图的层级代码

 //获取 当前的  地图的 放大的层级function logMapinfo1() {let zoom = map.getZoom(); //获取当前地图级别// if (document.body.clientWidth > 2800 ? zoom >= 17 : zoom > 15) {if (zoom >= 17) {map.add(marker1)} else {map.remove(marker1)}console.log(zoom)//1 显示   0隐藏if (zoom < 16.9) {dianji1()}else{
//此时的num 是  truedianji(true)}}
//注意这个 必须有这个map.on('zoomend', logMapinfo1);

上面的两个函数 dianji()和dianji1() 这里的dd是 true 传过来了

function dianji(dd){console.log("hide")xianshioryicang(dd)// allBankuai1.hide()// map.remove(allBankuai1);// allBankuai1.close(dd);console.log(map.remove)}function dianji1(){xianshioryicang()// allBankuai1.show()map.add(allBankuai1);console.log("show")}

消失的关键是根据dianji里面的true 来控制的

  polygons1 = outPolygon1(data);
//先是有这个 然后在消失allBankuai1 = new AMap.OverlayGroup(polygons1);if(num){// allBankuai1.hide()map.remove(allBankuai1);allBankuai1.hide()return}else{// 创建小区覆盖物群组 这是显示allBankuai1 = new AMap.OverlayGroup(polygons1);}

以上就是全部的代码了希望我过段时间还能记得

高德api覆盖区域由层级控制显示和隐藏相关推荐

react实现div隐藏_react如何控制显示与隐藏
react控制显示与隐藏的方法:1.通过state变量来控制是否渲染元素:2.通过style控制display属性:3.通过动态切换className. 本教程操作环境:windows7系统.Reac ...
div控制显示与隐藏状态的两种方式
要点: 1.本人原来用的是IDEA编译器,因为什么环境都配置好了,代码提示功能也好,界面也优美,可惜什么都好导致太庞大.本人在自习室敲代码,笔记本电池管不了一上午,后用sublime,真轻便哈哈.但是 ...
AntV G6流程图节点控制显示和隐藏
1.点击隐藏,控制隐藏节点4以及相关的边 2.点击显示,显示节点4以及相关的边 3.点击添加颜色,给指定节点4添加颜色 demo如下: <!DOCTYPE html> <html&g ...
设置input隐藏并用js控制显示和隐藏
style="visibility:hidden": 使对象在网页上隐藏,但该对象在网页上所占的空间没有改变. style="display:none": 使对 ...
elementUI popover弹框条件控制显示和隐藏
<el-popovertrigger="click":content="showPoptip":popper-class="showPoptip ...
vue 电梯导航制作（鼠标滚动控制导航栏的显示与隐藏）
鼠标滚动控制导航栏的显示与隐藏上图先看效果: 下面为2张图,默认为导航栏,当鼠标向下滚动一定距离时,变为箭头, 并且点击黄色的返回图标,也变为下方箭头,此时再滚动窗口,不会变为导航栏. 点击下方箭头 ...
微信小程序控制盒子显示隐藏_微信小程序点击控制元素的显示与隐藏
微信小程序点击控制元素的显示与隐藏首先我们先来看一下单个点击效果我们来看一下wxml中的代码: 更多内容更多> 2017-07-27 下面的是js中的主要代码: data: { shows ...
Android监听系统输入法键盘弹出显示与隐藏事件
Android监听系统输入法键盘弹出显示与隐藏事件有时候需要监听Android系统输入法的弹出显示事件,比如:微信聊天时,不管你当前在聊天中的什么位置(上滑查看消息历史),每当你点击输入框时,都会自 ...
easyui中datagrid表格如何正确显示和隐藏
最近遇到了一个问题,是关于easyui数据表格的显示和隐藏的,一般显示元素可以通过dispaly:block(或show())和display:none (hide())控制显示隐藏的但是这个eas ...

高德api覆盖区域由层级控制显示和隐藏

高德api覆盖区域由层级控制显示和隐藏相关推荐

最新文章

热门文章