vue html 百度地图3D楼 建筑物上颜色 修改颜色

1 篇文章 0 订阅
1 篇文章 0 订阅

先看效果图:
在这里插入图片描述
引入GL版

<script src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></script>
<script src="https://mapv.baidu.com/build/mapv.min.js"></script>		
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.159/dist/mapvgl.min.js"></script>

JS部分:

// 1. 创建地图实例
			var bmapgl = new BMapGL.Map('map_container');
			var point = new BMapGL.Point(101.756895,36.682754);
			bmapgl.centerAndZoom(point, 18);
			bmapgl.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			// 设置3D视角
			bmapgl.setHeading(12); //设置地图的旋转角度
			bmapgl.setTilt(55); //设置地图的倾斜角度
			// 2. 创建MapVGL图层管理器
			var view = new mapvgl.View({
				map: bmapgl
			});

			// 3. 创建可视化图层,并添加到图层管理器中
			var layer = new mapvgl.PointLayer({
				color: 'rgba(50, 50, 200, 1)',
				blend: 'lighter',
				size: 2
			});
			view.addLayer(layer);	
			
			var layer = new mapvgl.ShapeLayer({
				color: 'rgba(247,66,61, 1)',
				data: [{
					geometry: {
						type: 'Polygon',
						coordinates: [
							[
								[101.756464,36.682498],
								[101.756451,36.681676],
								[101.756841,36.681658],
								[101.756832,36.681749],
								[101.756554,36.681763],
								[101.756567,36.68249]
								
							]
						]
					},
					properties: {
						height: 40, // 多边形高度
					}
				}]
			})
			var layer2 = new mapvgl.ShapeLayer({
				color: 'rgba(250,189,35, 1)',
				data: [{
					geometry: {
						type: 'Polygon',
						coordinates: [
							[
							    [101.759972,36.683583],
								[101.760197,36.683586],
								[101.760201,36.68355],
								[101.760394,36.683561],
								[101.760403,36.683583],
								[101.760551,36.683579],
								[101.760547,36.683398],
								[101.760372,36.683391],
								[101.760367,36.683435],
								[101.760188,36.683435],
								[101.760179,36.683388],
								[101.759967,36.683391]
							]
						]
					},
					properties: {
						height: 30, // 多边形高度
					}
				}]
			})
			
			view.addLayer(layer);
			view.addLayer(layer2);

用mapvgl.ShapeLayer给3D楼上颜色,实际上就是创建一个3D物体 覆盖原来的物体
coordinates参数为多边形物体的经纬度,比如:在这里插入图片描述
这个建筑,在这里插入图片描述
6个经纬度 按顺序 链接成一个图形,再设置图形的高度 就完成了

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值