diff --git a/components.d.ts b/components.d.ts
index 08b60e6..8811548 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -25,7 +25,6 @@ declare module 'vue' {
MapEcharts: typeof import('./src/components/echarts/mapEcharts.vue')['default']
MapEcharts2: typeof import('./src/components/echartsCom/mapEcharts2.vue')['default']
MapLine: typeof import('./src/components/mapBaidu/mapLine.vue')['default']
- 'MapLine copy': typeof import('./src/components/mapBaidu/mapLine copy.vue')['default']
Pie3dCom: typeof import('./src/components/echartsCom/Pie3dCom.vue')['default']
Pie3dCom1: typeof import('./src/components/echartsCom/Pie3dCom1.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/index.html b/index.html
index d35366a..4b9a54a 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,8 @@
Vite App
+
+
diff --git a/src/components/mapBaidu/index.html b/src/components/mapBaidu/index.html
index 367d792..0d03334 100644
--- a/src/components/mapBaidu/index.html
+++ b/src/components/mapBaidu/index.html
@@ -1,71 +1,113 @@
-
+
-
-
-
-
- 添加自定义覆盖物
+
+ 轨迹视角动画暂停与继续
+
+
+
+
+
+
-
- 图示中为房产覆盖物，鼠标移到覆盖物上，自动显示房屋套数
+
+
-
+function start () {
+ trackAni.start();
+}
+function pauseAni () {
+ trackAni.pause();
+}
+function continueAni () {
+ trackAni.continue();
+}
+
\ No newline at end of file
diff --git a/src/components/mapBaidu/mapLine copy.vue b/src/components/mapBaidu/mapLine copy.vue
deleted file mode 100644
index a9254bf..0000000
--- a/src/components/mapBaidu/mapLine copy.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/components/mapBaidu/mapLine.vue b/src/components/mapBaidu/mapLine.vue
index e1273fb..45bac11 100644
--- a/src/components/mapBaidu/mapLine.vue
+++ b/src/components/mapBaidu/mapLine.vue
@@ -13,6 +13,7 @@ let map: any = null
let centerPoint: any = null
let domId = ref("0")
let domShow = ref(false)
+let animiationLineList = []
onMounted(() => {
console.log("map", "map")
})
@@ -20,8 +21,8 @@ onMounted(() => {
const linePointList: any = []
const initMap = () => {
- map = new BMap.Map("equipmentIdMap" + domId.value);
- map.centerAndZoom(new BMap.Point(116.3944, 39.9063), 18);
+ map = new BMapGL.Map("equipmentIdMap" + domId.value);
+ map.centerAndZoom(new BMapGL.Point(116.3944, 39.9063), 18);
console.log("map", map)
map.enableScrollWheelZoom();
setTimeout(() => {
@@ -40,7 +41,8 @@ const initMap = () => {
}
initIcon(startIcon.imgUrl, startIcon.position, startIcon.size)
initIcon(endIcon.imgUrl, endIcon.position, endIcon.size)
- initPolyline()
+ // initPolyline()
+ initPolylineAnimation()
setViewPortFn()
}, 200)
}
@@ -49,7 +51,7 @@ const initMap = () => {
const initCustomDot = (centerPoint: any) => {
function ComplexCustomOverlay(centerPoint) {
}
- ComplexCustomOverlay.prototype = new BMap.Overlay();
+ ComplexCustomOverlay.prototype = new BMapGL.Overlay();
ComplexCustomOverlay.prototype.initialize = function (map) {
const div = this._div = document.createElement("div");
div.style.position = "absolute";
@@ -83,15 +85,35 @@ const initCustomDot = (centerPoint: any) => {
const initPolyline = () => {
- var polyline = new BMap.Polyline(linePointList, { strokeColor: '#0788e6', strokeWeight: 4, strokeOpacity: 1. });
+ var polyline = new BMapGL.Polyline(linePointList, { strokeColor: '#0788e6', strokeWeight: 4, strokeOpacity: 1. });
map.addOverlay(polyline);
}
+const initPolylineAnimation = () => {
+ var pl = new BMapGL.Polyline(linePointList, {
+ strokeColor: "#0e83ed",
+ strokeWeight: 4
+ });
+ // setTimeout('start()', 3000);
+ const trackAni = new BMapGLLib.TrackAnimation(map, pl, {
+ overallView: true,
+ tilt: 30,
+ duration: 200,
+ delay: 300,
+ });
+ start()
+ function start() {
+ trackAni.start();
+ }
+
+
+}
+
const initIcon = (imgUrl: any, position: any, size: any) => {
- var myIcon = new BMap.Icon("https://api.map.baidu.com/img/markers.png", new BMap.Size(60, 60));
+ var myIcon = new BMapGL.Icon("https://api.map.baidu.com/img/markers.png", new BMapGL.Size(60, 60));
// 创建Marker标注，使用小车图标
- var pt = new BMap.Point(...position);
- var marker = new BMap.Marker(pt, {
+ var pt = new BMapGL.Point(...position);
+ var marker = new BMapGL.Marker(pt, {
icon: myIcon
});
// 将标注添加到地图
@@ -119,7 +141,7 @@ const getcenterpoiont = (pointStart: any, pointEnd: any) => {
const lngcenter = Math.min(lng1, lng2) + lngca;
const latcenter = Math.min(lat1, lat2) + latca;
- const pointcenter = new BMap.Point(lngcenter, latcenter);
+ const pointcenter = new BMapGL.Point(lngcenter, latcenter);
return pointcenter;
}
@@ -136,7 +158,7 @@ const initApiBmCompanyInfoTimeListTime = async (val: any) => {
domShow.value = true
console.log("apiBmCompanyInfoTimeListTime", res)
res.forEach((ele: any) => {
- linePointList.push(new BMap.Point(Number(ele.lon), Number(ele.lat)))
+ linePointList.push(new BMapGL.Point(Number(ele.lon), Number(ele.lat)))
})
nextTick(() => {
initMap()