提示:记录百度地图可视化开发一些坑以及经验
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
示例:产品需求是根据对讲机GPS实时数据拿到坐标,后台返回的坐标实现人员实时定位,还有人员当天轨迹动画等效果。
代码如下(这是百度提供的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)]
}
这里选用的是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();
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不够用,自己向着法子实现各类奇葩需求,这个版本改了又改,例如标点组件要加上人员信息文字。