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

先看效果图：

引入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个经纬度按顺序链接成一个图形，再设置图形的高度就完成了

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

vue使用百度地图获取位置信息
vue使用百度地图获取位置信息最近再做H5页面,就一个单页面,进来的时候,要获取地理位置,上代码 1.使用srcipt不受同源策略的影响,来获取百度api 写在了一个bmap.js里面,onBMap ...
vue整合百度地图（关键字检索）
百度地图文章目录百度地图一.申请百度地图的密钥二.官方示例三.使用vue整合百度地图步骤说明 3.1 效果图: 3.2 方式一 vue脚手架2.0版本引用(不推荐): 3.3 方式二封装成 ...
Vue+Echarts+百度地图小例子
刚学完Echarts后,看到一些官方例子,粘贴代码下来却实现不了相应的效果,经过一番了解,发现还要引入百度地图,记录详细过程如下. 1.安装echarts(使用3.x,4.x) npm install ...
vue自定义百度地图弹窗
vue自定义百度地图弹窗 1.全局注册方式 1.1 引入百度地图和百度地图自定义弹窗js(自己去百度api里面下载就可以了) <!DOCTYPE html> <html lang=& ...
VUE使用百度地图插件
VUE使用百度地图插件实现功能百度地图的使用相关代码片段实现功能需求: 使用百度地图插件, 实现手动定位, 获取经纬度地址; 设置经纬度定位; 地址搜索百度地图的使用参考 Vue Bai ...
Vue+Echarts+百度地图API
Vue+Echarts+百度地图API 不容易啊,又注册了一个地图账户使用npm安装方式去百度地图官网申请key,也就是地图API密钥AK 在vue项目的public文件夹中的index.html ...
百度地图3D地球闪动点(修复不在视野内时无法隐藏marker的bug)
一.效果图二.详解本质上为自定义Marker,使用css来做动画特效有关通用模式相关操作,请看<百度地图3D地球接入> 1. 自定义CSS样式 ComplexCustomOverla ...
解决Vue引入百度地图JSSDK：BMap is undefined 问题
原文链接:解决Vue引入百度地图JSSDK:BMap is undefined 问题百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入异步加载但vue项目中仅某一两个 ...
vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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