history record
parent
243e5057db
commit
393f5de05d
|
|
@ -49,6 +49,7 @@ import AMapLoader from '@amap/amap-jsapi-loader';
|
|||
console.log(e);
|
||||
});
|
||||
},
|
||||
|
||||
drawPolygon() {
|
||||
this.mouseTool.polygon({
|
||||
strokeColor: "#FF33FF",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-button type="warning">按钮</el-button>
|
||||
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
|
@ -1,14 +1,13 @@
|
|||
<script >
|
||||
import path from "path";
|
||||
import AMapLoader from '@amap/amap-jsapi-loader';
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode:'6dc027fe91257ed0b06af9924201212c'
|
||||
}
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return{
|
||||
multiple: true,
|
||||
duration:2000,
|
||||
AMap: null,
|
||||
map: null,
|
||||
mouseTool: null,
|
||||
|
|
@ -17,6 +16,16 @@ export default {
|
|||
carVin:"VIN123465798",
|
||||
startTime:"2023-01-01 12:01:59",
|
||||
endTime:"2023-01-01 12:10:21"
|
||||
},
|
||||
{
|
||||
carVin:"VIN66666666",
|
||||
startTime:"2022-01-01 12:01:59",
|
||||
endTime:"2022-01-01 12:10:21"
|
||||
},
|
||||
{
|
||||
carVin:"VIN88888888",
|
||||
startTime:"2021-01-01 12:01:59",
|
||||
endTime:"2021-01-01 12:10:21"
|
||||
}
|
||||
],
|
||||
lineArr: [
|
||||
|
|
@ -44,32 +53,74 @@ export default {
|
|||
mounted() {
|
||||
},
|
||||
created() {
|
||||
this.initAMap()
|
||||
},
|
||||
methods: {
|
||||
doDo(){
|
||||
// this.$router.push('/cmpany/firm')
|
||||
this.initAMap()
|
||||
this.initMap()
|
||||
this.startAnimation()
|
||||
},
|
||||
initAMap() {
|
||||
initMap() {
|
||||
AMapLoader.load({
|
||||
key: 'e31845f75485d475ad64b1946691f717',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.MouseTool','AMap.LngLat', 'AMap.Scale', 'AMap.ToolBar', 'AMap.ControlBar', 'AMap.Geocoder', 'AMap.Marker',
|
||||
'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow', 'AMap.PolyEditor','AMap.MouseTool','AMap.PlaceSearch'],
|
||||
key: "0b5f26b194361cbc9571101bc2856962", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.Scale",
|
||||
"AMap.HawkEye",
|
||||
"AMap.ToolBar",
|
||||
"AMap.AutoComplete",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.ControlBar",
|
||||
"AMap.MouseTool",
|
||||
"AMap.DragRoute",
|
||||
"AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
}).then((AMap) => {
|
||||
this.map = new AMap.Map('container', {
|
||||
// 获取到作为地图容器的DOM元素，创建地图实例
|
||||
this.map = new AMap.Map("container", { //设置地图容器id
|
||||
resizeEnable: true,
|
||||
viewMode: '2D',
|
||||
zoomEnable: true,
|
||||
dragEnable: true,
|
||||
doubleClickZoom: true,
|
||||
zoom: 17,
|
||||
showBuildingBlock: true,
|
||||
pitch: 55,
|
||||
viewMode: "2D", // 使用3D视图
|
||||
zoomEnable: true, // 地图是否可缩放，默认值为true
|
||||
dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
|
||||
doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
|
||||
zoom: 13, //初始化地图级别
|
||||
center: this.lineArr[0], // 初始化中心点坐标 北京
|
||||
// mapStyle: "amap://styles/darkblue", // 设置颜色底层
|
||||
})
|
||||
}).catch(e => {
|
||||
console.log(e)
|
||||
|
||||
this.marker = new AMap.Marker({
|
||||
position: this.lineArr[0],
|
||||
icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
|
||||
offset: new AMap.Pixel(-13, -26),
|
||||
});
|
||||
this.map.add(this.marker)
|
||||
|
||||
// 绘制轨迹
|
||||
this.polyline = new AMap.Polyline({
|
||||
path: this.lineArr,
|
||||
showDir: true,
|
||||
strokeColor: "#28F", //线颜色
|
||||
// strokeOpacity: 1, //线透明度
|
||||
strokeWeight: 6, //线宽
|
||||
// strokeStyle: "solid" //线样式
|
||||
});
|
||||
this.map.add(this.polyline)
|
||||
|
||||
// 走过的路径
|
||||
this.passedPolyline = new AMap.Polyline({
|
||||
strokeColor: "#AF5", //线颜色
|
||||
strokeWeight: 6, //线宽
|
||||
});
|
||||
this.map.add(this.passedPolyline)
|
||||
|
||||
// 监听marker移动
|
||||
this.marker.on('moving', (e) => {
|
||||
console.log('marker动了', e)
|
||||
this.passedPolyline.setPath(e.passedPath); // 设置路径样式
|
||||
this.map.setCenter(e.target.getPosition(), true) // 设置地图中心点
|
||||
});
|
||||
|
||||
this.map.setFitView(); // 根据覆盖物自适应展示地图
|
||||
|
||||
})
|
||||
},
|
||||
startAnimation () {
|
||||
|
|
@ -90,8 +141,9 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div id="container"></div>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<el-form>
|
||||
<table style="width: 100% ">
|
||||
<tr>
|
||||
|
|
@ -108,6 +160,21 @@ export default {
|
|||
</tr>
|
||||
</table>
|
||||
</el-form>
|
||||
<el-button
|
||||
type="primary"
|
||||
plain
|
||||
icon="el-icon-plus"
|
||||
size="mini"
|
||||
v-hasPermi="['vehicle:record:add']"
|
||||
>新增</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
plain
|
||||
icon="el-icon-delete"
|
||||
size="mini"
|
||||
:disabled="multiple"
|
||||
v-hasPermi="['vehicle:record:remove']"
|
||||
>删除</el-button>
|
||||
<el-table :data="historyList">
|
||||
<el-table-column label="VIN">
|
||||
<template slot-scope="scope">
|
||||
|
|
@ -129,9 +196,15 @@ export default {
|
|||
<el-button type="warning">删除</el-button>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
#container{
|
||||
width: 50%;
|
||||
height: 400px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue