Skip to content

Commit

Permalink
更新文档
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhoubichuan
zhoubichuan committed Dec 20, 2023
1 parent f0375d1 commit a7077ca
Show file tree
Hide file tree
Showing 10 changed files with 497 additions and 478 deletions.
3 changes: 2 additions & 1 deletion src/.vuepress/sidebar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,8 @@ const sidebar = {
"/source/vue-cli2.x/": ["1.index"],
"/source/vue2.x/": [
"1.index",
"1.entry",
"2.source",
"3.project",
"2.initMixin",
"3.stateMixin",
"4.eventsMixin",
Expand Down
180 changes: 90 additions & 90 deletions src/base/project/14.map.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ export default {
return {
map: null, //地图实例
customMaker: null,
};
}
},
mounted() {
this.map = new AMap.Map("mapContainer", {
Expand All @@ -168,17 +168,17 @@ export default {
animateEnable: false,
mapStyle: "amap://styles/darkblue",
center: [116.2317, 39.54],
});
})
var wms = new AMap.TileLayer({
zIndex: 2,
blend: false,
tileSize: 256,
zooms: [1, 30],
getTileUrl: `https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=img_w&x=[x]&y=[y]&l=[z]&tk=d97ee4980a986e7d0c4f0a8c8f103a94`,
});
wms.setMap(this.map);
})
wms.setMap(this.map)
},
};
}
</script>
```

Expand Down Expand Up @@ -391,7 +391,7 @@ export default {
start: false,
sliderVal: 0,
isTimesChoose: false,
};
}
},
created() {},
mounted() {
Expand All @@ -401,127 +401,127 @@ export default {
resizeEnable: true,
// 初始地图级别
zoom: 15,
};
this.map = new AMap.Map("container", param);
this.init();
}
this.map = new AMap.Map("container", param)
this.init()
},
methods: {
// 滑动条的提示
hideFormat() {
return this.passedTime;
return this.passedTime
},
// 初始化
init() {
// 后台传递来的数据是json的，所以我们改成数组
// 轨迹
// 线条路线
let linePath = this.linePath;
let linePath = this.linePath
linePath.forEach((item) => {
// 把json转为数组
this.pathList.push([item.longitude, item.latitude]);
this.pathList.push([item.longitude, item.latitude])
// 当前时间戳
item.stampTime = new Date(item.time).getTime();
});
item.stampTime = new Date(item.time).getTime()
})
linePath.forEach((item, i) => {
// 获得到下一个位置
let next = linePath[i + 1];
let next = linePath[i + 1]
// 判断是否还有下一个
if (next) {
// 计算出间隔时间 每秒
item.intervalTime = (next.stampTime - item.stampTime) / 1000;
item.intervalTime = (next.stampTime - item.stampTime) / 1000
// 计算出下一站
item.nextDistance = this.distanceFun(
[item.longitude, item.latitude],
[next.longitude, next.latitude]
);
)
// 求出具体的速度
item.nextSpeed =
item.nextDistance / 1000 / (item.intervalTime / 60 / 60);
item.nextDistance / 1000 / (item.intervalTime / 60 / 60)
}
});
})
// 设置路线
this.setPath();
this.setPath()
// 创建起始和经过的icon
this.icon.forEach((item) => {
this.addIcon(item);
});
this.addIcon(item)
})
// 在init方法加上这行代码
// 修改全局的路线数据
this.linePath = linePath;
this.linePath = linePath
},
// 计算两个坐标点之间的距离
distanceFun(point1, point2) {
// 那数组转化为经纬度
let p1 = new AMap.LngLat(point1[0], point1[1]);
let p2 = new AMap.LngLat(point2[0], point2[1]);
let p1 = new AMap.LngLat(point1[0], point1[1])
let p2 = new AMap.LngLat(point2[0], point2[1])
// 计算2点直接的距离 distance这个函数有继续可以了解一下
let distance = Math.round(p1.distance(p2));
return distance;
let distance = Math.round(p1.distance(p2))
return distance
},
// 格式化时间（不解释）
getTime(sTime) {
let ss;
let mm = "00";
let hh = "00";
let ss
let mm = "00"
let hh = "00"
if (sTime > 60) {
let s = sTime % 60;
ss = s > 9 ? s : "0" + s;
let mTime = parseInt(sTime / 60);
let s = sTime % 60
ss = s > 9 ? s : "0" + s
let mTime = parseInt(sTime / 60)
if (mTime > 60) {
let m = mTime % 60;
mm = m > 9 ? m : "0" + m;
hh = parseInt(mTime / 60);
let m = mTime % 60
mm = m > 9 ? m : "0" + m
hh = parseInt(mTime / 60)
} else {
mm = mTime > 9 ? mTime : "0" + mTime;
mm = mTime > 9 ? mTime : "0" + mTime
}
} else {
ss = sTime > 9 ? sTime : "0" + sTime;
ss = sTime > 9 ? sTime : "0" + sTime
}
return hh + ":" + mm + ":" + ss;
return hh + ":" + mm + ":" + ss
},
// 滑动条改变事件
sliderChange(val) {
// 计算开始距离
let num = parseInt((val / 100) * this.pathList.length);
let num = parseInt((val / 100) * this.pathList.length)
// 计算结束的距离
let decimal =
String((val / 100) * this.pathList.length).split(".")[1] || 0;
String((val / 100) * this.pathList.length).split(".")[1] || 0
// 移动小车
this.navgtr.moveToPoint(num, Number("0." + decimal));
this.navgtr.moveToPoint(num, Number("0." + decimal))
// 重新绘制
this.pathSimplifierIns.renderLater();
this.pathSimplifierIns.renderLater()
},
// 设置路线
setPath() {
let that = this;
let that = this
AMapUI.load(
["ui/misc/PathSimplifier", "lib/$"],
function (PathSimplifier) {
if (!PathSimplifier.supportCanvas) {
console.log("当前环境不支持 Canvas！");
return;
console.log("当前环境不支持 Canvas！")
return
}
function onload() {
that.pathSimplifierIns.renderLater();
that.pathSimplifierIns.renderLater()
}
function onerror() {
console.log("图片加载失败！");
console.log("图片加载失败！")
}
// 历史轨迹巡航器
that.pathSimplifierIns = new PathSimplifier({
zIndex: 100,
map: that.map, // 所属的地图实例
getPath: function (pathData) {
// 这里的pathData保存的是路线
return pathData.path;
return pathData.path
},
// 自动设置视图
autoSetFitView: true,
Expand Down Expand Up @@ -583,69 +583,69 @@ export default {
keyPointTolerance: -1,
renderAllPointsIfNumberBelow: 0, // 绘制路线节点，如不需要可设置为-1
},
});
})
// 历史轨迹巡航器设置数据 这里设置的就是上面pathData的数据
that.pathSimplifierIns.setData([
{
name: "轨迹",
path: that.pathList,
},
]);
])
// 开启中心自适应
that.pathSimplifierIns.setFitView(-1);
that.pathSimplifierIns.setFitView(-1)
// 获取初始速度
// 设置默认的为 0.1
let startSpeed = 0.1;
let startSpeed = 0.1
if (that.linePath.length !== 0) {
// 获取一开始的速度 并且判断是否为0 如果不为0直接返回 为0给一个初始的速度
startSpeed =
that.linePath[0].nextSpeed === 0
? 0.1
: that.linePath[0].nextSpeed;
: that.linePath[0].nextSpeed
}
// 对第一条线路（即索引 0）创建一个巡航器
that.navgtr = that.pathSimplifierIns.createPathNavigator(0, {
loop: false, // 循环播放
// 速度×倍速
speed: startSpeed * that.times,
});
})
let linePath = that.linePath;
let len = linePath.length;
let startPoint = linePath[0];
let endPoint = linePath[len - 1];
let linePath = that.linePath
let len = linePath.length
let startPoint = linePath[0]
let endPoint = linePath[len - 1]
// 计算总时间，hh:mm:ss 因为计算出来是时间搓 所以要进行格式化
that.totalTime = that.getTime(
(endPoint.stampTime - startPoint.stampTime) / 1000
);
)
// 创建 infoWindow 实例
let infoWindow = new AMap.InfoWindow({
anchor: "bottom-center",
autoMove: false,
offset: new AMap.Pixel(0, -20),
content: "", //传入 dom 对象，或者 html 字符串
});
})
// 移动过程中
that.navgtr.on("move", function () {
that.playIcon = "resume";
that.playIcon = "resume"
// 走到了第几个点
let idx = this.getCursor().idx;
let idx = this.getCursor().idx
// 至下一个节点的比例位置
let tail = this.getCursor().tail;
let tail = this.getCursor().tail
// 总路程
let totalIdx = idx + tail;
let totalIdx = idx + tail
// 计算下一个距离速度
let point = linePath[idx];
let point = linePath[idx]
if (idx < len - 1) {
// 判断速度是否为0 如果为0 需要给个0.1的速度
point.nextSpeed === 0 && (point.nextSpeed = 0.1);
point.nextSpeed === 0 && (point.nextSpeed = 0.1)
// 这里的速度记得×倍数
that.navgtr.setSpeed(point.nextSpeed * that.times);
that.navgtr.setSpeed(point.nextSpeed * that.times)
}
// 剩余公里数，窗体随时移动展示
Expand All @@ -654,34 +654,34 @@ export default {
point.time &&
infoWindow.setContent(
`<p class="info-window">时间：<span>${point.time}`
);
)
// 设置提示框
infoWindow.open(that.map, that.navgtr.getPosition());
infoWindow.open(that.map, that.navgtr.getPosition())
// 进度条实时展示tail
!that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100);
!that.isOnSlider && (that.sliderVal = (totalIdx / len) * 100)
// 已经播放时间
let sTime = parseInt(
(((endPoint.stampTime - startPoint.stampTime) / 1000) *
that.sliderVal) /
100
);
)
// 格式化时间
that.passedTime = that.getTime(sTime);
that.passedTime = that.getTime(sTime)
// 如果到头了，回到初始状态
if (that.navgtr.isCursorAtPathEnd()) {
// 设置为开始状态 让小车回到原来位置
that.playIcon = "start";
that.playIcon = "start"
// 设置图标状态
that.start = false;
that.start = false
// 设置已经走过的时间
that.passedTime = that.totalTime;
that.passedTime = that.totalTime
// 设置滑动条状态
that.sliderVal = 100;
that.sliderVal = 100
}
});
})
}
);
)
},
addIcon(item) {
Expand All @@ -693,32 +693,32 @@ export default {
position: [item.longitude, item.latitude],
//设置基点偏移
offset: new AMap.Pixel(-13, -30),
});
})
// 把图标放在地图上
marker.setMap(this.map);
marker.setMap(this.map)
},
// 暂停和播放按钮
navgControl(action) {
if (action === "start") {
let that = this;
this.passedTime = "00:00:00";
let that = this
this.passedTime = "00:00:00"
setTimeout(() => {
that.navgtr[action]();
}, 300);
that.navgtr[action]()
}, 300)
} else {
this.navgtr[action]();
this.navgtr[action]()
}
// 修改图标状态
this.start = !this.start;
this.start = !this.start
},
// 修改速度
changeSpeed(item) {
this.times = item;
this.isTimesChoose = false;
this.times = item
this.isTimesChoose = false
},
},
};
}
</script>
```

Expand Down
Loading

0 comments on commit a7077ca

Please sign in to comment.