|
|
|
|
|
<template>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
|
|
<el-form ref="queryRef" :inline="true" :label-width=" locale ? '90px':'140px'" :model="queryParams"
|
|
|
|
|
|
style="margin-top: 24px">
|
|
|
|
|
|
<el-form-item label="车牌号" prop="carLicense">
|
|
|
|
|
|
<el-input
|
|
|
|
|
|
v-model="queryParams.carLicense"
|
|
|
|
|
|
:placeholder=" t('common.pleaseEnter') + '车牌号'"
|
|
|
|
|
|
clearable
|
|
|
|
|
|
style="width: 200px"
|
|
|
|
|
|
@keyup.enter.native="handleQuery"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label="时间" prop="internationalization3">
|
|
|
|
|
|
<el-date-picker
|
|
|
|
|
|
v-model="queryParams.internationalization3"
|
|
|
|
|
|
end-placeholder="结束时间"
|
|
|
|
|
|
range-separator="到"
|
|
|
|
|
|
start-placeholder="开始时间"
|
|
|
|
|
|
type="datetimerange"
|
|
|
|
|
|
/>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item label=" ">
|
|
|
|
|
|
<el-button icon="Search" type="primary" @click="handleQuery">{{ t('option.search') }}</el-button>
|
|
|
|
|
|
<el-button icon="Refresh" @click="resetQuery">{{ t('option.reset') }}</el-button>
|
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
</el-form>
|
|
|
|
|
|
|
|
|
|
|
|
<div id="container3"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
|
|
|
|
import {addTest, delTest, getTest, listTest, updateTest} from "@/api/realTimeMonitoring/historicalRoute";
|
|
|
|
|
|
import {useI18n} from 'vue-i18n';
|
|
|
|
|
|
import Cookies from "js-cookie";
|
|
|
|
|
|
|
|
|
|
|
|
const {t} = useI18n();
|
|
|
|
|
|
|
|
|
|
|
|
const locale = (Cookies.get('language') || 'zhCn') === 'zhCn'
|
|
|
|
|
|
const {proxy} = getCurrentInstance();
|
|
|
|
|
|
const queryParams = ref({})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let map = null
|
|
|
|
|
|
let polyline = null
|
|
|
|
|
|
let passedPolyline = null
|
|
|
|
|
|
let mouseTool = null
|
|
|
|
|
|
let path = [[116.390969, 39.911592], [116.391496, 39.909008], [116.389264, 39.909765], [116.38802, 39.911016]]
|
|
|
|
|
|
let marketPath = [116.390669, 39.911147]
|
|
|
|
|
|
AMapLoader.load({
|
|
|
|
|
|
key: "ba8fb8d8bae1b280b93406d5959d492f", // 申请好的Web端开发者Key，首次调用 load 时必填
|
|
|
|
|
|
// version: "1.4.15", //
|
|
|
|
|
|
version: "2.0", //
|
|
|
|
|
|
plugins: ['AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Marker'],
|
|
|
|
|
|
|
|
|
|
|
|
AMapUI: {
|
|
|
|
|
|
version: '1.1',
|
|
|
|
|
|
plugins: []
|
|
|
|
|
|
}
|
|
|
|
|
|
}).then((AMap) => {
|
|
|
|
|
|
map = new AMap.Map("container3", { //设置地图容器id
|
|
|
|
|
|
viewMode: "3D", //是否为3D地图模式
|
|
|
|
|
|
zoom: 16, //初始化地图级别
|
|
|
|
|
|
center: [116.397428, 39.90923], //初始化地图中心点位置
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// let marker = new AMap.Marker({
|
|
|
|
|
|
// position: marketPath,
|
|
|
|
|
|
// anchor: 'bottom-center',
|
|
|
|
|
|
// offset: new AMap.Pixel(0, 0)
|
|
|
|
|
|
// });
|
|
|
|
|
|
// marker.setTitle('我是marker的title');
|
|
|
|
|
|
// marker.setLabel({
|
|
|
|
|
|
// direction: 'top',
|
|
|
|
|
|
// offset: new AMap.Pixel(0, -10), //设置文本标注偏移量
|
|
|
|
|
|
// content: "" + AMap.GeometryUtil.isPointInRing(marketPath,path),
|
|
|
|
|
|
// });
|
|
|
|
|
|
// marker.setMap(map);
|
|
|
|
|
|
|
|
|
|
|
|
// 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
|
|
|
|
|
|
map.addControl(new AMap.ToolBar({position: 'LT'}));
|
|
|
|
|
|
|
|
|
|
|
|
// 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
|
|
|
|
|
|
map.addControl(new AMap.Scale());
|
|
|
|
|
|
|
|
|
|
|
|
// 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
|
|
|
|
|
|
map.addControl(new AMap.HawkEye({isOpen: true}));
|
|
|
|
|
|
|
|
|
|
|
|
// 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
|
|
|
|
|
|
map.addControl(new AMap.MapType());
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
polyline = new AMap.Polyline({
|
|
|
|
|
|
strokeColor: '#00BBFF', // 线颜色-深蓝色
|
|
|
|
|
|
path: [[116.478935, 39.997761], [103.85094, 35.987496]],
|
|
|
|
|
|
strokeWeight: 6 // 线宽
|
|
|
|
|
|
})
|
|
|
|
|
|
map.add(polyline);
|
|
|
|
|
|
map.setFitView()
|
|
|
|
|
|
|
|
|
|
|
|
}).catch(e => {
|
|
|
|
|
|
console.log(e);
|
|
|
|
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
#container3 {
|
|
|
|
|
|
padding: 0px;
|
|
|
|
|
|
margin: 20px 0 0 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: calc(100vh - 190px);
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
