renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 优化地图工具方法，调整地图样式

Browse Source
This commit is contained in:
zk
2024-06-14 18:11:09 +08:00
parent 83f768a4a0
commit 14c50baeed
24 changed files with 1312 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/less/index.less
+72 -72
View File
@@ -1,159 +1,159 @@
@import "./amap-item";
@import "./themeType";
.type-time {
padding-right: 4%;
padding-top: 3%;
font-size: 16px;
display: flex;
justify-content: right;
padding-right: 4%;
padding-top: 3%;
font-size: 16px;
display: flex;
justify-content: right;
span {
padding: 0 2%;
cursor: pointer;
span {
padding: 0 2%;
cursor: pointer;
}
.select {
color: var(--typeTimeSelectColor);
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 72%;
left: 6px;
bottom: -12px;
height: 6px;
background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.select {
color: #45a2ff;
position: relative;
&:after {
content: '';
position: absolute;
display: block;
width: 72%;
left: 6px;
bottom: -12px;
height: 6px;
background: url('/@/assets/images/light.png') no-repeat;
background-size: 100% 100%;
}
}
.unSelect {
color: #a3a4a4;
}
.unSelect {
color: var(--typeTimeUnSelectColor);
}
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
width: 0;
height: 0;
display: none;
}
*::-webkit-scrollbar-corner {
background-color: transparent;
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
border-radius: 25px;
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
}
.nowrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ant-modal-mask {
background-color: rgba(0, 0, 0, 0.65) !important;
background-color: rgba(0, 0, 0, 0.65) !important;
}
// 下拉框样式-start
.ant-select.bg-000 {
color: #fff !important;
background-color: #000;
color: #fff !important;
background-color: #000;
}
.ant-select-dropdown {
background-color: #00152b !important;
border-right: 1px solid #1b7ef2;
border-left: 1px solid #1b7ef2;
border-bottom: 1px solid #1b7ef2;
background-color: var(--antSelectDropdownBg) !important;
border: 1px solid var(----antSelectDropdownBorderColor);
border-top: none;
}
.ant-select-item {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
//框背景色
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
color: #1b7ef2 !important;
background-color: transparent !important;
border: 1px solid #1b7ef2 !important;
color: #1b7ef2 !important;
background-color: transparent !important;
border: 1px solid #1b7ef2 !important;
}
.ant-select-item-option-selected {
color: #ffffff !important;
color: #ffffff !important;
}
// 选中字体颜色
.ant-select-selection-item {
//color: #1b7ef2 !important;
color: #fff;
//color: #1b7ef2 !important;
color: #fff;
}
.ant-select-item-option-active {
background-color: transparent !important;
background-color: transparent !important;
}
.ant-select-item-option-active:hover {
background-color: #002e64 !important;
background-color: #002e64 !important;
}
// 箭头颜色
.ant-select-arrow {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
.ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
background-color: #002e64 !important;
background-color: #002e64 !important;
}
// 下拉框样式-end
// 级联选择器样式-start
.ant-cascader-menu-item {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
.ant-cascader-menu-item:hover {
background-color: #002e64 !important;
background-color: #002e64 !important;
}
.ant-cascader-menu-item-active {
color: #fff !important;
background-color: #002e64 !important;
color: #fff !important;
background-color: #002e64 !important;
}
.ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon {
color: #1b7ef2 !important;
color: #1b7ef2 !important;
}
// 级联选择器样式-end
.ant-empty-description {
color: #fff;
color: #fff;
}
//空表格hover白色
.ant-table-tbody > tr.ant-table-placeholder:hover > td {
background: transparent !important;
background: transparent !important;
}
//直升机
.helicopter {
width: 60px;
height: 37px;
background: url("/@/assets/img/helicopter.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
width: 60px;
height: 37px;
background: url("/@/assets/img/helicopter.png") no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
}
src/assets/less/themeType.less
+10
View File
@@ -0,0 +1,10 @@
/*弹窗背景色*/
.police-con.light {
color: #000;
background-color: #fff;
}
.police-con.dark {
color: #ffffff;
background-color: #00152b;
}
src/assets/mapUtils/map.ts
+40 -28
View File
@@ -23,8 +23,10 @@ export const Map = {
* @desc 地图舒适化
* @param el dom元素 id选择器
* @param option 地图配置
* @param innerLineOption 内轨迹线配置
* @param outlineOption 外轨迹线配置
*/
initMap({ el, option }: InitMap) {
initMap({ el, option, innerLineOption, outerLineOption }: InitMap) {
return new Promise((resolve) => {
AMapLoader.load({
key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -43,27 +45,41 @@ export const Map = {
});
// 异步同时加载多个插件
new AMap.plugin(mapPlugin, () => {
this.drawInnerLine();
this.drawOutLine();
if (outerLineOption) {
this.drawInnerLine(innerLineOption);
this.drawOutLine(outerLineOption);
} else {
this.drawInnerLine();
this.drawOutLine();
}
});
resolve();
});
});
} /**
},
/**
*#desc 获取地图中心点
*/
getMapCenter() {
return this.map.getCenter();
},
/**
* @desc 中国外层边界线
*/,
drawOutLine() {
*/
drawOutLine(outerLineOption = {}) {
let line = {
strokeColor: '#2384dd',
strokeWeight: 3,
isOutline: false,
};
let geoJson = new AMap.GeoJSON({
geoJSON: china,
getPolygon: function (geoJson: string, lngLats: any) {
return new AMap.Polyline({
path: lngLats[0],
strokeColor: '#2384dd',
strokeWeight: 3,
// lineJoin: 'round', //折线拐点的绘制样式
isOutline: false,
// borderWeight: 2,
// outlineColor: '#6ccffe',
...line,
...outerLineOption,
});
},
});
@@ -71,24 +87,19 @@ export const Map = {
} /**
* @desc 中国内层边界线
*/,
drawInnerLine() {
drawInnerLine(innerLineOption = {}) {
let line = {
isOutline: true,
outlineColor: '#2692fc',
borderWeight: 1,
strokeColor: '#88b9f8',
strokeWeight: 1,
strokeOpacity: 0.8,
};
let geoJson = new AMap.GeoJSON({
geoJSON: chinaInner,
getPolygon: function (geoJson: string, lngLats: any) {
return new AMap.Polyline({
path: lngLats[0],
// strokeColor: '#57b2f8',
// strokeColor: '#2BA5FF',
// strokeColor: '#3d6eff',
// strokeWeight: 2,
// zIndex: 10,
isOutline: true,
outlineColor: '#2692fc',
borderWeight: 1,
strokeColor: '#88b9f8',
strokeWeight: 1,
strokeOpacity: 0.8,
});
return new AMap.Polyline({ path: lngLats[0], ...line, ...innerLineOption });
},
});
this.map.add(geoJson);
@@ -448,7 +459,8 @@ export const Map = {
return new Promise((resolve, reject) => {
geocoder.getAddress(lnglat, (status, result) => {
if (status === 'complete' && result.regeocode) {
return resolve(result.regeocode.formattedAddress);
console.log('xx', result);
return resolve(result.regeocode.formattedAddress, result.regeocode);
}
return reject(result);
});
src/assets/mapUtils/mapConstant.ts
+11 -1
View File
@@ -9,7 +9,17 @@ export const YinChuanOption = {
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
//浅色地图样式
export const lightMapOption = {
mapStyle: 'normal', //地图样式
};
export const outerLineOption = {
strokeColor: '#768ddb',
};
export const innerLineLight = {
outlineColor: '#88a2f9',
strokeColor: '#93aaf8',
};
// 地图key
export const mapKey = '4bbcb216b889f2d612cbed05ae6979c8';
// 地图插件
src/assets/mapUtils/mapFunTypes.ts
+3 -1
View File
@@ -1,6 +1,8 @@
export interface InitMap {
el: string;
option: any;
innerLineOption?: any;
outerLineOption?: any;
}
export type Callback = (result?: any) => void;
@@ -24,4 +26,4 @@ export interface MarkerOption {
zoom?: number;
[k: string]: any;
}
}
src/assets/theme/theme.css
+7
View File
@@ -0,0 +1,7 @@
:root {
--antSelectDropdownBg: #00152b;
--antSelectDropdownBorderColor: #1b7ef2;
/*服务详情数据*/
}
src/assets/theme/themeList.ts
+23
View File
@@ -0,0 +1,23 @@
export const themeList = {
dark: {
/*下拉框*/
antSelectDropdownBg: '#00152b',
antSelectDropdownBorderColor: '#1b7ef2',
/*服务详情数据*/
typeTimeSelectColor: '#45a2ff',
typeTimeUnSelectColor: '#a3a4a4',
},
light: {
antSelectDropdownBg: '#fff',
antSelectDropdownBorderColor: '#1b7ef2',
typeTimeSelectColor: '#45a2ff',
typeTimeUnSelectColor: '#a3a4a4',
},
};
export function setTheme(theme: string) {
const themeStyle = themeList[theme];
for (const key in themeStyle) {
document.documentElement.style.setProperty(`--${key}`, themeStyle[key]);
}
}