地图设备页面bug修改
This commit is contained in:
parent
21081b8618
commit
345a9cee1b
|
|
@ -102,7 +102,7 @@
|
|||
<script>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import globalConfig from "@/utils/config/globalConfig";
|
||||
import { getDevice, listDevice,getDeviceLists} from '@/api/system/device'
|
||||
import { getDevice, getDeviceLists ,listDevice} from '@/api/system/device'
|
||||
import { listArea, optionselect as getAreaOptionselect } from '@/api/system/area'
|
||||
import { listParking } from '@/api/system/parking'
|
||||
import LocationMap from '@/components/Map/location/LocationMap'
|
||||
|
|
@ -137,17 +137,17 @@ function formarStatus(status, onlineStatus) {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "map-view",
|
||||
components: { OrderRecord, RepairRecord, ReplacementRecord, QrCode, LocationMap },
|
||||
data() {
|
||||
return {
|
||||
AMap: null,
|
||||
map: null, // 地图实例
|
||||
map: null,
|
||||
markers: [],
|
||||
labels: [],
|
||||
tips: null,
|
||||
// 运营区表格数据
|
||||
areaList: [],
|
||||
userName: undefined,
|
||||
lon: null,
|
||||
|
|
@ -162,21 +162,18 @@ export default {
|
|||
cluster: null,
|
||||
data: [],
|
||||
show: false,
|
||||
// 详情窗口
|
||||
open2: false,
|
||||
// 表单参数
|
||||
form: {},
|
||||
areaId: 14,
|
||||
areaOptions: [],
|
||||
infoWindow: null,
|
||||
// 设备表格数据
|
||||
deviceList: [],
|
||||
onDeviceList: [],
|
||||
parkingList: [],
|
||||
noParkingList: [],
|
||||
noridingList: [],
|
||||
type: null,
|
||||
showmap:true,
|
||||
showmap: true,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -189,32 +186,33 @@ export default {
|
|||
this.map?.destroy();
|
||||
},
|
||||
methods: {
|
||||
async handleAreaChange(newAreaId) {
|
||||
console.log('newAreaId:', newAreaId);
|
||||
|
||||
// 更新 areaId 并清空之前的列表数据
|
||||
this.areaId = newAreaId;
|
||||
this.onDeviceList = [];
|
||||
this.parkingList = [];
|
||||
this.noParkingList = [];
|
||||
this.noridingList = [];
|
||||
this.deviceList=[]
|
||||
// 销毁当前地图实例
|
||||
// if (this.map) {
|
||||
// this.map.destroy();
|
||||
// this.map = null;
|
||||
// }
|
||||
this.showmap=false
|
||||
// 重新获取区域列表并初始化地图
|
||||
await this.getAreaList(this.areaId);
|
||||
|
||||
async handleAreaChange(newAreaId) {
|
||||
console.log('newAreaId:', newAreaId);
|
||||
|
||||
this.areaId = newAreaId;
|
||||
this.onDeviceList = [];
|
||||
this.parkingList = [];
|
||||
this.noParkingList = [];
|
||||
this.noridingList = [];
|
||||
this.deviceList = [];
|
||||
this.showmap = false;
|
||||
|
||||
if (this.map) {
|
||||
this.map.destroy();
|
||||
this.map = null;
|
||||
this.cluster = null;
|
||||
}
|
||||
|
||||
await this.getAreaList(this.areaId);
|
||||
},
|
||||
|
||||
getAreaOptions() {
|
||||
getAreaOptionselect().then(response => {
|
||||
this.areaOptions = response.data;
|
||||
console.log("areaOptions", this.areaOptions)
|
||||
});
|
||||
},
|
||||
|
||||
onMapGeo(data, lat, lng) {
|
||||
console.log("onMapGeo", data)
|
||||
let component = data.regeocode.addressComponent;
|
||||
|
|
@ -228,6 +226,7 @@ export default {
|
|||
name: component.street + component.streetNumber
|
||||
}
|
||||
},
|
||||
|
||||
onSelectChange(addr) {
|
||||
console.log("onSelectChange", addr)
|
||||
let data = addr.selected.data;
|
||||
|
|
@ -241,22 +240,18 @@ export default {
|
|||
name: data.address + data.name,
|
||||
}
|
||||
},
|
||||
|
||||
handleSelect(key, keyPath) {
|
||||
this.activeIndex = key;
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
|
||||
showMarkers() {
|
||||
if (this.show) {
|
||||
// this.markers.forEach(marker => {
|
||||
// marker.show();
|
||||
// });
|
||||
this.labels.forEach(label => {
|
||||
label.show();
|
||||
});
|
||||
} else {
|
||||
// this.markers.forEach(marker => {
|
||||
// marker.hide();
|
||||
// });
|
||||
this.labels.forEach(label => {
|
||||
label.hide();
|
||||
});
|
||||
|
|
@ -267,16 +262,16 @@ export default {
|
|||
element.style.visibility = this.show ? 'hidden' : 'visible';
|
||||
});
|
||||
},
|
||||
|
||||
async getAreaList(areaId) {
|
||||
listArea({ areaId: areaId }).then(response => {
|
||||
this.areaList = response.rows;
|
||||
if (this.areaList.length > 0) { // 确保数组不为空
|
||||
const firstArea = this.areaList[0]; // 获取第一个元素
|
||||
if (this.areaList.length > 0) {
|
||||
const firstArea = this.areaList[0];
|
||||
this.area = firstArea;
|
||||
// console.log('第一个区域的信息:', firstArea);
|
||||
this.lon = firstArea.longitude;
|
||||
this.lat = firstArea.latitude;
|
||||
// console.log("area=============" + JSON.stringify(this.area))
|
||||
|
||||
listParking({ areaId: this.area.areaId }).then(response => {
|
||||
let list = response.rows;
|
||||
list.forEach(item => {
|
||||
|
|
@ -288,123 +283,106 @@ export default {
|
|||
this.noridingList.push(item);
|
||||
}
|
||||
});
|
||||
// console.log("parkingList=============" + JSON.stringify(this.parkingList));
|
||||
// console.log("noParkingList=============" + JSON.stringify(this.noParkingList));
|
||||
// console.log("noriding=============" + JSON.stringify(this.noridingList));
|
||||
setTimeout(() => {
|
||||
this.showmap=true
|
||||
|
||||
setTimeout(() => {
|
||||
this.showmap = true;
|
||||
this.initAMap();
|
||||
}, 300);
|
||||
|
||||
});
|
||||
} else {
|
||||
console.log('区域列表为空');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
changeMapStyle() {
|
||||
// 创建一个默认的图层组件
|
||||
let defaultLayer = new AMap.TileLayer();
|
||||
// 创建一个卫星图图层组件
|
||||
let satelliteLayer = new AMap.TileLayer.Satellite();
|
||||
let roadNetLayer = new AMap.TileLayer.RoadNet();
|
||||
// 将默认图层添加到地图中
|
||||
|
||||
this.map.add(defaultLayer);
|
||||
// 获取当前地图显示的图层
|
||||
let currentLayer = this.map.getLayers()[0]; // 假设默认图层在第一个位置
|
||||
// 切换图层
|
||||
let currentLayer = this.map.getLayers()[0];
|
||||
if (this.type == 'default') {
|
||||
console.log(1111111)
|
||||
//获取地图图层数据
|
||||
this.map.setLayers([defaultLayer]); // 切换回默认图层
|
||||
this.map.setLayers([defaultLayer]);
|
||||
this.type = 'Satellite';
|
||||
} else {
|
||||
console.log(222222)
|
||||
this.map.setLayers([satelliteLayer, roadNetLayer]); // 切换到卫星图图层
|
||||
this.map.setLayers([satelliteLayer, roadNetLayer]);
|
||||
this.type = 'default';
|
||||
}
|
||||
},
|
||||
|
||||
setFitView() {
|
||||
this.map.setFitView(null, false, [150, 60, 100, 60]);
|
||||
},
|
||||
initAMap() {
|
||||
|
||||
initAMap() {
|
||||
AMapLoader.load({
|
||||
key: globalConfig.aMap.key, // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
key: globalConfig.aMap.key,
|
||||
version: "2.0",
|
||||
}).then((AMap) => {
|
||||
this.map = new AMap.Map("container", {
|
||||
// 设置地图容器id
|
||||
viewMode: "3D", // 是否为3D地图模式
|
||||
zoom: 13, // 初始化地图级别
|
||||
center: [this.lon, this.lat], //初始化地图中心点位置
|
||||
viewMode: "3D",
|
||||
zoom: 13,
|
||||
center: [this.lon, this.lat],
|
||||
});
|
||||
// 创建信息窗体
|
||||
|
||||
this.infoWindow = new AMap.InfoWindow({
|
||||
offset: new AMap.Pixel(0, -30)
|
||||
offset: new AMap.Pixel(0, -30),
|
||||
});
|
||||
//设备点标记
|
||||
console.log("this.areaId=============" + this.areaId)
|
||||
|
||||
this.deviceMarker(this.areaId);
|
||||
//运营区边界
|
||||
|
||||
this.areaList.forEach(area => {
|
||||
this.addArea(JSON.parse(area.boundaryStr) || []);
|
||||
});
|
||||
//停车区
|
||||
|
||||
this.parkingList.forEach(parking => {
|
||||
this.addParking(JSON.parse(parking.boundaryStr) || [], parking.parkingName, parking.longitude, parking.latitude);
|
||||
this.addMarker2(parking, "https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh", parking.parkingName, "#1890ff");
|
||||
});
|
||||
//禁停区
|
||||
|
||||
this.noParkingList.forEach(noparking => {
|
||||
this.addNoParking(JSON.parse(noparking.boundaryStr) || []);
|
||||
this.addMarker2(noparking, "https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab", noparking.parkingName, "#ff4444");
|
||||
});
|
||||
//禁行区
|
||||
|
||||
this.noridingList.forEach(noriding => {
|
||||
this.addNoriding(JSON.parse(noriding.boundaryStr) || [], noriding.parkingName, noriding.longitude, noriding.latitude);
|
||||
this.addMarker2(noriding, "https://lxnapi.ccttiot.com/FmX1diEPPbFYe1vcUfKp6qbKzzh2", noriding.parkingName, "#ffcc00");
|
||||
});
|
||||
// setTimeout(() => {
|
||||
// this.setFitView();
|
||||
// }, 2000);
|
||||
|
||||
}).catch((e) => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
// 刷新点标记
|
||||
|
||||
freshMarker(points) {
|
||||
let that = this;
|
||||
|
||||
console.log("刷新点标记====", points)
|
||||
console.log("刷新点标记====", points);
|
||||
|
||||
// 检查 points 数据格式
|
||||
if (!Array.isArray(points)) {
|
||||
console.error("Points data is not an array");
|
||||
return;
|
||||
}
|
||||
console.log("this.cluster=======", this.cluster)
|
||||
|
||||
// 聚合对象存在，则修改数据
|
||||
if (this.cluster) {
|
||||
console.log('加载了');
|
||||
try {
|
||||
this.cluster.setData(points);
|
||||
} catch (error) {
|
||||
console.error("Error setting cluster data: ", error);
|
||||
}
|
||||
} else {
|
||||
// 插件未加载的情况
|
||||
this.map.plugin(["AMap.MarkerCluster"], () => {
|
||||
that.cluster = new AMap.MarkerCluster(
|
||||
this.map, //地图实例
|
||||
points, //海量点数据，数据中需包含经纬度信息字段 lnglat
|
||||
this.map,
|
||||
points,
|
||||
{
|
||||
styles: this.getStyles(),
|
||||
renderMarker: this.getRenderMarker, //上述步骤的自定义非聚合点样式
|
||||
renderMarker: this.getRenderMarker,
|
||||
}
|
||||
);
|
||||
// 检查 cluster 对象是否正确初始化
|
||||
|
||||
if (that.cluster) {
|
||||
console.log("Cluster 初始化成功");
|
||||
that.cluster.on('click', that.onClickCluster);
|
||||
|
|
@ -414,18 +392,17 @@ export default {
|
|||
});
|
||||
}
|
||||
},
|
||||
// 点击聚合对象事件
|
||||
|
||||
onClickCluster(e) {
|
||||
console.log("点击聚合点====", e)
|
||||
this.onDeviceList = e.clusterData.map(item => item);
|
||||
// 如果数量 > 1，则打开列表页
|
||||
if (this.onDeviceList.length > 1) {
|
||||
console.log("打开列表====", this.onDeviceList)
|
||||
let content = this.generateInfoContent(this.onDeviceList);
|
||||
this.infoWindow.setContent(content);
|
||||
this.infoWindow.open(this.map, e.lnglat);
|
||||
}
|
||||
},
|
||||
|
||||
generateInfoContent(data) {
|
||||
let content = `<div style="max-hight: 500px; overflow-y: auto;">
|
||||
<table class="info-table">
|
||||
|
|
@ -489,30 +466,32 @@ export default {
|
|||
|
||||
return content;
|
||||
},
|
||||
|
||||
handleInfoWindowClick(event) {
|
||||
console.log("点击详情按钮====", event)
|
||||
|
||||
console.log("点击详情按钮====", event);
|
||||
|
||||
const button = event.target.closest('.detail-btn');
|
||||
if (button) {
|
||||
const deviceId = button.getAttribute('data-device-id');
|
||||
this.onClickMarker(deviceId);
|
||||
}
|
||||
},
|
||||
// 自定义非聚合点样式
|
||||
|
||||
getRenderMarker(context) {
|
||||
console.log('调用了 getRenderMarker');
|
||||
let device = context.data[0];
|
||||
let content = `
|
||||
<div class="apiary-marker">
|
||||
<div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
|
||||
<image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
|
||||
</div>
|
||||
`
|
||||
<div class="apiary-marker">
|
||||
<div style="visibility: ${this.show ? 'hidden' : 'visible'};" class="apiary-marker-name">${device.vehicleNum}</div>
|
||||
<image class="apiary-marker-img" src='${formarStatus(device.status, device.onlineStatus)}'/>
|
||||
</div>
|
||||
`;
|
||||
context.marker.setContent(content);
|
||||
context.marker.on("click", () => this.onClickMarker(device.deviceId));
|
||||
},
|
||||
// 点击非聚合点事件
|
||||
|
||||
onClickMarker(deviceId) {
|
||||
console.log("点击非聚合点====", deviceId)
|
||||
console.log("点击非聚合点====", deviceId);
|
||||
getDevice(deviceId).then(response => {
|
||||
this.open2 = true;
|
||||
this.form = response.data;
|
||||
|
|
@ -520,8 +499,9 @@ export default {
|
|||
this.key++;
|
||||
});
|
||||
},
|
||||
|
||||
openDetail(deviceId) {
|
||||
console.log("点击非聚合点====", deviceId)
|
||||
console.log("点击非聚合点====", deviceId);
|
||||
getDevice(deviceId).then(response => {
|
||||
this.open2 = true;
|
||||
this.form = response.data;
|
||||
|
|
@ -529,38 +509,34 @@ export default {
|
|||
this.key++;
|
||||
});
|
||||
},
|
||||
|
||||
getStyles() {
|
||||
return [
|
||||
{
|
||||
//聚合量在1-10时，聚合点的样式
|
||||
url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
|
||||
size: new AMap.Size(32, 32), //图标显示图片的大小
|
||||
offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
|
||||
textColor: "#fff", //文字的颜色
|
||||
url: "//a.amap.com/jsapi_demos/static/images/blue.png",
|
||||
size: new AMap.Size(32, 32),
|
||||
offset: new AMap.Pixel(-16, -16),
|
||||
textColor: "#fff",
|
||||
},
|
||||
{
|
||||
//聚合量在11-100时，聚合点的样式
|
||||
url: "//a.amap.com/jsapi_demos/static/images/green.png",
|
||||
size: new AMap.Size(32, 32),
|
||||
offset: new AMap.Pixel(-16, -16),
|
||||
textColor: "#fff",
|
||||
},
|
||||
{
|
||||
//聚合量在101-1000时，聚合点的样式
|
||||
url: "//a.amap.com/jsapi_demos/static/images/orange.png",
|
||||
size: new AMap.Size(36, 36),
|
||||
offset: new AMap.Pixel(-18, -18),
|
||||
textColor: "#fff"
|
||||
},
|
||||
{
|
||||
//聚合量在1001-10000时，聚合点的样式
|
||||
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
||||
size: new AMap.Size(48, 48),
|
||||
offset: new AMap.Pixel(-24, -24),
|
||||
textColor: "#fff"
|
||||
},
|
||||
{
|
||||
//聚合量在10001-100000时，聚合点的样式
|
||||
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
||||
size: new AMap.Size(48, 48),
|
||||
offset: new AMap.Pixel(-24, -24),
|
||||
|
|
@ -568,13 +544,14 @@ export default {
|
|||
},
|
||||
]
|
||||
},
|
||||
|
||||
addMarker2(parking, icon, title, color) {
|
||||
let marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
icon: new AMap.Icon({
|
||||
image: icon,
|
||||
size: new AMap.Size(25, 36), // 设置图标的宽高
|
||||
imageSize: new AMap.Size(25, 36) // 设置图标的实际显示尺寸
|
||||
size: new AMap.Size(25, 36),
|
||||
imageSize: new AMap.Size(25, 36)
|
||||
}),
|
||||
position: [parking.longitude, parking.latitude],
|
||||
offset: new AMap.Pixel(-12.5, -36)
|
||||
|
|
@ -582,36 +559,32 @@ export default {
|
|||
|
||||
this.markers.push(marker);
|
||||
|
||||
// console.log("title============="+title)
|
||||
// 创建一个 Text 实例来显示标题
|
||||
let text = new AMap.Text({
|
||||
text: title,
|
||||
anchor: 'center', // 设置文本的锚点
|
||||
anchor: 'center',
|
||||
position: [parking.longitude, parking.latitude],
|
||||
offset: new AMap.Pixel(0, -50),
|
||||
style: {
|
||||
'background-color': color, // 背景颜色为蓝色
|
||||
'border': 'none', // 边框颜色与背景一致
|
||||
'border-radius': '5px', // 圆角 5px
|
||||
'color': 'white', // 文字颜色为白色
|
||||
'font-size': '12px', // 字体大小
|
||||
'background-color': color,
|
||||
'border': 'none',
|
||||
'border-radius': '5px',
|
||||
'color': 'white',
|
||||
'font-size': '12px',
|
||||
}
|
||||
});
|
||||
|
||||
// 将文本标签添加到地图实例
|
||||
this.map.add(text);
|
||||
// console.log("text=============",text)
|
||||
this.labels.push(text)
|
||||
this.labels.push(text);
|
||||
},
|
||||
|
||||
deviceMarker(areaId) {
|
||||
this.data = [];
|
||||
console.log(areaId,'areaIdareaId');
|
||||
getDeviceLists(areaId).then(response => {
|
||||
this.deviceList = response.data;
|
||||
listDevice({ pageNum: 1, pageSize: 999, areaId: areaId }).then(response => {
|
||||
// getDeviceLists(areaId).then(response => {
|
||||
this.deviceList = response.rows;
|
||||
this.deviceList.forEach(device => {
|
||||
// 检查经纬度是否为空且为有效数字
|
||||
if (device.longitude !== null && device.latitude !== null &&
|
||||
!isNaN(device.longitude) && !isNaN(device.latitude)) {
|
||||
!isNaN(device.longitude) && !isNaN(device.latitude)) {
|
||||
this.data.push({
|
||||
lnglat: [device.longitude, device.latitude],
|
||||
status: device.status,
|
||||
|
|
@ -620,24 +593,50 @@ export default {
|
|||
vehicleNum: device.vehicleNum,
|
||||
deviceId: device.deviceId
|
||||
});
|
||||
this.addMarker(device.longitude, device.latitude, device.status, device.onlineStatus,device.sn);
|
||||
} else {
|
||||
console.warn(`无效的经纬度值: 经度=${device.longitude}, 纬度=${device.latitude}`);
|
||||
}
|
||||
});
|
||||
// 将所有标记添加到聚合器中
|
||||
console.log(this.data,'this.datathis.datathis.data');
|
||||
this.freshMarker(this.data);
|
||||
}).catch(error => {
|
||||
console.error('获取设备列表失败:', error);
|
||||
});
|
||||
},
|
||||
|
||||
addMarker(lng, lat, status, onlineStatus, title) {
|
||||
|
||||
let marker = new AMap.Marker({
|
||||
map: this.map,
|
||||
icon: new AMap.Icon({
|
||||
image: icon,
|
||||
size: new AMap.Size(25, 36),
|
||||
imageSize: new AMap.Size(25, 36)
|
||||
}),
|
||||
position: [lng, lat],
|
||||
offset: new AMap.Pixel(-12.5, -36)
|
||||
});
|
||||
|
||||
this.markers.push(marker);
|
||||
|
||||
let text = new AMap.Text({
|
||||
text: title,
|
||||
anchor: 'center',
|
||||
position: [lng, lat],
|
||||
offset: new AMap.Pixel(0, -50),
|
||||
style: {
|
||||
'background-color': 'color',
|
||||
'border': 'none',
|
||||
'border-radius': '5px',
|
||||
'color': 'white',
|
||||
'font-size': '12px',
|
||||
}
|
||||
});
|
||||
|
||||
this.map.add(text);
|
||||
this.labels.push(text);
|
||||
},
|
||||
|
||||
//添加运营区边界
|
||||
addArea(data) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
|
|
@ -649,78 +648,69 @@ export default {
|
|||
strokeStyle: 'dashed',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
// polygon.on('mouseover', () => {
|
||||
// polygon.setOptions({
|
||||
// fillOpacity: 0.7,
|
||||
// fillColor: '#7bccc4'
|
||||
// })
|
||||
// })
|
||||
// polygon.on('mouseout', () => {
|
||||
// polygon.setOptions({
|
||||
// fillOpacity: 0.5,
|
||||
// fillColor: '#ccebc5'
|
||||
// })
|
||||
// })
|
||||
this.map.add(polygon);
|
||||
},
|
||||
|
||||
addParking(data, title, lon, lat) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#3b7ed9', // 修改边界颜色为红色
|
||||
strokeWeight: 2, // 加粗边界
|
||||
strokeColor: '#3b7ed9',
|
||||
strokeWeight: 2,
|
||||
strokeStyle: 'solid',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
polygon.on('mouseover', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.7,
|
||||
fillColor: '#71b7cc' // 鼠标悬浮时填充颜色为红色
|
||||
fillColor: '#71b7cc'
|
||||
});
|
||||
});
|
||||
polygon.on('mouseout', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.5,
|
||||
fillColor: '#a7c1d0' // 鼠标移出时恢复填充颜色
|
||||
fillColor: '#a7c1d0'
|
||||
});
|
||||
});
|
||||
this.map.add(polygon);
|
||||
},
|
||||
|
||||
addNoParking(data) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#ff0000', // 修改边界颜色为红色
|
||||
strokeWeight: 2, // 加粗边界
|
||||
strokeColor: '#ff0000',
|
||||
strokeWeight: 2,
|
||||
strokeStyle: 'solid',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
polygon.on('mouseover', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.7,
|
||||
fillColor: '#ff0000' // 鼠标悬浮时填充颜色为红色
|
||||
fillColor: '#ff0000'
|
||||
});
|
||||
});
|
||||
polygon.on('mouseout', () => {
|
||||
polygon.setOptions({
|
||||
fillOpacity: 0.5,
|
||||
fillColor: '#cc7b7b' // 鼠标移出时恢复填充颜色
|
||||
fillColor: '#cc7b7b'
|
||||
});
|
||||
});
|
||||
this.map.add(polygon);
|
||||
},
|
||||
|
||||
addNoriding(data, title, lon, lat) {
|
||||
let polygon = new AMap.Polygon({
|
||||
path: data,
|
||||
fillColor: '#ccebc5',
|
||||
strokeOpacity: 1,
|
||||
fillOpacity: 0.5,
|
||||
strokeColor: '#ffcc00', // 修改边界颜色为红色
|
||||
strokeWeight: 2, // 加粗边界
|
||||
strokeColor: '#ffcc00',
|
||||
strokeWeight: 2,
|
||||
strokeStyle: 'solid',
|
||||
strokeDasharray: [5, 5],
|
||||
});
|
||||
|
|
@ -741,6 +731,7 @@ export default {
|
|||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#container {
|
||||
width: 100%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user