百度地图动态矢量圆 BMap Circle

程序员的升级学习之路

于 2022-08-16 16:15:43 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_35570179/article/details/126368479

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

        PAGE.markerArr = [];
        // 调用该方法后创建标注
		function addMapDeviceMarker (deviceObj) {
			// 创建地图点
			var pt = new BMap.Point(deviceObj.longitude, deviceObj.latitude);
			// 创建自定义图标对象
			let imgUrl = './lib/warning/'+ deviceObj.a5+ '-' +deviceObj.a6+'.png';
			var myIcon = new BMap.Icon(imgUrl, new BMap.Size(43, 55));
			myIcon.setImageSize(new BMap.Size(35,35))   //设置图片大小
			let markerNew = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			//let markerNew = new BMap.Marker(pt);  // 创建标注
			markerNew.addEventListener("click", function (e) {
				if(PAGE.markerPresent != null){
					if(markerNew.gd.childNodes.length == 2){
						deleteScopeOneID();
						return;
					}
					deleteScopeOneID();
				}
				if(PAGE.markerPresent == null){
					PAGE.markerPresent = markerNew;
					createCircle(deviceObj);
                    let divElement3 = document.createElement('div');
					//divElement3.className = 'scopeOne';
					divElement3.id = "scopeOneID";
					markerNew.gd.appendChild(divElement3);
				}
			});
			PAGE.bmap.addOverlay(markerNew);
			PAGE.markerArr.push(markerNew);
			CheckImgExists(imgUrl,markerNew,deviceObj.a6);//判断图片404
		}
        //删除动态圆
		function deleteScopeOneID(){
			PAGE.markerPresent = null;
			var divScope=document.getElementById("scopeOneID")
			if(divScope){
				divScope.parentNode.removeChild(divScope);
			}
			clearTimeout(PAGE.circleInterval);
			PAGE.circleArr = [];
			PAGE.bmap.removeOverlay(PAGE.circlePresent);
			PAGE.circlePresent = null;
			$("#page_warning_info").gis_hide();
		}
        //创建动态范围圆
		function createCircle(deviceObj){
			for(i=1;i<11;i++){
				var circleA = new BMap.Circle(new BMap.Point(deviceObj.longitude, deviceObj.latitude), deviceObj.range * 100 * i, {
					strokeColor: '#f5f10963',
					fillColor: '#f5f10963',
					strokeWeight: 2,
					strokeOpacity: 0.5
				});
				PAGE.circleArr.push(circleA);
			}
			//定时器
			sleepDelCricle(0);
			PAGE.circleInterval = setInterval("addNewCircle()", 1500);
			
		}
        //定时器方法，轮询创建动态源
		function addNewCircle(){
			sleepDelCricle(0);
		}

		function sleepDelCricle(sum) {
			let circle = PAGE.circleArr[sum];
			PAGE.bmap.addOverlay(circle);
			sum++;
			setTimeout(function(){
				PAGE.bmap.removeOverlay(circle);
				if(sum < 10){
					sleepDelCricle(sum);
				}
			}, 80);
		}

思路逻辑，

一、通过Bmap API创建矢量圆，添加背景 ew BMap.Circle new BMap.Point
二、创建十个不同大小同心圆，放入数组中存储

三、通过定时器轮询按顺序显示十个不同的圆。（不能直接用for循环，因为js代码顺序异步显示问题达不到效果。）

矢量图圆半径单位是米（m）