百度地图可视化开发

百度地图可视化开发

---

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

---

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

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

---

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

一、先上成品效果

示例：产品需求是根据对讲机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

export function bd09togcj02(lon, lat) {
  const x = lon - 0.0065
  const y = lat - 0.006
  const 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 = new mapvgl.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 = new mapvgl.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(new BMapGL.Point(coordinates[i][0], coordinates[i][1]));
    }

    var pl = new BMapGL.Polyline(point, {strokeWeight: 1, strokeColor:'#f00000', strokeOpacity: 0});
    var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
        overallView: true,
        tilt: 70,
        heading: 130,
        zoom: 15,
        duration: 20000,
        delay: 100
    });
    trackAni.start();

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

—

关于图层管理

that.view = new mapvgl.View({
          // effects: [new mapvgl.BloomEffect(), new mapvgl.BlurEffect(), new mapvgl.DepthEffect()],
          map: that.map,
        })
 that.view_1 = new mapvgl.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不够用，自己向着法子实现各类奇葩需求，这个版本改了又改，例如标点组件要加上人员信息文字。

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