百度地图可视化开发

百度地图可视化开发

提示：记录百度地图可视化开发一些坑以及经验

先上成品效果

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、先上成品效果

示例：产品需求是根据对讲机GPS实时数据拿到坐标，后台返回的坐标实现人员实时定位，还有人员当天轨迹动画等效果。

二、关于GPS转百度坐标

1.一些坑

代码如下（这是百度提供的api）：

var markergg = new BMap.Marker(ggPoint);
    bm.addOverlay(markergg);//添加GPS marker
    var labelgg = new BMap.Label("未转换的GPS坐标（错误）",{offset:new BMap.Size(20,-10)});
    markergg.setLabel(labelgg);//添加GPS label//坐标转换完之后的回调函数
    translateCallback =function(data){if(data.status ===0){
        var marker = new BMap.Marker(data.points[0]);
        bm.addOverlay(marker);
        var label = new BMap.Label("转换后的百度坐标（正确）",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label);//添加百度label
        bm.setCenter(data.points[0]);}}

缺点，就是百度提供的api每次只能转换10个，转换起来麻烦，所以自己就写了一个转换的api

exportfunctionbd09togcj02(lon, lat){const x = lon -0.0065const y = lat -0.006const z = Math.sqrt(x * x + y * y)-0.00002* Math.sin(y * xPI)const theta = Math.atan2(y, x)-0.000003* Math.cos(x * xPI)return[z * Math.cos(theta), z * Math.sin(theta)]}

这是我自己写的GPS转换百度坐标，不受限制一次性全部转换。

2.转换完了坐标当然是按照需求对地图进行标点

这里选用的是IconLayer组件，用的是ui提供的自定义图标
代码如下（示例）：

data.push({
            geometry:{
                type:'Point',
                coordinates:[坐标lat,lng]},// properties: {//     icon: markers[Math.floor(Math.random() * markers.length)]// }});}

var view = new mapvgl.View({
        map: map
    });

    var layer = new mapvgl.IconLayer({
        width:100/4,
        height:153/4,
        offset:[0,-153/8],
        opacity:0.8,
        icon:'images/marker.png',
        enablePicked: true,// 是否可以拾取
        selectedIndex:-1,// 选中项
        selectedColor:'#ff0000',// 选中项颜色
        autoSelect: true,// 根据鼠标位置来自动设置选中项
        onClick:(e)=>{// 点击事件
            console.log('click', e);},
        onDblClick: e =>{
            console.log('double click', e);},
        onRightClick: e =>{
            console.log('right click', e);}});
    view.addLayer(layer);
    layer.setData(data);

这样坐标标点就完成了，记住一定要创建图层，可以使用this.图层来管理。

接下来就是点击标注获取后台接口人员轨迹了

var lineLayer =newmapvgl.LineLayer({width:10,color:'rgba(55, 71, 226, 0.9)',style:'road',enablePicked:true,onClick:e=>{
            console.log(e);}});
    view.addLayer(lineLayer);
    lineLayer.setData(data);var carlineLayer =newmapvgl.CarLineLayer({url:'model/car.gltf',autoPlay:true,scale:200,});

    view.addLayer(carlineLayer);
    carlineLayer.setData(data);

    map.setDefaultCursor('default');var coordinates = data[0].geometry.coordinates;var point =[];for(var i =0; i < coordinates.length; i +=5){
        point.push(newBMapGL.Point(coordinates[i][0], coordinates[i][1]));}var pl =newBMapGL.Polyline(point,{strokeWeight:1,strokeColor:'#f00000',strokeOpacity:0});var trackAni =newBMapGLLib.TrackAnimation(map, pl,{overallView:true,tilt:70,heading:130,zoom:15,duration:20000,delay:100});
    trackAni.start();

里面的一些折线，路书图标可以换成自己的，路书图标是最坑的，百度用的是gltf模型，自己画了几个gltf模型都不行，图片又不显示，醉了，效果图如下

—

关于图层管理

that.view =newmapvgl.View({// effects: [new mapvgl.BloomEffect(), new mapvgl.BlurEffect(), new mapvgl.DepthEffect()],map: that.map,})
 that.view_1 =newmapvgl.View({// effects: [new mapvgl.BloomEffect(), new mapvgl.BlurEffect(), new mapvgl.DepthEffect()],map: that.map,})

这里全部都是用的this管理图层，当我们想要清空指定图层的时候就很Nice

addLayer //添加可视化图层
removeLayer //删除对应的可视化图层
removeAllLayers //删除所有可视化图层
getAllLayers //返回所有可视化图层
getAllThreeLayers //返回所有使用ThreeLayer开发的可视化图层
hide //隐藏当前图层管理器及所含图层
show //显示当前图层管理器及所含图层
hideLayer //隐藏对应图层
showLayer //显示对应图层
destroy //销毁当前容器

总结

总结：开发过程中遇到很多坑，还有一些没办法解决的坑例如路书图标模型问题：

总的来说都不难，主要还是提供的一些API不够用，自己向着法子实现各类奇葩需求，这个版本改了又改，例如标点组件要加上人员信息文字。

以上就是开发整个百度地图过程，请各位大佬批评指正