运营区后台重构接口联调
This commit is contained in:
parent
f6bb048cde
commit
835f637aad
@ -208,7 +208,8 @@
|
|||||||
</uni-drawer>
|
</uni-drawer>
|
||||||
<map :style="{width: '100%',height:height}" show-location id="mapRef" ref="mapRef" :scale="scale"
|
<map :style="{width: '100%',height:height}" show-location id="mapRef" ref="mapRef" :scale="scale"
|
||||||
:markers="markers" :longitude="mapcenter.longitude" :latitude="mapcenter.latitude" :circles="circles"
|
:markers="markers" :longitude="mapcenter.longitude" :latitude="mapcenter.latitude" :circles="circles"
|
||||||
:polygons="polygons" :polyline="polylines" @markertap="markerTap" @labeltap="markerTap" />
|
:polygons="polygons" :polyline="polylines" @markertap="markerTap" @labeltap="markerTap"
|
||||||
|
@regionchange="regionchange" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -314,12 +315,15 @@
|
|||||||
latitude: lat,
|
latitude: lat,
|
||||||
longitude: lng
|
longitude: lng
|
||||||
} = res;
|
} = res;
|
||||||
|
|
||||||
mapcenter.value = {
|
mapcenter.value = {
|
||||||
latitude: lat,
|
latitude: lat,
|
||||||
longitude: lng
|
longitude: lng
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// mapcenter.value = {
|
||||||
|
// latitude: 30.644955,
|
||||||
|
// longitude: 103.978296
|
||||||
|
// };
|
||||||
map.reverseGeocoder(qqmapsdk, lng, lat, (res) => {
|
map.reverseGeocoder(qqmapsdk, lng, lat, (res) => {
|
||||||
const {
|
const {
|
||||||
ad_info: {
|
ad_info: {
|
||||||
@ -409,7 +413,7 @@
|
|||||||
latitude,
|
latitude,
|
||||||
longitude
|
longitude
|
||||||
} = res;
|
} = res;
|
||||||
|
scale.value = 13;
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -789,6 +793,10 @@
|
|||||||
markerId
|
markerId
|
||||||
} = e.detail;
|
} = e.detail;
|
||||||
const selMarker = arrMakers[markerId];
|
const selMarker = arrMakers[markerId];
|
||||||
|
if (!selMarker) {
|
||||||
|
console.log("markerTap未找到点!")
|
||||||
|
return;
|
||||||
|
}
|
||||||
const {
|
const {
|
||||||
updatedAt,
|
updatedAt,
|
||||||
bikeCode,
|
bikeCode,
|
||||||
@ -854,6 +862,33 @@
|
|||||||
map.direction(options)
|
map.direction(options)
|
||||||
}, null, true);
|
}, null, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function regionchange(e) {
|
||||||
|
console.log("1111111111111111111111111", e)
|
||||||
|
// "centerLocation": {
|
||||||
|
// "latitude": 30.633169,
|
||||||
|
// "longitude": 103.975094
|
||||||
|
// },
|
||||||
|
// "region": {
|
||||||
|
// "southwest": {
|
||||||
|
// "latitude": 30.628234,
|
||||||
|
// "longitude": 103.971932
|
||||||
|
// },
|
||||||
|
// "northeast": {
|
||||||
|
// "latitude": 30.638104,
|
||||||
|
// "longitude": 103.978255
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
const {
|
||||||
|
type,causedBy,region
|
||||||
|
} = e.detail;
|
||||||
|
if (type != "end") return;
|
||||||
|
|
||||||
|
const minLat= region.southwest.latitude;
|
||||||
|
const maxLat= region.northeast.latitude;
|
||||||
|
const minLng=region.southwest.longitude;
|
||||||
|
const maxLng= region.northeast.longitude;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|||||||
@ -6,7 +6,7 @@ export const useSelarea = defineStore('selarea', ()=>{
|
|||||||
const setValue=(value)=>{
|
const setValue=(value)=>{
|
||||||
data.value=value;
|
data.value=value;
|
||||||
}
|
}
|
||||||
return{ value:data.value, setValue};
|
return{ value:data, setValue};
|
||||||
},{
|
},{
|
||||||
persist: true
|
persist: true
|
||||||
})
|
})
|
||||||
@ -216,21 +216,25 @@ export function getOperation(zoneId, callback) {
|
|||||||
} = res;
|
} = res;
|
||||||
if (code != 200) {
|
if (code != 200) {
|
||||||
showModelMessage(message);
|
showModelMessage(message);
|
||||||
if(callback) callback(null);
|
if (callback) callback(null);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const arrCircles = [];
|
const arrCircles = [];
|
||||||
const arrPolygons = [];
|
const arrPolygons = [];
|
||||||
const arrRegionID = [];
|
const arrRegionID = [];
|
||||||
const arrCirclesData=[];
|
const arrCirclesData = [];
|
||||||
const arrPolygonsData = [];
|
const arrPolygonsData = [];
|
||||||
data.map((item, index) => {
|
data.map((item, index) => {
|
||||||
const {
|
const {
|
||||||
shapeType,
|
shapeType,
|
||||||
regionId,
|
operationRegionId: regionId,
|
||||||
radius,
|
radius,
|
||||||
points
|
points
|
||||||
} = item;
|
} = item;
|
||||||
|
if (!points) {
|
||||||
|
console.log("getOperation坐标点未返回");
|
||||||
|
return;
|
||||||
|
}
|
||||||
arrRegionID.push(regionId);
|
arrRegionID.push(regionId);
|
||||||
const scolor = "#578FD4";
|
const scolor = "#578FD4";
|
||||||
const fcolor = "#c0daf54d";
|
const fcolor = "#c0daf54d";
|
||||||
@ -254,20 +258,24 @@ export function getOperation(zoneId, callback) {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
if(callback) callback({
|
if (callback) {
|
||||||
arrRegionID,
|
const resData = {
|
||||||
arrCircles,
|
arrRegionID,
|
||||||
arrPolygons,
|
arrCircles,
|
||||||
arrData: data,
|
arrPolygons,
|
||||||
arrCirclesData,
|
arrData: data,
|
||||||
arrPolygonsData
|
arrCirclesData,
|
||||||
});
|
arrPolygonsData
|
||||||
|
}
|
||||||
|
console.log("000000000000000000000000", resData);
|
||||||
|
callback(resData);
|
||||||
|
}
|
||||||
|
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
//站点、停车区
|
//站点、停车区
|
||||||
export function getRegionData (arrRegionID, callback) {
|
export function getRegionData(arrRegionID, callback) {
|
||||||
if (!arrRegionID || arrRegionID.length == 0) return;
|
if (!arrRegionID || arrRegionID.length == 0) return;
|
||||||
const arrMethods = [];
|
const arrMethods = [];
|
||||||
arrRegionID.map(regionId => {
|
arrRegionID.map(regionId => {
|
||||||
@ -281,7 +289,7 @@ export function getRegionData (arrRegionID, callback) {
|
|||||||
const arrCircles = [];
|
const arrCircles = [];
|
||||||
const arrPolygons = [];
|
const arrPolygons = [];
|
||||||
const arrData = [];
|
const arrData = [];
|
||||||
const arrCirclesData=[];
|
const arrCirclesData = [];
|
||||||
const arrPolygonsData = [];
|
const arrPolygonsData = [];
|
||||||
res.map(item => {
|
res.map(item => {
|
||||||
const {
|
const {
|
||||||
@ -305,7 +313,7 @@ export function getRegionData (arrRegionID, callback) {
|
|||||||
longitude: lng,
|
longitude: lng,
|
||||||
latitude: lat
|
latitude: lat
|
||||||
} = points[0];
|
} = points[0];
|
||||||
arrCircles.push(addCirle(scolor, fcolor, lng, lat,radius));
|
arrCircles.push(addCirle(scolor, fcolor, lng, lat, radius));
|
||||||
arrCirclesData.push(data);
|
arrCirclesData.push(data);
|
||||||
} else if (shapeType == 2) {
|
} else if (shapeType == 2) {
|
||||||
const arrPoint = points.map(p => {
|
const arrPoint = points.map(p => {
|
||||||
@ -322,7 +330,9 @@ export function getRegionData (arrRegionID, callback) {
|
|||||||
if (callback) callback({
|
if (callback) callback({
|
||||||
arrData,
|
arrData,
|
||||||
arrCircles,
|
arrCircles,
|
||||||
arrPolygons
|
arrPolygons,
|
||||||
|
arrCirclesData,
|
||||||
|
arrPolygonsData
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -470,31 +480,100 @@ export function direction({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 几何中心计算算法(适用于任意多边形)
|
// 几何中心计算算法(适用于任意多边形)
|
||||||
export function getPolygonCenter(points) {
|
export function getPolygonCenter(points) {
|
||||||
let X = 0, Y = 0, Z = 0;
|
let X = 0,
|
||||||
const pointCount = points.length;
|
Y = 0,
|
||||||
|
Z = 0;
|
||||||
points.forEach(point => {
|
const pointCount = points.length;
|
||||||
const lat = point.latitude * Math.PI / 180;
|
|
||||||
const lng = point.longitude * Math.PI / 180;
|
points.forEach(point => {
|
||||||
const x = Math.cos(lat) * Math.cos(lng);
|
const lat = point.latitude * Math.PI / 180;
|
||||||
const y = Math.cos(lat) * Math.sin(lng);
|
const lng = point.longitude * Math.PI / 180;
|
||||||
const z = Math.sin(lat);
|
const x = Math.cos(lat) * Math.cos(lng);
|
||||||
|
const y = Math.cos(lat) * Math.sin(lng);
|
||||||
X += x;
|
const z = Math.sin(lat);
|
||||||
Y += y;
|
|
||||||
Z += z;
|
X += x;
|
||||||
});
|
Y += y;
|
||||||
|
Z += z;
|
||||||
X /= pointCount;
|
});
|
||||||
Y /= pointCount;
|
|
||||||
Z /= pointCount;
|
X /= pointCount;
|
||||||
|
Y /= pointCount;
|
||||||
const lng = Math.atan2(Y, X);
|
Z /= pointCount;
|
||||||
const lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
|
|
||||||
|
const lng = Math.atan2(Y, X);
|
||||||
return {
|
const lat = Math.atan2(Z, Math.sqrt(X * X + Y * Y));
|
||||||
lat: lat * 180 / Math.PI,
|
|
||||||
lng: lng * 180 / Math.PI
|
return {
|
||||||
};
|
lat: lat * 180 / Math.PI,
|
||||||
|
lng: lng * 180 / Math.PI
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 工具函数:将像素坐标转换为经纬度
|
||||||
|
function pixelToLatLng(map, x, y) {
|
||||||
|
// return new Promise((resolve) => {
|
||||||
|
// map.getCenterLocation({
|
||||||
|
// success: (res) => {
|
||||||
|
// const center = { lat: res.latitude, lng: res.longitude };
|
||||||
|
// const scale = map.scale;
|
||||||
|
// const pixelWidth = 256 * Math.pow(2, (18 - scale)); // 缩放级别对应的像素宽度
|
||||||
|
// const latOffset = (y - map.height / 2) * (180 / (256 * Math.pow(2, scale))) / 3600;
|
||||||
|
// const lngOffset = (x - map.width / 2) * (180 / (256 * Math.pow(2, scale))) / 3600;
|
||||||
|
// resolve({
|
||||||
|
// latitude: center.lat + latOffset,
|
||||||
|
// longitude: center.lng + lngOffset
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算可视区域四个角点
|
||||||
|
export function calculateVisibleBounds(map) {
|
||||||
|
map.getScale((res) => {
|
||||||
|
console.log("00000000000000000000", res)
|
||||||
|
})
|
||||||
|
|
||||||
|
// const topLeft = await pixelToLatLng(map, 0, 0);
|
||||||
|
// const topRight = await pixelToLatLng(map, width, 0);
|
||||||
|
// const bottomLeft = await pixelToLatLng(map, 0, height);
|
||||||
|
// const bottomRight = await pixelToLatLng(map, width, height);
|
||||||
|
|
||||||
|
// return {
|
||||||
|
// minLat: Math.min(topLeft.latitude, bottomLeft.latitude),
|
||||||
|
// maxLat: Math.max(topRight.latitude, bottomRight.latitude),
|
||||||
|
// minLng: Math.min(topLeft.longitude, topRight.longitude),
|
||||||
|
// maxLng: Math.max(bottomLeft.longitude, bottomRight.longitude)
|
||||||
|
// };
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断点是否在多边形内(射线法)
|
||||||
|
export function checkPointInPolygon(longitude, latitude, polygon) {
|
||||||
|
let x = longitude,
|
||||||
|
y = latitude;
|
||||||
|
let inside = false;
|
||||||
|
for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
|
||||||
|
const xi = polygon[i].longitude,
|
||||||
|
yi = polygon[i].latitude;
|
||||||
|
const xj = polygon[j].longitude,
|
||||||
|
yj = polygon[j].latitude;
|
||||||
|
|
||||||
|
// 检测边是否跨过射线
|
||||||
|
const intersect = ((yi > y) !== (yj > y)) &&
|
||||||
|
(x < (xj - xi) * (y - yi) / (yj - yi) + xi);
|
||||||
|
if (intersect) inside = !inside;
|
||||||
|
}
|
||||||
|
return inside;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 判断点(x,y)是否在圆心(cx,cy)半径r的圆内
|
||||||
|
export function isPointInCircle(longitude, latitude, center, radius) {
|
||||||
|
debugger;
|
||||||
|
const dx = longitude - center.lng; // 经度差
|
||||||
|
const dy = latitude - center.lat; // 纬度差
|
||||||
|
const distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
return distance <= radius;
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user