|
@@ -4,202 +4,208 @@
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
- import {
|
|
|
|
- travelpath
|
|
|
|
- } from '@/api/orderManagement'
|
|
|
|
- import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
|
- export default {
|
|
|
|
- name: "app",
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- map: null,
|
|
|
|
- path:[],
|
|
|
|
- path1: [
|
|
|
|
- [116.405289, 39.904987],
|
|
|
|
- [113.964458, 40.54664],
|
|
|
|
- [111.47836, 41.135964],
|
|
|
|
- [108.949297, 41.670904],
|
|
|
|
- [106.380111, 42.149509],
|
|
|
|
- [103.774185, 42.56996],
|
|
|
|
- [101.135432, 42.930601],
|
|
|
|
- [98.46826, 43.229964],
|
|
|
|
- [95.777529, 43.466798],
|
|
|
|
- [93.068486, 43.64009],
|
|
|
|
- [90.34669, 43.749086],
|
|
|
|
- [87.61792, 43.793308]
|
|
|
|
- ],
|
|
|
|
- path2: [
|
|
|
|
- [117.405289, 40.904987],
|
|
|
|
- [114.964458, 41.54664],
|
|
|
|
- [112.47836, 42.135964],
|
|
|
|
- [109.949297, 43.670904],
|
|
|
|
- [107.380111, 44.149509],
|
|
|
|
- [104.774185, 43.56996],
|
|
|
|
- [102.135432, 43.930601],
|
|
|
|
- [99.46826, 44.229964],
|
|
|
|
- [96.777529, 44.466798],
|
|
|
|
- [94.068486, 44.64009],
|
|
|
|
- [91.34669, 44.749086],
|
|
|
|
- [88.61792, 44.793308]
|
|
|
|
- ],
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- props: ['radio','orderid'],
|
|
|
|
- watch: {
|
|
|
|
- radio: function(val1, val2) {
|
|
|
|
- if(val1==1) {
|
|
|
|
- var that=this
|
|
|
|
- travelpath({orderId:that.orderid}).then(response => {
|
|
|
|
- that.path1=[]
|
|
|
|
- var patharr=JSON.parse(response.data.longitudeLatitude)
|
|
|
|
|
|
+import { travelpath } from "@/api/orderManagement";
|
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
|
+export default {
|
|
|
|
+ name: "app",
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ map: null,
|
|
|
|
+ path: [],
|
|
|
|
+ path1: [
|
|
|
|
+ [116.405289, 39.904987],
|
|
|
|
+ [113.964458, 40.54664],
|
|
|
|
+ [111.47836, 41.135964],
|
|
|
|
+ [108.949297, 41.670904],
|
|
|
|
+ [106.380111, 42.149509],
|
|
|
|
+ [103.774185, 42.56996],
|
|
|
|
+ [101.135432, 42.930601],
|
|
|
|
+ [98.46826, 43.229964],
|
|
|
|
+ [95.777529, 43.466798],
|
|
|
|
+ [93.068486, 43.64009],
|
|
|
|
+ [90.34669, 43.749086],
|
|
|
|
+ [87.61792, 43.793308],
|
|
|
|
+ ],
|
|
|
|
+ path2: [
|
|
|
|
+ [117.405289, 40.904987],
|
|
|
|
+ [114.964458, 41.54664],
|
|
|
|
+ [112.47836, 42.135964],
|
|
|
|
+ [109.949297, 43.670904],
|
|
|
|
+ [107.380111, 44.149509],
|
|
|
|
+ [104.774185, 43.56996],
|
|
|
|
+ [102.135432, 43.930601],
|
|
|
|
+ [99.46826, 44.229964],
|
|
|
|
+ [96.777529, 44.466798],
|
|
|
|
+ [94.068486, 44.64009],
|
|
|
|
+ [91.34669, 44.749086],
|
|
|
|
+ [88.61792, 44.793308],
|
|
|
|
+ ],
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ props: ["radio", "orderid"],
|
|
|
|
+ watch: {
|
|
|
|
+ radio: function (val1, val2) {
|
|
|
|
+ debugger;
|
|
|
|
+ if (val1 == 1) {
|
|
|
|
+ var that = this;
|
|
|
|
+ travelpath({ orderId: that.orderid })
|
|
|
|
+ .then((response) => {
|
|
|
|
+ that.path1 = [];
|
|
|
|
+ var patharr = JSON.parse(response.data.longitudeLatitude);
|
|
// console.log(JSON.parse(response.data.longitudeLatitude),11111111)
|
|
// console.log(JSON.parse(response.data.longitudeLatitude),11111111)
|
|
for (let i = 0; i < patharr.length; i++) {
|
|
for (let i = 0; i < patharr.length; i++) {
|
|
- that.path1.push([patharr[i].longitude,patharr[i].latitude])
|
|
|
|
|
|
+ that.path1.push([patharr[i].longitude, patharr[i].latitude]);
|
|
}
|
|
}
|
|
- that.path = that.path1
|
|
|
|
|
|
+ that.path = that.path1;
|
|
that.loadmap();
|
|
that.loadmap();
|
|
})
|
|
})
|
|
.catch(() => {
|
|
.catch(() => {
|
|
// console.log(121212)
|
|
// console.log(121212)
|
|
- })
|
|
|
|
- // this.path = this.path1
|
|
|
|
- }else{
|
|
|
|
- var that=this
|
|
|
|
- travelpath({orderId:that.orderid}).then(response => {
|
|
|
|
- that.path2=[]
|
|
|
|
- var patharr=JSON.parse(response.data.longitudeLatitude)
|
|
|
|
|
|
+ });
|
|
|
|
+ // this.path = this.path1
|
|
|
|
+ } else {
|
|
|
|
+ var that = this;
|
|
|
|
+ travelpath({ orderId: that.orderid })
|
|
|
|
+ .then((response) => {
|
|
|
|
+ that.path2 = [];
|
|
|
|
+ var patharr = JSON.parse(response.data.longitudeLatitude);
|
|
// console.log(JSON.parse(response.data.longitudeLatitude),11111111)
|
|
// console.log(JSON.parse(response.data.longitudeLatitude),11111111)
|
|
for (let i = 0; i < patharr.length; i++) {
|
|
for (let i = 0; i < patharr.length; i++) {
|
|
- that.path2.push([patharr[i].longitude,patharr[i].latitude])
|
|
|
|
|
|
+ that.path2.push([patharr[i].longitude, patharr[i].latitude]);
|
|
}
|
|
}
|
|
- that.path = that.path2
|
|
|
|
|
|
+ that.path = that.path2;
|
|
that.loadmap();
|
|
that.loadmap();
|
|
})
|
|
})
|
|
.catch(() => {
|
|
.catch(() => {
|
|
// console.log(121212)
|
|
// console.log(121212)
|
|
- })
|
|
|
|
- // travelpath({orderId:this.orderid}).then(response => {
|
|
|
|
- // console.log(response)
|
|
|
|
- // })
|
|
|
|
- // .catch(() => {
|
|
|
|
- // })
|
|
|
|
- // this.path = this.path2
|
|
|
|
- }
|
|
|
|
- // this.loadmap();
|
|
|
|
|
|
+ });
|
|
|
|
+ // travelpath({orderId:this.orderid}).then(response => {
|
|
|
|
+ // console.log(response)
|
|
|
|
+ // })
|
|
|
|
+ // .catch(() => {
|
|
|
|
+ // })
|
|
|
|
+ // this.path = this.path2
|
|
}
|
|
}
|
|
|
|
+ // this.loadmap();
|
|
},
|
|
},
|
|
- methods: {
|
|
|
|
- loadmap() {
|
|
|
|
- return new Promise((reslove, reject) => {
|
|
|
|
- AMapLoader.load({
|
|
|
|
- key: "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
|
- // version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
|
- plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
|
- AMapUI: {
|
|
|
|
- // 是否加载 AMapUI,缺省不加载
|
|
|
|
- version: "1.1", // AMapUI 缺省 1.1
|
|
|
|
- plugins: [] // 需要加载的 AMapUI ui插件
|
|
|
|
- }
|
|
|
|
- }).then(AMap => {
|
|
|
|
- this.map = new AMap.Map("allmap", {
|
|
|
|
- resizeEnable: true,
|
|
|
|
- zoom: 10,
|
|
|
|
- // center: [116.397428, 39.90923] //中心点坐标
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- //地图控件
|
|
|
|
- this.map.addControl(new AMap.Scale());
|
|
|
|
- this.map.addControl(new AMap.ToolBar());
|
|
|
|
- this.map.setZoom(14); //设置缩放大小
|
|
|
|
- this.trajectory();
|
|
|
|
- reslove();
|
|
|
|
- })
|
|
|
|
- .catch(e => {
|
|
|
|
- console.log(e, "高德地图加载失败");
|
|
|
|
- reject(e);
|
|
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ loadmap() {
|
|
|
|
+ return new Promise((reslove, reject) => {
|
|
|
|
+ AMapLoader.load({
|
|
|
|
+ key: "211dd6f989e719022aaf47ddb0659c47", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
|
|
+ // version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
|
|
+ plugins: ["AMap.ToolBar", "AMap.Scale", "AMap.Geocoder"], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
|
|
|
|
+ AMapUI: {
|
|
|
|
+ // 是否加载 AMapUI,缺省不加载
|
|
|
|
+ version: "1.1", // AMapUI 缺省 1.1
|
|
|
|
+ plugins: [], // 需要加载的 AMapUI ui插件
|
|
|
|
+ },
|
|
|
|
+ })
|
|
|
|
+ .then((AMap) => {
|
|
|
|
+ this.map = new AMap.Map("allmap", {
|
|
|
|
+ resizeEnable: true,
|
|
|
|
+ zoom: 10,
|
|
|
|
+ // center: [116.397428, 39.90923] //中心点坐标
|
|
});
|
|
});
|
|
- });
|
|
|
|
- },
|
|
|
|
- // 轨迹
|
|
|
|
- trajectory() {
|
|
|
|
- AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $) => {
|
|
|
|
- if (!PathSimplifier.supportCanvas) {
|
|
|
|
- alert("当前环境不支持 Canvas!");
|
|
|
|
- return;
|
|
|
|
- }
|
|
|
|
|
|
|
|
- let pathSimplifierIns = new PathSimplifier({
|
|
|
|
- zIndex: 100,
|
|
|
|
- //autoSetFitView:false,
|
|
|
|
- map: this.map, //所属的地图实例
|
|
|
|
|
|
+ //地图控件
|
|
|
|
+ this.map.addControl(new AMap.Scale());
|
|
|
|
+ this.map.addControl(new AMap.ToolBar());
|
|
|
|
+ this.map.setZoom(14); //设置缩放大小
|
|
|
|
+ this.trajectory();
|
|
|
|
+ reslove();
|
|
|
|
+ })
|
|
|
|
+ .catch((e) => {
|
|
|
|
+ console.log(e, "高德地图加载失败");
|
|
|
|
+ reject(e);
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ // 轨迹
|
|
|
|
+ trajectory() {
|
|
|
|
+ AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], (PathSimplifier, $) => {
|
|
|
|
+ if (!PathSimplifier.supportCanvas) {
|
|
|
|
+ alert("当前环境不支持 Canvas!");
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
|
|
- getPath: function(pathData, pathIndex) {
|
|
|
|
- return pathData.path;
|
|
|
|
- },
|
|
|
|
- getHoverTitle: function(pathData, pathIndex, pointIndex) {
|
|
|
|
- if (pointIndex >= 0) {
|
|
|
|
- //point
|
|
|
|
- return (
|
|
|
|
- pathData.name +
|
|
|
|
- ",点:" +
|
|
|
|
- pointIndex +
|
|
|
|
- "/" +
|
|
|
|
- pathData.path.length
|
|
|
|
- );
|
|
|
|
- }
|
|
|
|
|
|
+ let pathSimplifierIns = new PathSimplifier({
|
|
|
|
+ zIndex: 100,
|
|
|
|
+ //autoSetFitView:false,
|
|
|
|
+ map: this.map, //所属的地图实例
|
|
|
|
|
|
- return pathData.name + ",点数量" + pathData.path.length;
|
|
|
|
- },
|
|
|
|
- renderOptions: {
|
|
|
|
- renderAllPointsIfNumberBelow: 100 //绘制路线节点,如不需要可设置为-1
|
|
|
|
|
|
+ getPath: function (pathData, pathIndex) {
|
|
|
|
+ return pathData.path;
|
|
|
|
+ },
|
|
|
|
+ getHoverTitle: function (pathData, pathIndex, pointIndex) {
|
|
|
|
+ if (pointIndex >= 0) {
|
|
|
|
+ //point
|
|
|
|
+ return (
|
|
|
|
+ pathData.name +
|
|
|
|
+ ",点:" +
|
|
|
|
+ pointIndex +
|
|
|
|
+ "/" +
|
|
|
|
+ pathData.path.length
|
|
|
|
+ );
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
|
|
- window.pathSimplifierIns = pathSimplifierIns;
|
|
|
|
|
|
+ return pathData.name + ",点数量" + pathData.path.length;
|
|
|
|
+ },
|
|
|
|
+ renderOptions: {
|
|
|
|
+ renderAllPointsIfNumberBelow: 100, //绘制路线节点,如不需要可设置为-1
|
|
|
|
+ },
|
|
|
|
+ });
|
|
|
|
|
|
- //设置数据
|
|
|
|
- pathSimplifierIns.setData([{
|
|
|
|
- name: "路线0",
|
|
|
|
- path: this.path
|
|
|
|
- }]);
|
|
|
|
|
|
+ window.pathSimplifierIns = pathSimplifierIns;
|
|
|
|
|
|
- //对第一条线路(即索引 0)创建一个巡航器
|
|
|
|
- let trajectory = pathSimplifierIns.createPathNavigator(0, {
|
|
|
|
- loop: true, //循环播放
|
|
|
|
- speed: 100 //巡航速度,单位千米/小时
|
|
|
|
- });
|
|
|
|
|
|
+ //设置数据
|
|
|
|
+ pathSimplifierIns.setData([
|
|
|
|
+ {
|
|
|
|
+ name: "路线0",
|
|
|
|
+ path: this.path,
|
|
|
|
+ },
|
|
|
|
+ ]);
|
|
|
|
|
|
- trajectory.start();
|
|
|
|
|
|
+ //对第一条线路(即索引 0)创建一个巡航器
|
|
|
|
+ let trajectory = pathSimplifierIns.createPathNavigator(0, {
|
|
|
|
+ loop: true, //循环播放
|
|
|
|
+ speed: 100, //巡航速度,单位千米/小时
|
|
});
|
|
});
|
|
- }
|
|
|
|
|
|
+
|
|
|
|
+ trajectory.start();
|
|
|
|
+ });
|
|
},
|
|
},
|
|
- mounted() {
|
|
|
|
- var that=this
|
|
|
|
- // console.log(this.orderid)
|
|
|
|
- this.$nextTick(function(){
|
|
|
|
- travelpath({orderId:that.orderid}).then(response => {
|
|
|
|
- that.path1=[]
|
|
|
|
- var patharr=JSON.parse(response.data.longitudeLatitude)
|
|
|
|
|
|
+ },
|
|
|
|
+ mounted() {
|
|
|
|
+ var that = this;
|
|
|
|
+ // console.log(this.orderid)
|
|
|
|
+ this.$nextTick(function () {
|
|
|
|
+ travelpath({ orderId: that.orderid })
|
|
|
|
+ .then((response) => {
|
|
|
|
+ that.path1 = [];
|
|
|
|
+ if (response.data) {
|
|
|
|
+ var patharr = JSON.parse(response.data.longitudeLatitude);
|
|
// console.log(JSON.parse(response.data.longitudeLatitude),11111111)
|
|
// console.log(JSON.parse(response.data.longitudeLatitude),11111111)
|
|
for (let i = 0; i < patharr.length; i++) {
|
|
for (let i = 0; i < patharr.length; i++) {
|
|
- that.path1.push([patharr[i].longitude,patharr[i].latitude])
|
|
|
|
|
|
+ that.path1.push([patharr[i].longitude, patharr[i].latitude]);
|
|
}
|
|
}
|
|
-
|
|
|
|
- that.path = that.path1
|
|
|
|
- that.loadmap();
|
|
|
|
- })
|
|
|
|
- .catch(() => {
|
|
|
|
- // console.log(121212)
|
|
|
|
- })
|
|
|
|
- })
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- };
|
|
|
|
|
|
+
|
|
|
|
+ that.path = that.path1;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ that.loadmap();
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ // console.log(121212)
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+};
|
|
</script>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|
|
- #allmap {
|
|
|
|
- width: 100%;
|
|
|
|
- height:calc(100vh - 150px);
|
|
|
|
- }
|
|
|
|
|
|
+#allmap {
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: calc(100vh - 150px);
|
|
|
|
+}
|
|
</style>
|
|
</style>
|