|
|
@@ -32,7 +32,6 @@
|
|
|
|
|
|
<script>
|
|
|
import Box from './Box'
|
|
|
-import { Bounds } from './config'
|
|
|
import DeviceStatus from './DeviceStatus'
|
|
|
import AlarmInfo from './AlarmInfo'
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
|
|
@@ -54,10 +53,6 @@ export default {
|
|
|
statusData: {
|
|
|
type: Array,
|
|
|
required: true
|
|
|
- },
|
|
|
- city: {
|
|
|
- type: String,
|
|
|
- default: '深圳市'
|
|
|
}
|
|
|
},
|
|
|
data () {
|
|
|
@@ -133,104 +128,117 @@ export default {
|
|
|
辅助转化函数 str.split(';').map(i=>i.split(',').map(i=>Number))
|
|
|
后续 可以 new AMap.Polyline画轮廓 setFiew 定位轮廓
|
|
|
*/
|
|
|
+ const options = {
|
|
|
+ subdistrict: 1,
|
|
|
+ extensions: 'all',
|
|
|
+ level: 'province'
|
|
|
+ }
|
|
|
+ const district = new AMap.DistrictSearch(options)
|
|
|
const outer = [
|
|
|
new AMap.LngLat(-360, 90, true),
|
|
|
new AMap.LngLat(-360, -90, true),
|
|
|
new AMap.LngLat(360, -90, true),
|
|
|
new AMap.LngLat(360, 90, true)
|
|
|
]
|
|
|
- const bounds = [Bounds.inspur]
|
|
|
- const pathArray = [outer, Bounds.inspur] // bounds外部
|
|
|
-
|
|
|
- // 实例化地图
|
|
|
- const map = new AMap.Map(this.$refs.map, {
|
|
|
+ district.search(process.env.VUE_APP_GAODE_MAP_RANGE, (status, result) => {
|
|
|
+ let bounds
|
|
|
+ if (status === 'complete') {
|
|
|
+ bounds = result.districtList[0]['boundaries']
|
|
|
+ } else {
|
|
|
+ bounds = []
|
|
|
+ this.$message.error('获取边界信息失败')
|
|
|
+ }
|
|
|
+ const pathArray = [outer, ...bounds] // bounds外部
|
|
|
+ // 实例化地图
|
|
|
+ const map = new AMap.Map(this.$refs.map, {
|
|
|
// expandZoomRange: true, // 开启显示范围设置
|
|
|
// zooms: [7, 20], // 最小显示级别为7，最大显示级别为20
|
|
|
// viewMode: '3D', // 这里特别注意，设置为3D则其它地区不显示
|
|
|
- zoomEnable: true, // 是否可以缩放地图
|
|
|
- // resizeEnable: true
|
|
|
- mapStyle: 'amap://styles/darkblue'
|
|
|
- })
|
|
|
- this.map = map
|
|
|
+ zoomEnable: true, // 是否可以缩放地图
|
|
|
+ // resizeEnable: true
|
|
|
+ mapStyle: 'amap://styles/darkblue'
|
|
|
+ })
|
|
|
+ this.map = map
|
|
|
|
|
|
- this.marks = []
|
|
|
- this.$deviceMap = {} // 当前地图 有标记点的设备 (可能切换部门变少)
|
|
|
- this.$alldeviceMap = {} // 警告是全部设备的 可能因为切换部门 地图上没有警告对应设备的标记点无法定位 所以需要一个全部的坐标map
|
|
|
+ this.marks = []
|
|
|
+ this.$deviceMap = {} // 当前地图 有标记点的设备 (可能切换部门变少)
|
|
|
+ this.$alldeviceMap = {} // 警告是全部设备的 可能因为切换部门 地图上没有警告对应设备的标记点无法定位 所以需要一个全部的坐标map
|
|
|
|
|
|
- this.$onlineIcon = new AMap.Icon({
|
|
|
- image: onlineIcon
|
|
|
- })
|
|
|
- this.$offlineIcon = new AMap.Icon({
|
|
|
- image: offlineIcon
|
|
|
- })
|
|
|
+ this.$onlineIcon = new AMap.Icon({
|
|
|
+ image: onlineIcon
|
|
|
+ })
|
|
|
+ this.$offlineIcon = new AMap.Icon({
|
|
|
+ image: offlineIcon
|
|
|
+ })
|
|
|
|
|
|
- this.deviceList.forEach(
|
|
|
- ({ id, longitude, latitude, name, onlineStatus, address, mac }) => {
|
|
|
- if (longitude && latitude) {
|
|
|
- const markObj = new AMap.Marker({
|
|
|
- position: [Number(longitude), Number(latitude)],
|
|
|
- title: name,
|
|
|
- content: this.getMarkerContent(
|
|
|
+ this.deviceList.forEach(
|
|
|
+ ({ id, longitude, latitude, name, onlineStatus, address, mac }) => {
|
|
|
+ if (longitude && latitude) {
|
|
|
+ const markObj = new AMap.Marker({
|
|
|
+ position: [Number(longitude), Number(latitude)],
|
|
|
+ title: name,
|
|
|
+ content: this.getMarkerContent(
|
|
|
+ onlineStatus,
|
|
|
+ this.getMarkActive(id)
|
|
|
+ )
|
|
|
+ })
|
|
|
+ this.marks.push(markObj)
|
|
|
+ this.$deviceMap[id] = {
|
|
|
onlineStatus,
|
|
|
- this.getMarkActive(id)
|
|
|
- )
|
|
|
- })
|
|
|
- this.marks.push(markObj)
|
|
|
- this.$deviceMap[id] = {
|
|
|
- onlineStatus,
|
|
|
- markObj,
|
|
|
- address,
|
|
|
- mac
|
|
|
- }
|
|
|
- this.$alldeviceMap[id] = {
|
|
|
- onlineStatus,
|
|
|
- markObj,
|
|
|
- address,
|
|
|
- mac
|
|
|
- }
|
|
|
- } else {
|
|
|
+ markObj,
|
|
|
+ address,
|
|
|
+ mac
|
|
|
+ }
|
|
|
+ this.$alldeviceMap[id] = {
|
|
|
+ onlineStatus,
|
|
|
+ markObj,
|
|
|
+ address,
|
|
|
+ mac
|
|
|
+ }
|
|
|
+ } else {
|
|
|
/* 没有坐标，但是全局提醒警告信息只有设备id,
|
|
|
需要全部设备MAP查询 添加一些设备信息展示*/
|
|
|
- this.$alldeviceMap[id] = {
|
|
|
- onlineStatus,
|
|
|
- address,
|
|
|
- mac
|
|
|
+ this.$alldeviceMap[id] = {
|
|
|
+ onlineStatus,
|
|
|
+ address,
|
|
|
+ mac
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- )
|
|
|
- map.add(this.marks)
|
|
|
+ )
|
|
|
+ map.add(this.marks)
|
|
|
|
|
|
- const polygon = new AMap.Polygon({
|
|
|
- pathL: pathArray,
|
|
|
- strokeColor: 'transparent', // 边框线颜色
|
|
|
- strokeWeight: 0,
|
|
|
- fillColor: '#1D274B', // 遮罩图层颜色
|
|
|
- fillOpacity: 0.6
|
|
|
- })
|
|
|
+ const polygon = new AMap.Polygon({
|
|
|
+ pathL: pathArray,
|
|
|
+ strokeColor: 'transparent', // 边框线颜色
|
|
|
+ strokeWeight: 0,
|
|
|
+ fillColor: '#1D274B', // 遮罩图层颜色
|
|
|
+ fillOpacity: 0.6
|
|
|
+ })
|
|
|
|
|
|
- polygon.setPath(pathArray)
|
|
|
- map.add(polygon)
|
|
|
- // /////////////
|
|
|
- const polylines = []
|
|
|
- // 添加描边
|
|
|
- for (let i = 0; i < bounds.length; i += 1) {
|
|
|
- polylines.push(
|
|
|
- new AMap.Polyline({
|
|
|
- path: bounds[i],
|
|
|
- strokeColor: 'red',
|
|
|
- strokeWeight: 4,
|
|
|
- map
|
|
|
- })
|
|
|
- )
|
|
|
- }
|
|
|
- this.polylines = polylines
|
|
|
- this.resetView()
|
|
|
- map.on('click', () => {
|
|
|
- map.zoomIn()
|
|
|
- })
|
|
|
- polygon.on('click', () => {
|
|
|
- map.zoomIn()
|
|
|
+ polygon.setPath(pathArray)
|
|
|
+ map.add(polygon)
|
|
|
+ // /////////////
|
|
|
+ const polylines = []
|
|
|
+ // 添加描边
|
|
|
+ for (let i = 0; i < bounds.length; i += 1) {
|
|
|
+ polylines.push(
|
|
|
+ new AMap.Polyline({
|
|
|
+ path: bounds[i],
|
|
|
+ strokeColor: 'red',
|
|
|
+ strokeWeight: 4,
|
|
|
+ map
|
|
|
+ })
|
|
|
+ )
|
|
|
+ }
|
|
|
+ this.polylines = polylines
|
|
|
+ this.resetView()
|
|
|
+ map.on('click', () => {
|
|
|
+ map.zoomIn()
|
|
|
+ })
|
|
|
+ polygon.on('click', () => {
|
|
|
+ map.zoomIn()
|
|
|
+ })
|
|
|
})
|
|
|
})
|
|
|
},
|
Casper Dai