update
This commit is contained in:
zk
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 163 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB After Width: | Height: | Size: 172 KiB |
@@ -1,59 +1,64 @@
|
||||
//高德信息弹窗
|
||||
.amap-info-contentContainer {
|
||||
.amap-content-body {
|
||||
background: #00152B;
|
||||
border: 1px solid #129BFF;
|
||||
.amap-content-body {
|
||||
background: #00152B;
|
||||
border: 1px solid #129BFF;
|
||||
|
||||
.amap-lib-infowindow {
|
||||
background: #00152B;
|
||||
.amap-lib-infowindow {
|
||||
background: #00152B;
|
||||
|
||||
.amap-lib-infowindow-title {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #129BFF;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.amap-lib-infowindow-title {
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #129BFF;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.amap-lib-infowindow-content {
|
||||
color: #fff;
|
||||
padding: 4px 0;
|
||||
}
|
||||
.amap-lib-infowindow-content {
|
||||
color: #fff;
|
||||
padding: 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.amap-combo-close {
|
||||
top: 5px;
|
||||
right: 7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*地图元素样式---start*/
|
||||
//marker
|
||||
.amap-marker-label {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.alarm-content {
|
||||
background-color: #263d5e;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #1b7ef2;
|
||||
position: relative;
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -8px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
font-size: 12px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
background-color: #263d5e;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
|
||||
}
|
||||
font-size: 14px;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid #1b7ef2;
|
||||
position: relative;
|
||||
|
||||
.close-btn:hover {
|
||||
background: #666;
|
||||
}
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
right: -8px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
font-size: 12px;
|
||||
background: #ccc;
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 15px;
|
||||
box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/*地图元素样式---end*/
|
||||
+71
-68
@@ -1,146 +1,149 @@
|
||||
@import "./amap-item";
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.select {
|
||||
color: #45a2ff;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 72%;
|
||||
left: 6px;
|
||||
bottom: -12px;
|
||||
height: 6px;
|
||||
background: url('../images/light.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
span {
|
||||
padding: 0 2%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.unSelect {
|
||||
color: #a3a4a4;
|
||||
}
|
||||
.select {
|
||||
color: #45a2ff;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 72%;
|
||||
left: 6px;
|
||||
bottom: -12px;
|
||||
height: 6px;
|
||||
background: url('../images/light.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.unSelect {
|
||||
color: #a3a4a4;
|
||||
}
|
||||
}
|
||||
|
||||
*::-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-dropdown {
|
||||
background-color: #00152b !important;
|
||||
border-right: 1px solid #1b7ef2;
|
||||
border-left: 1px solid #1b7ef2;
|
||||
border-bottom: 1px solid #1b7ef2;
|
||||
background-color: #00152b !important;
|
||||
border-right: 1px solid #1b7ef2;
|
||||
border-left: 1px solid #1b7ef2;
|
||||
border-bottom: 1px solid #1b7ef2;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
//直升机
|
||||
.helicopter {
|
||||
width: 60px;
|
||||
height: 37px;
|
||||
background: url("../img/helicopter.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 4px;
|
||||
width: 60px;
|
||||
height: 37px;
|
||||
background: url("../img/helicopter.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
|
||||
+40
-22
@@ -3,6 +3,7 @@ import chinaInner from '/@/assets/lngLat/chinaInner.ts';
|
||||
import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
|
||||
import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts';
|
||||
import { isFunction } from '/@/utils/is.ts';
|
||||
import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts';
|
||||
|
||||
export const defaultOption = {
|
||||
center: [106.3, 37.87], //地图中心点
|
||||
@@ -23,7 +24,7 @@ export const Map = {
|
||||
* @param el dom元素 id选择器
|
||||
* @param option 地图配置
|
||||
*/
|
||||
initMap({ el, option }) {
|
||||
initMap({ el, option }: InitMap) {
|
||||
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
|
||||
//基本地图加载
|
||||
this.map = new AMap.Map(el, {
|
||||
@@ -43,7 +44,7 @@ export const Map = {
|
||||
drawOutLine() {
|
||||
let geoJson = new AMap.GeoJSON({
|
||||
geoJSON: china,
|
||||
getPolygon: function (geoJson, lngLats) {
|
||||
getPolygon: function (geoJson: string, lngLats: any) {
|
||||
return new AMap.Polyline({
|
||||
path: lngLats[0],
|
||||
strokeColor: '#6ccffe',
|
||||
@@ -62,7 +63,7 @@ export const Map = {
|
||||
drawInnerLine() {
|
||||
let geoJson = new AMap.GeoJSON({
|
||||
geoJSON: chinaInner,
|
||||
getPolygon: function (geoJson, lngLats) {
|
||||
getPolygon: function (geoJson: string, lngLats: any) {
|
||||
return new AMap.Polyline({
|
||||
path: lngLats[0],
|
||||
strokeColor: '#359de5',
|
||||
@@ -71,24 +72,35 @@ export const Map = {
|
||||
},
|
||||
});
|
||||
this.map.add(geoJson);
|
||||
}, // 清空当前地图上除了边界线的覆盖物
|
||||
},
|
||||
/**
|
||||
* @desc 设置地图级别与中心点
|
||||
* @param center 【lon,lat】
|
||||
* @param zoom 地图层级
|
||||
* */
|
||||
setZoomCenter(center, zoom = 12) {
|
||||
this.map && this.map.setZoomAndCenter(zoom, center);
|
||||
},
|
||||
/**
|
||||
* @desc 清空当前地图上除了边界线的覆盖物
|
||||
*/
|
||||
removeOverlayGroup() {
|
||||
this.clearAircraft();
|
||||
this.clearOverlay();
|
||||
this.clearAirRange();
|
||||
this.clearMarker(); //
|
||||
if (this.airMarkerList.length > 0) {
|
||||
for (let i = 0; i < this.airMarkerList.length; i++) {
|
||||
this.airMarkerList[i].setMap(null);
|
||||
}
|
||||
if (this.airMarkerList) {
|
||||
this.airMarkerList = [];
|
||||
}
|
||||
// this.map.remove(this.airMarkerList);
|
||||
}, //
|
||||
/**
|
||||
* @desc 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
|
||||
* @param result
|
||||
* @param extData
|
||||
* @param callback
|
||||
*/
|
||||
createOverlay(result, { extOption = {}, content }, callback) {
|
||||
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
|
||||
this.removeOverlayGroup();
|
||||
this.overlayGroup = new AMap.OverlayGroup();
|
||||
for (let i = 0; i < result.length; i++) {
|
||||
@@ -101,6 +113,7 @@ export const Map = {
|
||||
}
|
||||
// 创建一个 Icon
|
||||
let startIcon = typeToIcon(type);
|
||||
// debugger;
|
||||
// 将 icon 传入 marker
|
||||
let startMarker = new AMap.Marker({
|
||||
// 点的坐标
|
||||
@@ -109,9 +122,9 @@ export const Map = {
|
||||
clickable: true, //点额外携带的数据，用户自定义属性，支持JavaScript API任意数据类型
|
||||
extData: result[i],
|
||||
label: {
|
||||
content: isFunction(content) && content(result[i]),
|
||||
content: isFunction(extData?.content) && extData?.content(result[i]),
|
||||
},
|
||||
...extOption,
|
||||
...extData?.extOption,
|
||||
});
|
||||
// 可以调用setExtData（）设置自定义属性
|
||||
//将组 挂载到地图上
|
||||
@@ -139,9 +152,11 @@ export const Map = {
|
||||
* @desc 创建直升机marker
|
||||
* @param result
|
||||
*/
|
||||
createAircraft(result) {
|
||||
createAircraft(result: ResultType[]) {
|
||||
console.log('result', result);
|
||||
this.removeOverlayGroup();
|
||||
this.clearActiveHospital();
|
||||
// debugger;
|
||||
if (!Array.isArray(result) && result.length == 0) return;
|
||||
this.createAirRange(result);
|
||||
let that = this;
|
||||
@@ -152,6 +167,7 @@ export const Map = {
|
||||
arr,
|
||||
{
|
||||
renderMarker: (context) => {
|
||||
console.log('context', context);
|
||||
let factor = Math.pow(context.count / count, 1 / 18);
|
||||
let div = document.createElement('div');
|
||||
div.className = 'render-air';
|
||||
@@ -163,25 +179,26 @@ export const Map = {
|
||||
div.style.fontSize = '14px';
|
||||
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
||||
context.marker.setContent(div);
|
||||
this.airMarkerList.push(context.marker);
|
||||
context.marker.on('click', () => {
|
||||
console.log('data', context);
|
||||
});
|
||||
// this.airMarkerList.push(context.marker);
|
||||
// context.marker.on('click', () => {
|
||||
// console.log('data', context);
|
||||
// });
|
||||
},
|
||||
}
|
||||
);
|
||||
this.cluster.setMap(this.map);
|
||||
// this.cluster.setMap(this.map);
|
||||
},
|
||||
clearAircraft() {
|
||||
if (this.cluster) {
|
||||
this.map.remove(this.cluster);
|
||||
this.cluster = null;
|
||||
this.cluster.setMap(null);
|
||||
// this.map.remove(this.cluster);
|
||||
// this.cluster = null;
|
||||
}
|
||||
} /**
|
||||
* @desc 飞机范围
|
||||
* @param list
|
||||
*/,
|
||||
createAirRange(list) {
|
||||
createAirRange(list: ResultType[]) {
|
||||
this.removeOverlayGroup();
|
||||
this.circleGroup = new AMap.OverlayGroup();
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
@@ -223,17 +240,18 @@ export const Map = {
|
||||
this.placeSearch = null;
|
||||
}
|
||||
},
|
||||
createMarker(option, callbck: () => {}) {
|
||||
createMarker(option: MarkerOption, callbck?: Callback) {
|
||||
this.clearMarker();
|
||||
let { lon, lat, zoom = 12 } = option;
|
||||
const icon = createIcon({ icon: alarmIcon, iconSize: [36, 42], imageSize: [36, 42] });
|
||||
let str = option?.realName && option?.eventType_dictText ? `${option?.realName},${option?.eventType_dictText}` : `${option?.realName}`;
|
||||
this.marker = new AMap.Marker({
|
||||
position: [lon, lat],
|
||||
icon: icon,
|
||||
offset: new AMap.Pixel(0, 0), //设置偏移量
|
||||
label: {
|
||||
content: `<div class="alarm-content" >
|
||||
<div>${option?.realName},${option?.eventType_dictText}</div>
|
||||
<div>${str}</div>
|
||||
</div>`,
|
||||
offset: new AMap.Pixel(0, -9),
|
||||
direction: 'top',
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
export interface InitMap {
|
||||
el: string;
|
||||
option: any;
|
||||
}
|
||||
|
||||
export type Callback = (result?: any) => void;
|
||||
|
||||
export interface ResultType {
|
||||
lon?: number;
|
||||
lat?: number;
|
||||
lng?: number;
|
||||
type?: string;
|
||||
name?: string;
|
||||
}
|
||||
|
||||
export interface ExtDataType {
|
||||
extOption?: object;
|
||||
content?: string;
|
||||
}
|
||||
|
||||
export interface MarkerOption {
|
||||
lon?: number;
|
||||
lat?: number;
|
||||
zoom?: number;
|
||||
|
||||
[k: string]: any;
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { App } from 'vue';
|
||||
import { Form, Input, Button, Radio, Modal, Table, Select, Cascader, Spin, ConfigProvider } from 'ant-design-vue';
|
||||
import dataV from '@iamzzg/data-view/dist/vue3/datav.map.vue.esm';
|
||||
|
||||
export default function registerGlobComp(app: App) {
|
||||
app.use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
|
||||
app.use(dataV).use(Button).use(Form).use(Input).use(Radio).use(Modal).use(Table).use(Select).use(Cascader).use(Spin).use(ConfigProvider);
|
||||
}
|
||||
Reference in New Issue
Block a user