<template>
|
<GlobalWindow
|
:title="title"
|
width="100%"
|
:visible.sync="visible"
|
>
|
<div id="container"></div>
|
<div id="panel" style='position: absolute; right: 10px;top: 10px;height: 480px;width: 300px;z-index: 100;overflow: auto;'></div>
|
<template v-slot:footer>
|
<el-button @click="visible=false">返回</el-button>
|
</template>
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
import blueIcon from '@/assets/icons/location-blue.png'
|
import redIcon from '@/assets/icons/location-red.png'
|
export default {
|
name: 'OperaJkSketchMapWindow',
|
extends: BaseOpera,
|
components: { GlobalWindow },
|
data () {
|
return {
|
// 表单数据
|
visible: false,
|
title: '',
|
dataList: [],
|
locations: [],
|
map: null,
|
model: {
|
}
|
}
|
},
|
created () {
|
this.config({
|
module: '交控-线路优化线路客户记录信息表',
|
api: '/business/jkSketchCustomer',
|
'field.id': 'id',
|
'field.main': 'id'
|
})
|
},
|
methods: {
|
open (title, row) {
|
this.title = title + (row.lineName)
|
this.visible = true
|
this.dataList = []
|
this.model = row
|
this.locations = []
|
this.initAMap()
|
},
|
loadCustomer () {
|
var that = this
|
this.api.allMapList({
|
sketchLineId: this.model.id
|
}).then(res => {
|
that.dataList = res || []
|
that.locations = []
|
that.dataList.forEach((item, index) => {
|
var allsteps = []
|
allsteps.push([item.startLogitude, item.startLatitude])
|
const steps = (item.steps || '').split(';')
|
if (index != that.dataList.length - 1 || true) {
|
steps.forEach(item1 => {
|
const ll = (item1 || '').split(',')
|
allsteps.push(ll)
|
})
|
allsteps.push([item.endLogitude, item.endLatitude])
|
}
|
try {
|
/* console.log(item)
|
var driving = new AMap.Driving({
|
map: that.map,
|
panel: 'panel'
|
})
|
driving.search(new AMap.LngLat(item.startLogitude, item.startLatitude), new AMap.LngLat(item.endLogitude, item.endLatitude), function (status, result) {
|
if (status === 'complete') {
|
console.log('绘制驾车路线完成')
|
} else {
|
console.error('获取驾车数据失败：' + result)
|
}
|
}) */
|
} catch (e) {
|
|
}
|
var color = index === that.dataList.length - 1 ? '#a10e0e' : '#157713'
|
var polyline = new AMap.Polyline({
|
path: [allsteps],
|
isOutline: true,
|
outlineColor: color || '#157713',
|
borderWeight: 1,
|
strokeColor: color || '#157713',
|
strokeOpacity: 1,
|
strokeWeight: 2,
|
// 折线样式还支持 'dashed'
|
strokeStyle: 'solid',
|
// strokeStyle是dashed时有效
|
strokeDasharray: [10, 5],
|
lineJoin: 'round',
|
lineCap: 'round',
|
zIndex: 100
|
})
|
|
that.map.add([polyline])
|
that.map.setFitView()
|
|
const icon = new AMap.Icon({
|
size: new AMap.Size(30, 50), // 图标尺寸
|
image: index === 0 ? redIcon : blueIcon
|
})
|
|
var marker = new AMap.Marker({
|
position: new AMap.LngLat(item.startLogitude, item.startLatitude),
|
icon: index === 0 ? redIcon : blueIcon,
|
anchor: 'bottom-center',
|
offset: new AMap.Pixel(0, 0)
|
})
|
var title = (index == 0 ? '园区' : (index + '.' + item.name + (' ' + item.location || ''))) + '，' + (index != that.dataList.length - 1 ? '距下一站：' : '返回园区：') + ((item.distance || 0) / 1000) + '公里'
|
marker.setTitle(title)
|
var contnet = '<div>' + (index == 0 ? '园区' : (index + '.' + item.name)) + '</div>'
|
marker.setLabel({
|
direction: 'right',
|
offset: new AMap.Pixel(0, 0),
|
content: contnet
|
})
|
marker.setMap(that.map)
|
// that.locations.push(allsteps)
|
})
|
})
|
},
|
initAMap () {
|
var that = this
|
AMapLoader.load({
|
key: process.env.VUE_APP_AMAP_KEY,
|
version: '2.0',
|
plugins: ['AMap.ToolBar', 'AMap.Driving'],
|
AMapUI: {
|
version: '1.1',
|
plugins: []
|
},
|
Loca: {
|
version: '2.0' // 数据可视化
|
}
|
}).then((AMap) => {
|
that.map = new AMap.Map('container', {
|
viewMode: '2D', // 默认使用 2D 模式
|
zoom: 20, // 初始化地图层级
|
center: [118.39, 31.28] // 初始化地图中心点
|
})
|
this.loadCustomer()
|
}).catch(e => {
|
console.log(e)
|
})
|
},
|
getRandomColor (index, total) {
|
const r = 21
|
// const g = 80 +(index*50/total);
|
const g = 120
|
const b = 19
|
return `rgb(${r}, ${g}, ${b})`
|
}
|
}
|
}
|
</script>
|
<style>
|
#container {
|
padding: 0px;
|
margin: 0px;
|
width: 100%;
|
height: 90%;
|
position: absolute;
|
}
|
|
</style>
|
