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
2023-12-06 19:44:44 +08:00
parent 3b9b1d67fc
commit 123b681dc3
7 changed files with 230 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -2
View File
@@ -12,8 +12,8 @@
securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
}
</script>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=4bbcb216b889f2d612cbed05ae6979c8&plugin=AMap.Driving"></script>
<!-- <script type="text/javascript"-->
<!-- src="https://webapi.amap.com/maps?v=2.0&key=4bbcb216b889f2d612cbed05ae6979c8&plugin=AMap.Driving,AMap.ToolBar,AMap.Driving,AMap.GeoJSON,AMap.MarkerCluster"></script>-->
<script type="text/javascript" src="./public/amap.js"></script>
</head>
<style>
public/amap.js
+2 -2
View File
File diff suppressed because one or more lines are too long
src/assets/img/mapbg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 630 B

src/assets/less/index.less
+19
View File
@@ -4,6 +4,7 @@
font-size: 16px;
display: flex;
justify-content: right;
span {
padding: 0 2%;
cursor: pointer;
@@ -30,18 +31,22 @@
color: #a3a4a4;
}
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-button {
width: 0;
height: 0;
display: none;
}
*::-webkit-scrollbar-corner {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0);
height: 6px;
@@ -49,32 +54,39 @@
background-clip: padding-box;
background-color: rgba(0, 0, 0, 0.3);
}
/*
antd表格样式
*/
.ant-table-thead > tr > th {
border-bottom: 1px solid #1e73c2 !important;
}
.ant-table-body {
background-color: #00152b;
}
.ant-modal-header {
border-bottom: none !important;
}
.ant-table-tbody > tr > td {
border-bottom: 1px solid #1e73c2 !important;
background-color: #00152b;
color: #ffffff;
}
.ant-table-tbody > tr.ant-table-row:hover > td,
.ant-table-tbody > tr > td.ant-table-cell-row-hover,
.ant-table-thead > tr > th {
background-color: #00152b !important;
color: #ffffff !important;
}
.ant-table-cell-scrollbar {
box-shadow: none !important;
}
/*
表格滚动条
*/
@@ -85,3 +97,10 @@
background-clip: padding-box;
background-color: rgba(30, 115, 194, 0.3);
}
.helicopter {
width: 60px;
height: 60px;
background: url("../img/helicopter.png") no-repeat;
background-size: 100% 100%;
}
src/assets/mapUtils/map.ts
+136 -6
View File
@@ -1,16 +1,19 @@
import china from '/@/assets/lngLat/china.ts';
import chinaInner from '/@/assets/lngLat/chinaInner.ts';
import { typeToIcon } from '/@/assets/mapUtils/commonFun.ts';
import { helicopter, mapbg } from '/@/components/chinaMap/chinaHooks.ts';
export const defaultOption = {
center: [106.3, 37.87], //地图中心点
zoom: 4.3, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON'];
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster'];
export const Map = {
map: null,
overlayGroup: null,
overlayGroup: null, // 地图中marker
aircraftGroup: null, //直升机marker
cluster: null,
initMap({ el, option }) {
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
//基本地图加载
@@ -60,10 +63,8 @@ export const Map = {
},
// 创建覆盖物组，用于批量处理点 （控制显隐，点击事件等）
createOverlay(result) {
if (this.overlayGroup) {
this.map.remove(this.overlayGroup);
this.overlayGroup = null;
}
this.clearAircraft();
this.clearOverlay();
this.overlayGroup = new AMap.OverlayGroup();
for (let i = 0; i < result.length; i++) {
let { type, lon, lat } = result[i];
@@ -96,4 +97,133 @@ export const Map = {
console.log(e.target.getExtData());
});
},
clearOverlay() {
if (this.overlayGroup) {
this.map.remove(this.overlayGroup);
this.overlayGroup = null;
}
},
//创建直升机marker
createAircraft(result) {
this.clearAircraft();
this.clearOverlay();
// this.aircraftGroup = new AMap.OverlayGroup();
if (!Array.isArray(result) && result.length == 0) return;
const content = `
<div style="
display: flex;
justify-content: center;
align-items: center;
">
<div
style="width:156px;height: 52px;text-align:center; !important;">
<div style="display: flex;
justify-content: center;">
<div class="helicopter"></div>
</div>
<div style='z-index:999;background-color:#0A8B18;height:auto; '>
<h5 style="overflow: hidden;font-size:18px;color:#fff;white-space: nowrap;height:26px; line-height: 26px;padding:2px 4px;">
4009-120-999
</h5>
</div>
</div>
`;
const markers = [];
for (let i = 0; i < result.length; i++) {
let { lon, lat } = result[i];
const marker = new AMap.Marker({
// 点的坐标
position: [lon, lat],
//启用点击事件 如果需要点击事件，必须开启
clickable: true,
title: `4009-120-999`,
content: content,
offset: new AMap.Pixel(-16, -30),
});
markers.push(marker);
}
// //将组 挂载到地图上
// this.aircraftGroup.setMap(this.map);
// //将需要批量控制的点放到一个组中，通过控制组，就可以操作组内所有所有覆盖物
// this.aircraftGroup.addOverlay(markers);
if (this.cluster) {
// this.cluster.setMap(null);
this.map.remove(this.cluster);
// this.cluster = null;
this.cluster.setMap(null);
}
//使用renderCluserMarker属性实现聚合点的完全自定义绘制
let sts = [
{
url: mapbg,
size: new AMap.Size(32, 32),
offset: new AMap.Pixel(-16, -30),
textColor: '#fff',
textSize: 20,
},
];
let that = this;
let arr = result.map((item) => ({ weight: 4, lnglat: [item.lon, item.lat] }));
let count = 4;
this.cluster = new AMap.MarkerClusterer(
that.map, // 地图实例
arr,
{
renderMarker: (context) => {
var factor = Math.pow(context.count / count, 1 / 18);
var div = document.createElement('div');
var Hue = 180 - factor * 180;
var bgColor = 'hsla(' + Hue + ',100%,50%,0.7)';
var fontColor = 'hsla(' + Hue + ',100%,20%,1)';
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.innerHTML = content || context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setContent(div);
},
}
);
console.log('xx', this.cluster);
this.cluster.setMap(this.map);
this.getRange(result);
},
clearAircraft() {
if (this.aircraftGroup) {
this.map.remove(this.aircraftGroup);
this.aircraftGroup = null;
}
},
getRange(list) {
//绘制飞机的范围图
var array = new Array(list.length);
for (var i = 0; i < list.length; i++) {
var circle = new AMap.Circle({
center: [list[i].lon, list[i].lat],
radius: 100000, //半径
borderWeight: 3,
strokeColor: '#FF33FF',
strokeOpacity: 1,
strokeWeight: 6,
strokeOpacity: 0.2,
fillOpacity: 0.4,
strokeStyle: 'dashed',
strokeDasharray: [10, 10],
// 线样式还支持 'dashed'
fillColor: '#1791fc',
zIndex: 50,
});
circle.setMap(this.map);
array.push(circle);
}
return array;
},
};
src/components/chinaMap/chinaHooks.ts
+11 -8
View File
@@ -6,6 +6,7 @@ export enum TabType {
heZuoYiYuan = '2', //合作医院
yiLiaoDian = '3', //医疗点
jiuHuChe = '4', //救护车
zhiShengJi = '5', //直升机
}
export const tabList = [
@@ -34,6 +35,7 @@ export const tabList = [
},
{
name: '直升机',
type: TabType.zhiShengJi,
},
{
name: '急救路线',
@@ -41,34 +43,35 @@ export const tabList = [
];
export const helicopter = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
export const mapbg = new URL('/@/assets/img/helicopter.png', import.meta.url).href;
// 直升机位置数据
export const aircraft = [
{
category: 3,
lat: 108.861377,
lon: 34.35965,
lon: '108.861377',
lat: '34.35965',
img: helicopter,
name: '直升机',
},
{
category: 3,
lat: 106.267358,
lon: 38.520079,
lon: '106.267358',
lat: '38.520079',
img: helicopter,
name: '直升机',
},
{
category: 3,
lat: 109.505282,
lon: 36.579381,
lon: '109.505282',
lat: '36.579381',
img: helicopter,
name: '直升机',
},
{
category: 3,
lat: 107.638372,
lon: 35.734218,
lon: '107.638372',
lat: '35.734218',
img: helicopter,
name: '直升机',
},
src/components/chinaMap/chinaMap.vue
+9 -1
View File
@@ -61,7 +61,7 @@
import { onMounted, ref } from 'vue';
import { message } from 'ant-design-vue';
import { Map } from '/@/assets/mapUtils/map';
import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch } from '/@/components/chinaMap/chinaHooks';
import { tabList, legendList, getTimeStr, getKmStr, mapApiSwitch, TabType, aircraft } from '/@/components/chinaMap/chinaHooks';
const formState = ref({
start: '西安北站',
@@ -71,7 +71,15 @@
const currentIndex = ref(0);
function changeTab(item, i: number) {
// if (i == currentIndex.value) {
// return;
// }
currentIndex.value = i;
// 直升机
if (TabType.zhiShengJi == item.type) {
Map.createAircraft(aircraft);
return;
}
getMapData(item.type, { type: item.type });
}