hookehuyr

api联调

......@@ -2,7 +2,7 @@
VITE_PORT = 8006
# 反向代理服务器地址
VITE_PROXY_TARGET = http://voice.onwall.cn
VITE_PROXY_TARGET = https://oa-dev.onwall.cn
# API请求前缀
VITE_PROXY_PREFIX = /srv/
......
/*
* @Date: 2023-05-29 11:10:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-07 10:51:28
* @FilePath: /map-demo/src/api/common.js
* @Description: 文件描述
*/
/*
* @Date: 2022-06-17 14:54:29
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-18 22:18:46
......
import { fn, fetch } from '@/api/fn';
const Api = {
MAP: '/srv/?a=map',
};
export const mapAPI = (params) => fn(fetch.get(Api.MAP, params));
/*
* @Date: 2023-06-30 16:48:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-05 10:52:36
* @LastEditTime: 2023-07-07 07:50:10
* @FilePath: /map-demo/src/common/max.js
* @Description: 文件描述
*/
......
......@@ -2,8 +2,8 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-28 10:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-30 01:30:26
* @FilePath: /tswj/src/utils/axios.js
* @LastEditTime: 2023-07-07 11:09:02
* @FilePath: /map-demo/src/utils/axios.js
* @Description:
*/
import axios from 'axios';
......@@ -13,7 +13,7 @@ import { strExist } from '@/utils/tools'
// import { parseQueryString } from '@/utils/tools'
axios.defaults.params = {
f: 'voice',
f: 'tools',
};
/**
......
<!--
* @Date: 2023-05-29 11:10:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-07 11:05:35
* @FilePath: /map-demo/src/views/auth.vue
* @Description: 文件描述
-->
<template>
<div />
</template>
......@@ -17,7 +24,7 @@ onMounted(() => {
*/
let raw_url = encodeURIComponent(location.origin + location.pathname + $route.query.href); // 未授权的地址
// TAG: 开发环境测试数据
const short_url = `/srv/?f=voice&a=openid_${$route.query.prefixAPI}&res=${raw_url}`;
const short_url = `/srv/?f=tools&a=openid_${$route.query.prefixAPI}&res=${raw_url}`;
location.href = import.meta.env.DEV
? `${short_url}&input_openid=${import.meta.env.VITE_OPENID}`
: `${short_url}`;
......
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-05 17:05:08
* @LastEditTime: 2023-07-07 13:25:46
* @FilePath: /map-demo/src/views/index.vue
* @Description: 地图主体页面
-->
......@@ -101,6 +101,8 @@ import InfoWindowWarn from '@/components/InfoWindowWarn'
import audioBackground from '@/components/audioBackground'
import { useRect } from '@vant/use';
import { mapAPI } from '@/api/map.js'
const GPS = {
PI: 3.14159265358979324,
x_pi: 3.14159265358979324 * 3000.0 / 180.0,
......@@ -222,14 +224,67 @@ export default {
}
},
defaultZoom: 18,
defaultCenter: [120.587382, 31.313900]
defaultCenter: [120.587382, 31.313900],
mapTiles: []
}
},
mounted() {
// console.log(this.$route.query);
this.navBarList = map_max; // 底部导航条
this.navKey = map_max[0]['key']; // 默认选中 第一个 key
this.navList = map_max.filter(item => item.key === this.navKey)[0]['entity_info']; // 返回默认选中项的实体信息
async mounted() {
const code = this.$route.query.id;
// const code = '362800';
const { data } = await mapAPI({i: code});
const temp = {
id: 'warn',
name: '预警',
icon: [
'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
'https://cdn.ipadbiz.cn/xys/map/%E7%BA%BF%E8%B7%AF@2x.png',
],
list: [
{
name: '预警演示1',
position: [120.58704, 31.313773],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
name: '预警演示',
code: 'Y0218',
note: '烟感异常',
status: '异常',
datetime: '2021-12-22 16:39:42',
cctv_url: '', // 监控链接
case_url: '1', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'warn',
},
{
name: '预警演示2',
position: [120.588012, 31.314519],
icon: 'https://cdn.ipadbiz.cn/xys/map/%E5%BC%82%E5%B8%B802@2x.png',
details: [
{
name: '预警演示',
code: 'Y0218',
note: '烟感异常',
status: '异常',
datetime: '2021-12-22 16:39:42',
cctv_url: '', // 监控链接
case_url: '1', // 预案链接
notice_url: '1', // 通知链接
handle_url: '1', // 处理链接
},
],
window_type: 'warn',
},
],
}
data.list = data.list.concat(temp);
this.navBarList = data.list; // 底部导航条
this.mapTiles = data.level; // 获取图层
this.navKey = data.list[0]['id']; // 默认选中 第一个 id
this.navList = data.list.filter(item => item.id === this.navKey)[0]['list']; // 返回默认选中项的实体信息
// 初始化地图
this.initMap();
// this.setMapBoundary();
......@@ -305,11 +360,11 @@ export default {
//
this.map.setRotation(6, true);
},
setNavLayer({ key }, index) { // 选择地图图层显示
setNavLayer({ id }, index) { // 选择地图图层显示
this.isActive = index;
this.navList = map_max.filter(item => item.key === key)[0]['entity_info']; // 返回默认选中项的实体信息
this.navList = this.navBarList.filter(item => item.id === id)[0]['list']; // 返回默认选中项的实体信息
this.removeLayer();
this.loadMaker(key);
this.loadMaker(id);
this.closeInfoWindow();
setTimeout(() => {
// 地图zooms调整
......@@ -318,9 +373,9 @@ export default {
}, 100);
this.removeNavRoute();
},
loadMaker (key) {
loadMaker (id) {
var zoomStyleMapping = { 14: 0, 15: 0, 16: 0, 17: 0, 18: 0, 19: 0, 20: 0 };
const entity_info = this.navBarList.filter(item => item.key === key)[0]['entity_info'];
const entity_info = this.navBarList.filter(item => item.id === id)[0]['list'];
this.markerSum = [];
_.each(entity_info, (x, i) => {
var marker = new AMap.ElasticMarker({
......@@ -572,8 +627,12 @@ export default {
this.show_walk_route = true;
},
computedMapSource(x, y, z) { // 根据图层信息生成图层实际地址
// TODO:等待正式映射图层真实的地址
return `images/tiles/${z}/${x}_${y}.png`
for (const id in this.mapTiles) {
if (z == id) {
const scope = this.mapTiles[id];
return scope[`${x}-${y}`]
}
}
},
setTitleLayer() { // 生成瓦片图
const _this = this;
......@@ -583,9 +642,9 @@ export default {
zIndex: 100,
createTile: function (x, y, z, success, fail) {
// 控制地图等级显示图片范围-过滤不显示的图层渲染
for (const key in _this.titleLayerSet) {
if (z == key) {
const scope = _this.titleLayerSet[key];
for (const id in _this.titleLayerSet) {
if (z == id) {
const scope = _this.titleLayerSet[id];
if (x < scope.x[0] || x > scope.x[1]) {
fail()
return;
......@@ -730,8 +789,10 @@ export default {
handleNavMarker (item) { // 底部列表点击跳转弹框判断
if (item.window_type === 'normal') {
this.positionMarker(item)
} else {
} else if (item.window_type === 'lite') {
this.positionLiteMarker(item)
} else if (item.window_type === 'warn') {
this.positionWarnMarker(item)
}
},
positionMarker(item) {
......@@ -759,7 +820,6 @@ export default {
});
},
positionWarnMarker(item) {
console.log(item);
// 点击后创建自定义信息窗口
this.setInfoWindowsWarn(item)
// 把地图中心点设置为当前点击的标记点
......