百度地图图层

最新推荐文章于 2024-05-08 23:55:34 发布

DZjiuling

最新推荐文章于 2024-05-08 23:55:34 发布

阅读量2.2k

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/weixin_43974540/article/details/117561553

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度地图

图层

图层

在添加图层之前，需要先初始化图层管理器，从而将图层添加到图层管理器中
初始化MapVGL容器对象，用来管理各可视化图层对象。

var view = new mapvgl.View({
        //图像后处理效果对象数组
        effects: [//发光效果
            new mapvgl.BrightEffect({//发光后处理特效，也可以用作炫光效果
                threshold: 0,//0-1.0 值越低，亮部越多
                blurSize: 2,//炫光模糊值，默认2，是原图形半径的2倍
                clarity: 0.4
            }),
            // new mapvgl.BloomEffect({
            //     threshold: 0.8,
            //     blurSize: 3.0
            // }),
        ],
        map: map,
        //mapType:'bmap'//错误
    });

图层管理器view的options参数：

map：地图对象
mapType ：默认为3D地图，string类型，可选值：bmap(2D地图)、blank(空白地图)
effects：图像后处理效果对象数组

图层管理器view的方法：

addLayer、removeLayer、hideLayer、showLayer 使用方法：addLayer(图层对象)
removeAllLayers、getAllLayers、getAllThreeLayers 使用方法：getAllThreeLayers()
show() hide() 显示/隐藏当前图层管理器及所含图层

线轨迹图层 LineTripLayer 基础线图层SimpleLineLayer

配置项options如下：

autoSelect: false
color: 颜色，同css颜色
enablePicked: false
polygonOffset: (2) [2, 1]
repeat: false
selectedColor: “rgba(20, 20, 200, 1.0)”
selectedIndex: -1
step: 执行每次动画的步长，默认值0.1
trailLength:动画的拖尾时长，默认值 3
zIndex: 0
startTime: 动画开始时间，默认值0
endTime: 动画结束时间，默认值data的长度
data格式：

[{
    geometry: {
        type: 'LineString',
        coordinates: [
            [116.394191, 39.91334],
            [116.417259, 39.913672]
        ]
    }
}]

LineTripLayer中的数据的坐标，需要对经纬度进行处理（FlyLineLayer无需处理，直接使用经纬度），如：

lastCity=mapv.utilCityCenter.getCenterByCityName(n);
endPoint=map.lnglatToMercator(lastCity.lng,lastCity.lat);

添加线轨迹图层（实现飞行的动画效果）使用方式：

let allCity=['福州','厦门','宁德','三明','龙岩','南平','漳州','泉州','莆田',];
    let lastCityArr=allCity;
    allCity.forEach(city=>{
        let firstCity=mapv.utilCityCenter.getCenterByCityName(city);
        let startPoint= map.lnglatToMercator(firstCity.lng, firstCity.lat);
        lastCityArr=lastCityArr.filter(n=>n!=city);
        lastCityArr.forEach(n=>{
            let lastOne= mapv.utilCityCenter.getCenterByCityName(n);
            let endPoint= map.lnglatToMercator(lastOne.lng, lastOne.lat);
            curve.setOptions({
                    start: [startPoint[0], startPoint[1]],
                    end: [endPoint[0], endPoint[1]]
                });
            let curveModelData=curve.getPoints(150);
            data.push({
                geometry: {
                        type: 'LineString',
                        coordinates: curveModelData
                },
                properties: {
                        count: 20
                }
            });
        })
    })
    //动画效果
    var lineLayer = new mapvgl.LineTripLayer({
        color: 'rgb(255, 255, 204)', // 飞线动画颜色 默认值’rgba(255, 5, 5, 1)’
        step: 1,//执行每次动画的步长 默认值0.1
        trailLength:5,//飞行线条 动画的拖尾时长 默认值：3

    });
    view.addLayer(lineLayer);
    lineLayer.setData(data)

为使得飞行的效果更佳，借助基础线图层SimpleLineLayer（实现飞行的路线效果）
SimpleLineLayer主要配置项options：

color ：颜色，同css颜色，默认值’rgba(25, 25, 250, 1)’
blend：线叠加模型，可选值’lighter’
基础线图层SimpleLineLayer使用方式：

var lineLayer = new mapvgl.SimpleLineLayer({
        blend:'lighter',// 'lighter',//线叠加模型 
        color: 'rgb(255, 153, 0, 0.6)' // 飞线颜色(不为动画)
    });
    view.addLayer(lineLayer);
    lineLayer.setData(data);

同时借助图层的effect属性，进行发光特效处理

var view = new mapvgl.View({
        //图像后处理效果对象数组
        effects: [//发光效果
            new mapvgl.BrightEffect({//发光后处理特效，也可以用作炫光效果
                threshold: 0,//0-1.0 值越低，亮部越多
                blurSize: 2,//炫光模糊值，默认2，是原图形半径的2倍
                clarity: 0.4
        map: map,

最终使用效果图：
线轨迹效果

飞线图层 FlyLineLayer

配置项options如下：

color: 底线颜色，同css颜色
step: 飞线动画的步长，步长越大动画速度越快，默认值0.1
textureColor: 飞线动画颜色，同css颜色
textureLength: 飞线动画的长度，占整条线的百分比，取值0-100,默认值30
textureWidth: 飞线动画的宽度，默认值5
zIndex: 0
zoomThreshold: (2) [0, 30]
taticDashArray: 2
time: 0
style: 飞线动画方式默认值‘noemal’ （飞线动画速度均匀）其余可选值：‘chaos’（不均匀）
data格式：

data: [{
geometry: {
type: ‘LineString’,
coordinates: [
[116.394191, 39.91334],
[116.417259, 39.913672]
]
}
}]

使用方式（data使用贝塞尔函数）：

let allCity=['福州','厦门','宁德','三明','龙岩','南平','漳州','泉州','莆田',];
    let lastCityArr=allCity;
    allCity.forEach(city=>{
        let firstCity=mapv.utilCityCenter.getCenterByCityName(city);//飞线直接使用经纬度
        lastCityArr=lastCityArr.filter(n=>n!=city);
        lastCityArr.forEach(n=>{
            let lastCity=mapv.utilCityCenter.getCenterByCityName(n);
            curve.setOptions({
                start:[firstCity.lng, firstCity.lat],
                end: [lastCity.lng, lastCity.lat]
            });
            data.push({
                geometry:{
                    type:'LineString',
                    coordinates:curve.getPoints(),
                },
                properties:{
                    count:Math.random()
                }
            })
        })
    })
    var flylineLayer = new mapvgl.FlyLineLayer({
        style: 'chaos',//normal，默认值，飞线动画速度均匀 ,chaos，飞线动画速度不均匀
        step: 0.3,//飞线动画的步长，步长越大动画速度越快
        color: 'rgb(255, 153, 0, 0.6)',//'rgba(33, 242,
        textureColor:'rgb(255, 255, 204)',//默认
        textureWidth: 15,//飞行动画宽度 默认值5
        textureLength: 30,//飞行动画长度 占整条线的百分比，取值0-100 默认30
    });
    view.addLayer(flylineLayer);
    flylineLayer.setData(data);

效果图：飞线效果图

基础面图层 ShapeLayer

配置项options如下：

autoSelect: 鼠标覆盖即为选中，默认是false
color: 柱状图颜色同css，默认值"rgba(50, 50, 230, 1.0)"
depthTest: true
enablePicked: 是否可以拾取默认值false
height: 建筑物高度，默认值0
texture:纹理路径（宽高必须为2的次幂），如 ‘./images/textures/wall2.png’,
isTextureFull: false
opacity:透明度。范围：0-1 默认值 0.8
polygonOffset: (2) [0, 0]
repeat: false
riseTime: 楼块初始化升起动画的时间，单位毫秒，默认值0
selectedColor:建筑物选中颜色，默认值 “rgba(20, 20, 200, 1.0)”
selectedIndex: 选中项 -1
textureRotate: 0
textureScale: 纹理缩放 1
topColor: 建筑物顶部颜色"rgba(76, 76, 76, 0.8)"
useLight: true
zIndex: 0
zoomThreshold: (2) [0, 30]
style：特效，normal（默认），window（窗户效果），windowAnimation（窗户动画效果），gradual（渐变效果），ripple（点波纹效果）

注意：若style:‘ripple’，则还需添加rippleLayer：点波纹对象采用点波纹特效时，通过不配置点波纹的opacity，实现原始点波纹隐藏效果），如

shaperLayer = new mapvgl.ShapeLayer({
                    style: 'ripple',//特效窗户特效（无纹理时）：window、windowAnimation
                    rippleLayer: rippleLayer,//动态光圈效果
                    isTextureFull: true,
                    texture: './images/textures/wall2.png',
                    textureScale: 0.05,
                    topColor: 'rgba(39, 50, 85, 1.0)',//建筑物顶部颜色
                    opacity: 1.0,
                    
                });

问题：点波纹特效时，只显示数组[0]的波纹点

渲染无纹理建筑物，且添加选中效果，使用方式：

shaperLayer = new mapvgl.ShapeLayer({
                    style: 'windowAnimation',//'ripple',//特效窗户特效（无纹理时）：window、windowAnimation
                    //rippleLayer: rippleLayer,//动态光圈效果
                    isTextureFull: true,
                    // texture: './images/textures/wall2.png',
                    // textureScale: 0.05,
                    topColor: 'rgba(39, 50, 85, 1.0)',//建筑物顶部颜色
                    opacity: 1.0,
                    // opacity:0.5,// 1.0,
                    color: 'rgba(39, 50, 85, 0.9)', // 柱状图颜色
                    enablePicked: true, // 是否可以拾取
                    autoSelect:true,
                    selectedIndex: -1, // 选中项
                    selectedColor: 'rgb(255, 153, 0, 0.6)', // 选中项颜色
                    onClick:(e)=>{
                        console.log('楼',e)
                    }
                });
                view.addLayer(shaperLayer);
                shaperLayer.setData(polygons);

效果图：
建筑物选中效果

data的数据格式

data: [{
geometry: {
type: ‘Polygon’,
coordinates: [
[
[116.392394, 39.910683],
[116.405976, 39.927727],
[116.420996, 39.910351]
]
]
},

Threejs图层 ThreeLayer

需要额外引入

<script src="https://unpkg.com/mapvgl/dist/mapvgl.threelayers.min.js"></script>
or
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.124/dist/mapvgl.threelayers.min.js"></script>

若需要使用threejs中的加载器等，则只需在var THREE = mapvgl.THREE;后再进行引入。
方法：

add(obj, point) 向ThreeLayer图层中传递Threejs对象，第一个参数为Threejs对象，第二个为坐标，非必传
remove(obj) 移除ThreeLayer中的Threejs对象。

地图中的坐标采用经纬度，因此添加模型时（添加模型方法同threejs），需要对模型坐标进行转换，如

let modelpoint=new BMapGL.Point(data.geometry.coordinates[0],data.geometry.coordinates[1]);
let modelPos=mapvgl.MercatorProjection.convertLL2MC(modelpoint);

波纹点 RippleLayer

波纹点2D效果 RippleLayer

默认配置项options如下：

autoSelect: false
blend: “normal”
color: 颜色，同css颜色，默认值’rgba(25, 25, 250, 1)’
duration:动画循环一次的时间，时间越短，动画速度越快，默认值 2
enablePicked: false
repeat: false
selectedColor: “rgba(20, 20, 200, 1.0)”
selectedIndex: -1
size: 点大小，默认20
unit: size属性的单位，默认值"px" 其余可选值“m”
zIndex: 0

data的数据格式

[{
geometry: {
type: ‘Point’,
coordinates: [116.403748, 39.915055]
}
}]

使用方式：

rippleData.push({
            geometry: {
                type: 'Point', 
                coordinates: [pos.lng, pos.lat],
                cityName:city
            }
        });
//波纹点 2D效果
    var rippleLayer = new mapvgl.RippleLayer({
        size: 50,
        unit: 'px',//size属性的单位  px，默认值，按像素，圆半径大小不随地图级别变化 m，按地理尺度，即单位为“米”，圆半径大小跟随地图级别缩放
        color: 'rgb(255, 153, 0, 0.6)',
        enablePicked: true,
        onClick: (e) => { // 点击事件
            console.log('波纹点',e);
            if(e.dataIndex!=-1){
                //map.centerAndZoom('福州市', 9);
                map.centerAndZoom(new BMapGL.Point(e.dataItem.geometry.coordinates[0],e.dataItem.geometry.coordinates[1]), 13);
            }else{
                map.centerAndZoom('福州市', 9);
            }   
        },
    });
    view.addLayer(rippleLayer);
    rippleLayer.setData(rippleData);

点波纹选中，返回的数据，如
选中点波纹返回数据
可实现效果图：
波纹点效果

波纹点3D效果 GroundRippleLayer

无文档，可能理解存在错误
默认配置项options如下：

autoSelect: false
color: 同css颜色值
enablePicked: false
repeat: false
scale: 2 动态放大的大小
segs: 32 数值越大越圆滑
selectedColor: “rgba(20, 20, 200, 1.0)”
selectedIndex: -1
size: 5 点大小
step: 0.1 值越大动态放大的速度越快
unit: “m”
zIndex: 0
zoomThreshold: (2) [0, 30]

data的数据格式，同RippleLayer

[{
geometry: {
type: ‘Point’,
coordinates: [116.403748, 39.915055]
}
}]

使用方式：

//波纹点  3D效果 
        var rippleLayer = new mapvgl.GroundRippleLayer({
            size: 20,//20 点大小 
            unit:'m',//size属性的单位  px，默认值，按像素，圆半径大小不随地图级别变化  m，按地理尺度，即单位为“米”，圆半径大小跟随地图级别缩放
            //opacity: 0.2,//全透则无法点选  添加opacity属性 则只显示数组[0]的波纹点 shaper特效
            segs: 100,//数值越大 越圆滑
            scale: 3,//10 动态放大的大小
            step: 0.1,
            color: 'rgb(255, 255, 255, 0.1)',
            //color: [245 / 255, 35 / 255, 35 / 255, 0.2], //含义？
            //repeat:true,
            enablePicked: true,
            onClick: (e) => { // 点击事件  问题：dataitem为undefined
                console.log('波纹点',e);
                if(e.dataIndex!=-1){
                    console.log("选中",e);
                }
            },
        })
        var data=[
            {geometry: {type: 'Point', coordinates: [point.lng, point.lat],testName:"测试111111"}},//
            {geometry: { type: 'Point', coordinates: [119.29, 26.08225],testName:"测试222222" }},//
        ];
        view.addLayer(rippleLayer);
        
        rippleLayer.setData(data);

DZjiuling

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
百度地图图层

百度地图图层线轨迹图层 LineTripLayer 基础线图层SimpleLineLayer飞线图层 FlyLineLayer基础面图层 ShapeLayerThreejs图层 ThreeLayer波纹点 RippleLayer波纹点2D效果 RippleLayer波纹点3D效果 GroundRippleLayer图层在添加图层之前，需要先初始化图层管理器，从而将图层添加到图层管理器中初始化MapVGL容器对象，用来管理各可视化图层对象。var view = new mapvgl.View({
复制链接

扫一扫