Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2023-07-07 13:33:44 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
4627763a31a57abb0883c7eeff4abaf86e70c7bf
4627763a
1 parent
ef3a1499
api联调
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
110 additions
and
29 deletions
.env
src/api/common.js
src/api/map.js
src/common/max.js
src/utils/axios.js
src/views/auth.vue
src/views/index.vue
.env
View file @
4627763
...
...
@@ -2,7 +2,7 @@
VITE_PORT = 8006
# 反向代理服务器地址
VITE_PROXY_TARGET = http
://voice
.onwall.cn
VITE_PROXY_TARGET = http
s://oa-dev
.onwall.cn
# API请求前缀
VITE_PROXY_PREFIX = /srv/
...
...
src/api/common.js
View file @
4627763
/*
* @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
...
...
@@ -16,7 +23,7 @@ const Api = {
/**
* @description: 发送验证码
* @param {*} phone 手机号码
* @returns
* @returns
*/
export
const
smsAPI
=
(
params
)
=>
fn
(
fetch
.
post
(
Api
.
SMS
,
params
));
...
...
@@ -24,14 +31,14 @@ export const smsAPI = (params) => fn(fetch.post(Api.SMS, params));
* @description: 获取七牛token
* @param {*} filename 文件名
* @param {*} file 图片base64
* @returns
* @returns
*/
export
const
qiniuTokenAPI
=
(
params
)
=>
fn
(
fetch
.
stringifyPost
(
Api
.
TOKEN
,
params
));
/**
* @description: 上传七牛
* @param {*}
* @returns
* @returns
*/
export
const
qiniuUploadAPI
=
(
url
,
data
,
config
)
=>
uploadFn
(
fetch
.
basePost
(
url
,
data
,
config
));
...
...
@@ -42,6 +49,6 @@ export const qiniuUploadAPI = (url, data, config) => uploadFn(fetch.basePost(url
* @param {*} height
* @param {*} width
* @param {*} filekey
* @returns
* @returns
*/
export
const
saveFileAPI
=
(
params
)
=>
fn
(
fetch
.
stringifyPost
(
Api
.
SAVE_FILE
,
params
));
...
...
src/api/map.js
0 → 100644
View file @
4627763
import
{
fn
,
fetch
}
from
'@/api/fn'
;
const
Api
=
{
MAP
:
'/srv/?a=map'
,
};
export
const
mapAPI
=
(
params
)
=>
fn
(
fetch
.
get
(
Api
.
MAP
,
params
));
src/common/max.js
View file @
4627763
/*
* @Date: 2023-06-30 16:48:58
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-0
5 10:52:36
* @LastEditTime: 2023-07-0
7 07:50:10
* @FilePath: /map-demo/src/common/max.js
* @Description: 文件描述
*/
...
...
src/utils/axios.js
View file @
4627763
...
...
@@ -2,8 +2,8 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-28 10:17:40
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 202
2-06-30 01:30:26
* @FilePath: /
tswj
/src/utils/axios.js
* @LastEditTime: 202
3-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
'
,
};
/**
...
...
src/views/auth.vue
View file @
4627763
<!--
* @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}`;
...
...
src/views/index.vue
View file @
4627763
<!--
* @Date: 2023-05-19 14:54:27
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-07-0
5 17:05:08
* @LastEditTime: 2023-07-0
7 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)
// 把地图中心点设置为当前点击的标记点
...
...
Please
register
or
login
to post a comment