更新代码
This commit is contained in:
@ -54,6 +54,7 @@
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
background: rgba(0,0,0,0.8);
|
||||
z-index: 2;
|
||||
.headBoxBg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -166,7 +167,7 @@
|
||||
.asideL{
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
left: 10px;
|
||||
left: 0px;
|
||||
.asideL-top{
|
||||
width: 100%;
|
||||
height: 141px;
|
||||
@ -184,7 +185,7 @@
|
||||
// 右边
|
||||
.asideR{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
right: 0px;
|
||||
.commom-aside-small{
|
||||
height: calc(((100% - 146px) /3) - 6px);
|
||||
background: #052249;
|
||||
|
||||
348
src/components/GdMap/index.vue
Normal file
348
src/components/GdMap/index.vue
Normal file
@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<div :id="mapid" class="map"></div>
|
||||
<div class="changeMap_box" v-if="props.isShow">
|
||||
<el-switch v-model="conditionRoute" @change="handleSwitch" active-text="打开路况" inactive-text="关闭路况" style="--el-switch-color:#13ce66;--el-switch-off-color:#ff4949;" />
|
||||
<!-- <el-carousel type="card" height="75px" :autoplay="false" indicator-position="none" :initial-index="3" @change="onMapImageChange">
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/slt.jpg')" alt="" />
|
||||
<div>栅格浅色</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/yxt.jpg')" alt="" />
|
||||
<div>影像图</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/yst.jpg')" alt="" />
|
||||
<div>栅格深色</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
<el-carousel-item>
|
||||
<div class="mapImageItem">
|
||||
<img :src="require('@/assets/images/shy.png')" alt="" />
|
||||
<div>三合一</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel> -->
|
||||
<!-- 地图缩放 -->
|
||||
<div class="zoomTargetBox">
|
||||
<el-input-number :min="7" :max="18" v-model="zoomTarget" :step="1" step-strictly @change="handleZoom">
|
||||
</el-input-number>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted, defineProps, nextTick } from "vue";
|
||||
import { MapUtil } from "./mapUtil";
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
import { getItem } from "@/utils/storage";
|
||||
const conditionRoute = ref(true); //路况
|
||||
const mMap = ref(null); //地图对象
|
||||
const mapUtil = ref(null); //地图工具对象
|
||||
const zoomTarget = ref(6);
|
||||
|
||||
const props = defineProps({
|
||||
mapid: {
|
||||
type: String,
|
||||
default: "mapDiv"
|
||||
},
|
||||
//是否显示可以切换地图底图
|
||||
isShow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示实时路况
|
||||
isShowMvt: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示地图层级
|
||||
isShowZoom: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//是否显示绘制控件
|
||||
isShowDraw: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
});
|
||||
try {
|
||||
const userInfo = getItem("deptId")[0].deptCode;
|
||||
} catch (error) {}
|
||||
let map;
|
||||
let mapLayer;
|
||||
let mapLayer1;
|
||||
onMounted(() => {
|
||||
emitter.on("followUp", (res) => {
|
||||
let box = document.getElementsByClassName("changeMap_box");
|
||||
if (!box) return;
|
||||
box[0].style.right = !res ? "4px" : "398px";
|
||||
box[0].style.transition = "0.5s";
|
||||
});
|
||||
|
||||
map = new EliMap({
|
||||
id: props.mapid,
|
||||
crs: "EPSG:3857",
|
||||
style: {
|
||||
glyphs: "./fonts/{fontstack}/{range}.pbf",
|
||||
center: [94.36,29.65],
|
||||
zoom: 10
|
||||
},
|
||||
transformRequest: (url) => {
|
||||
if (url.indexOf("TileMatrix=") != -1) {
|
||||
const arr = url.split("TileMatrix=");
|
||||
const arr1 = arr[1].split("&");
|
||||
const nurl = `${arr[0]}&TileMatrix=${Number(arr1[0])}&${arr1[1]}&${arr1[2]}`;
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
window.map = map;
|
||||
map.mapboxGLMap.on("load", () => {
|
||||
map.addGaudLayer({
|
||||
url: 'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
|
||||
})
|
||||
zoomTarget.value = map.mapboxGLMap.getZoom();
|
||||
});
|
||||
mapUtil.value = new MapUtil(map);
|
||||
|
||||
mapUtil.value.Drawplot(); //初始化加载绘制工具
|
||||
|
||||
// 设置地图中心点及图层
|
||||
emitter.on("setMapCenter", (res) => {
|
||||
mapUtil.value.setMapCenter(res.location, res.zoomLevel);
|
||||
});
|
||||
|
||||
emitter.on("removePlot", (flag) => {
|
||||
mapUtil.value.removePlot(flag);
|
||||
});
|
||||
emitter.on("removeAll", (flag) => {
|
||||
mapUtil.value.removeAll(flag);
|
||||
});
|
||||
// 撒点
|
||||
emitter.on("addPointArea", (obj) => {
|
||||
mapUtil.value.makerSki(obj);
|
||||
});
|
||||
// 鼠标滑过提示文字的点位
|
||||
emitter.on("showPoint", (obj) => {
|
||||
mapUtil.value.showPoint(obj);
|
||||
});
|
||||
|
||||
// 清除覆盖物
|
||||
emitter.on("deletePointArea", (res) => {
|
||||
mapUtil.value.removeElement(res);
|
||||
});
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("deletePointAreaOne", (obj) => {
|
||||
mapUtil.value.removeElementOne(obj.flag, obj.id);
|
||||
});
|
||||
|
||||
// 清除某个覆盖物的单个
|
||||
emitter.on("showSquire", (obj) => {
|
||||
mapUtil.value.zdySquire(obj);
|
||||
});
|
||||
|
||||
// 绘制图形 - 回显区域
|
||||
emitter.on("drawShape", (res) => {
|
||||
mapUtil.value.plot(res, resFun);
|
||||
});
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显图形
|
||||
emitter.on("echoPlane", (res) => {
|
||||
mapUtil.value.echoPlane(res);
|
||||
});
|
||||
//移除绘制区域
|
||||
emitter.on("removeEara", (flag) => {
|
||||
mapUtil.value.removeEara(flag);
|
||||
});
|
||||
// 回显线
|
||||
emitter.on("echoLine", (res) => {
|
||||
mapUtil.value.createLine(res, res.flag);
|
||||
});
|
||||
//创建边界面（geojson）
|
||||
emitter.on("setBoundarys", (res) => {
|
||||
mapUtil.value.createBoundarys(res);
|
||||
});
|
||||
// 移除边界
|
||||
emitter.on("removeBj", (res) => {
|
||||
mapUtil.value.removeBj(res);
|
||||
});
|
||||
|
||||
// 轨迹回放
|
||||
emitter.on("drawLineAnimation", (res) => {
|
||||
mapUtil.value.displayLineAnimation(res);
|
||||
});
|
||||
|
||||
// 聚合撒点
|
||||
emitter.on("addPoint", (obj) => {
|
||||
mapUtil.value.aggregateScatteringPoint(obj);
|
||||
});
|
||||
|
||||
// 热力图显示
|
||||
emitter.on("thermodynamicChart", (res) => {
|
||||
mapUtil.value.showHeatDrawing(res);
|
||||
});
|
||||
|
||||
// 扩散圆
|
||||
emitter.on("diffusionCircle", (res) => {
|
||||
mapUtil.value.diffusionCircle(res);
|
||||
});
|
||||
|
||||
// 展示盘曲
|
||||
emitter.on("showGapText", (obj) => {
|
||||
mapUtil.value.gapText(obj);
|
||||
});
|
||||
|
||||
// 获取当前地图中心点
|
||||
emitter.on("getCurrentCenter", (res) => {
|
||||
let centerPoint = map.mapboxGLMap.getCenter();
|
||||
let coords = [centerPoint.lng, centerPoint.lat];
|
||||
emitter.emit("getcentercoord", coords);
|
||||
});
|
||||
});
|
||||
//切换地图底图
|
||||
const onMapImageChange = (val) => {
|
||||
//清除已经存在胡地图图层
|
||||
if (map.mapboxGLMap.getLayer("SGQS_ID"))
|
||||
map.mapboxGLMap.removeLayer("SGQS_ID");
|
||||
if (map.mapboxGLMap.getLayer("YX_ID")) map.mapboxGLMap.removeLayer("YX_ID");
|
||||
if (map.mapboxGLMap.getLayer("SGSG_ID"))
|
||||
map.mapboxGLMap.removeLayer("SGSG_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_TITLE_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_TITLE_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_ROAD_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_ROAD_ID");
|
||||
if (map.mapboxGLMap.getLayer("TDT_POI_ID"))
|
||||
map.mapboxGLMap.removeLayer("TDT_POI_ID");
|
||||
//设置图层
|
||||
switch (val) {
|
||||
case 0:
|
||||
mapSetLayer("SGQS_ID", "SGQS");
|
||||
break;
|
||||
case 1:
|
||||
mapSetLayer("YX_ID", "YX");
|
||||
break;
|
||||
case 2:
|
||||
mapSetLayer("SGSG_ID", "SGSG");
|
||||
break;
|
||||
case 3:
|
||||
mapSetLayer("TDT_TITLE_ID", "TDT_TITLE_SOURCES");
|
||||
mapSetLayer("TDT_ROAD_ID", "TDT_ROAD_SOURCES");
|
||||
mapSetLayer("TDT_POI_ID", "TDT_POI_SOURCES");
|
||||
break;
|
||||
}
|
||||
if (map.mapboxGLMap.getLayer("realTimeTrafficlevelOne"))
|
||||
map.mapboxGLMap.moveLayer("realTimeTrafficlevelOne");
|
||||
if (map.mapboxGLMap.getLayer("map_id")) map.mapboxGLMap.moveLayer("map_id");
|
||||
if (map.mapboxGLMap.getLayer("map_ids")) map.mapboxGLMap.moveLayer("map_ids");
|
||||
};
|
||||
|
||||
//设置图层函数
|
||||
const mapSetLayer = (id, source) => {
|
||||
map.mapboxGLMap.addLayer({ id, type: "raster", source });
|
||||
};
|
||||
|
||||
//获取地图绘制的数据
|
||||
const resFun = (coord, type, flag, data) => {
|
||||
|
||||
emitter.emit("coordString", {
|
||||
coord: coord,
|
||||
type: type,
|
||||
flag: flag,
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
// 地图层级
|
||||
const handleZoom = (val) => {
|
||||
map.mapboxGLMap.setZoom(val);
|
||||
};
|
||||
|
||||
// 是否打开或者关闭路况
|
||||
const handleSwitch = (val) => {
|
||||
if (val) {
|
||||
// 打开
|
||||
} else {
|
||||
// 关闭
|
||||
}
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
emitter.off("removePlot");
|
||||
emitter.off("setMapCenter");
|
||||
emitter.off("addPointArea");
|
||||
emitter.off("showPoint");
|
||||
emitter.off("deletePointArea");
|
||||
emitter.off("deletePointAreaOne");
|
||||
emitter.off("drawShape");
|
||||
emitter.off("echoPlane");
|
||||
emitter.off("removeEara");
|
||||
emitter.off("echoLine");
|
||||
emitter.off("addPoint");
|
||||
emitter.off("thermodynamicChart");
|
||||
emitter.off("drawLineAnimation");
|
||||
emitter.off("aggregateScatteringPoint");
|
||||
emitter.off("hotmap");
|
||||
emitter.off("setBoundarys");
|
||||
emitter.off("diffusionCircle");
|
||||
emitter.off("SsCircle");
|
||||
emitter.off("ClearssCircle");
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: aliceblue;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.changeMap_box {
|
||||
position: absolute;
|
||||
right: 398px;
|
||||
bottom: 4px;
|
||||
z-index: 9;
|
||||
.mapImageItem {
|
||||
border: 1px solid #08aae8;
|
||||
background: rgb(9, 26, 70);
|
||||
& > img {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
}
|
||||
& > div {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
.zoomTargetBox {
|
||||
margin-top: 10px;
|
||||
margin-left: 23px;
|
||||
}
|
||||
::v-deep .el-input-number__decrease,
|
||||
::v-deep .el-input-number__increase {
|
||||
background: #133362;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
::v-deep .el-input__inner {
|
||||
background: #0c1641;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
777
src/components/GdMap/mapUtil.js
Normal file
777
src/components/GdMap/mapUtil.js
Normal file
@ -0,0 +1,777 @@
|
||||
import emitter from "@/utils/eventBus.js";
|
||||
|
||||
export function MapUtil(map) {
|
||||
let _that = this;
|
||||
_that.mMap = map; //地图对象
|
||||
_that._self = {};//图层对象
|
||||
_that._CustomDraw = null;//自定义绘图
|
||||
_that.polygonGeo = null;//边界
|
||||
_that.idsBox = {} //存放id的容器（需要某个标记单个删除的时候存储）
|
||||
_that.isCheck = false
|
||||
/**
|
||||
* 设置地图中心点以
|
||||
* @param {*} location 中心坐标 [jd,wd]
|
||||
* @param {*} zoomLevel 层级 10
|
||||
*/
|
||||
MapUtil.prototype.setMapCenter = (location, zoomLevel) => {
|
||||
map.mapboxGLMap.setCenter(location);
|
||||
map.mapboxGLMap.setZoom(zoomLevel);
|
||||
};
|
||||
|
||||
/**
|
||||
* 撒点.鼠标滑动展示内容
|
||||
* @param {*} coords 坐标 geojson
|
||||
* @param {*} icon 图标
|
||||
* @param {*} flag 标识
|
||||
*/
|
||||
MapUtil.prototype.showPoint = (res) => {
|
||||
let { coords, icon, flag, iconH } = res
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let pointList = coords.map((it, index) => {
|
||||
let text = it.kfdMc || it.wzBc || it.gajgmc || it.xm || it.jczmc;
|
||||
let obj = {
|
||||
position: [it.jd, it.wd],
|
||||
userData: { deviceSn: 'text' + index, area: text },
|
||||
id: it.id,
|
||||
text: text,
|
||||
data: it
|
||||
}
|
||||
if (it.jd && it.wd) return obj;
|
||||
});
|
||||
|
||||
const point = map.createdPoint(pointList, {
|
||||
image: icon,//对应上面的图片名称
|
||||
scale: 1,
|
||||
highlightImage: iconH ? iconH : icon,//高亮图标
|
||||
labelOption: {
|
||||
pixelOffset: [0, -2],
|
||||
allShow: false,
|
||||
fontSize: '18px',
|
||||
fontWeight: 600,
|
||||
fontColor: '#000000'
|
||||
}
|
||||
})
|
||||
_that._self[flag].push(point)
|
||||
|
||||
|
||||
point.addEventListener("click", (val) => {
|
||||
let data = val.data ? JSON.parse(val.data) : {};
|
||||
// point.highlight(data.id) //高亮展示选中的点位
|
||||
_that.openInfoDetail(flag, [data]) //点击打开详情
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 撒点
|
||||
* @param {*} coords 坐标 geojson
|
||||
* @param {*} icon 图标
|
||||
* @param {*} flag 标识
|
||||
* @param {*} showTitle 是否展示标题
|
||||
*/
|
||||
|
||||
MapUtil.prototype.makerSki = (res) => {
|
||||
let { coords, icon, flag, showTitle } = res
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = []; //存储地图标识的容器
|
||||
if (!_that.idsBox[flag]) _that.idsBox[flag] = []; //存储id的容器
|
||||
if (flag == 'rx') {
|
||||
_that.handlePolice(coords, icon, flag, showTitle)
|
||||
} else {
|
||||
coords.forEach(item => {
|
||||
let el = document.createElement("img");
|
||||
el.src = item.icon || icon;
|
||||
el.style.width = flag == 'kfd' ? '32px' : "25px";
|
||||
if (flag.includes('jczMap_')) el.style.width = '45px';
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
|
||||
const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: [0, 0] })
|
||||
el.addEventListener("click", () => {
|
||||
_that.openInfoDetail(flag, item) //点击打开详情
|
||||
})
|
||||
_that._self[flag].push(marker)
|
||||
_that.idsBox[flag].push(item.id)
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// 警力处理展示
|
||||
MapUtil.prototype.handlePolice = (coords, icon, flag, showTitle) => {
|
||||
// 01-大型车辆-DXCL， 02-小型车辆=XXCL，03-摩托车-MTC，04-其他车辆-QTCL，05-重型车辆-ZXCL，06-风控车-FKC，07-巡逻车-XLC，08-装甲车-ZJC
|
||||
coords.forEach(item => {
|
||||
let el = document.createElement("img");
|
||||
let jcIcon = require(`@/assets/point/police-car-bx.png`);
|
||||
switch (item.lx) {
|
||||
case '01': // 特警
|
||||
jcIcon = require(`@/assets/point/specialPolice.png`);
|
||||
break;
|
||||
case '02': // 交警
|
||||
jcIcon = require(`@/assets/point/trafficPolice.png`);
|
||||
break;
|
||||
case '03': // 派出所民警
|
||||
jcIcon = require(`@/assets/point/peoplePolice.png`);
|
||||
break;
|
||||
default: // 默认图标
|
||||
jcIcon = require(`@/assets/point/specialPolice.png`);
|
||||
break;
|
||||
}
|
||||
if (item.zzlx == 1) jcIcon = require(`@/assets/point/by.png`); //便衣
|
||||
let cllxList = item.cllx ? item.cllx.split(',') : [];
|
||||
|
||||
if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '02') jcIcon = require(`@/assets/point/xljmtc.png`); //交警-摩托车
|
||||
if ((cllxList.includes('03') || cllxList.includes('04')) && item.lx == '01') jcIcon = require(`@/assets/point/tjc.png`); //特警-摩托车
|
||||
if (cllxList.includes('08') || cllxList.includes('06')) jcIcon = require(`@/assets/point/zjc.png`); //装甲车
|
||||
|
||||
el.src = jcIcon;
|
||||
let isShoeCar = cllxList.includes('03') || cllxList.includes('08') //车辆类型
|
||||
// el.style.width = isShoeCar ? '38px':"25px"; //图片大小
|
||||
// if(cllxList.includes('08')) el.style.height = '40px'
|
||||
if (showTitle) _that.makerShowTitle(item, [item.jd, item.wd], flag) //展示标题
|
||||
_that.shouIcon(item, [item.jd, item.wd]); // 展示装备图标
|
||||
|
||||
let offset = isShoeCar ? [-10, 0] : [0, 0];
|
||||
if (cllxList.includes('08')) offset = [-12, -10]
|
||||
const marker = map.Marker(el, [item.jd, item.wd], { anchor: 'bottom', offset: offset })
|
||||
el.addEventListener("click", () => {
|
||||
_that.openInfoDetail(flag, item) //点击打开详情
|
||||
})
|
||||
_that._self[flag].push(marker)
|
||||
_that.idsBox[flag].push(item.id)
|
||||
});
|
||||
}
|
||||
|
||||
// 信息框展示
|
||||
MapUtil.prototype.makerShowTitle = (item,points,flag,text) =>{
|
||||
let T = flag == 'rx' ? 'rxTitle' :'Title'
|
||||
let flagT = flag+T;
|
||||
if(!_that._self[flagT]) _that._self[flagT] = [];
|
||||
|
||||
// 展示名字
|
||||
let textTitle = item.jzMc ? item.jzMc : item.fzrXm + '警组';
|
||||
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') textTitle = item.sbmc;
|
||||
if (flag == 'gapText') textTitle = text;
|
||||
|
||||
// 设置样式
|
||||
const el = document.createElement('div');
|
||||
el.className = 'makerTitle';
|
||||
if (flag == 'sbwz_car' || flag == 'sbwz_sb' || flag == 'sbwz_zfjly') el.className = 'makerTitlezb';
|
||||
if (flag == 'rx') {
|
||||
if (item.xfzt == '0') el.classList.add('makerTitleLine');
|
||||
else if (item.xfzt == '1') el.classList.add('makerTitlecj');
|
||||
else el.classList.add('makerTitleUnLine');
|
||||
}
|
||||
if (flag == 'gapText') el.className = 'makerTitleGapText';
|
||||
|
||||
// 渲染
|
||||
el.innerHTML = textTitle;
|
||||
const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -50] })
|
||||
_that._self[flagT].push(marker)
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 装备图标
|
||||
* @param {点位数据} data
|
||||
* @param {点} point
|
||||
*/
|
||||
MapUtil.prototype.shouIcon = (data, point) => {
|
||||
if (!_that._self.gpsZb) _that._self.gpsZb = []
|
||||
var qxIcon = require(`@/assets/point/qx.png`); //qixie
|
||||
var zfjlyIcon = require(`@/assets/point/interphone.png`); // 对讲机
|
||||
var clIcon = require(`@/assets/point/car.png`); // 车辆
|
||||
let jyqx = typeof data.jyqx == "string" ? JSON.parse(data.jyqx) : data.jyqx ? data.jyqx : [];
|
||||
let txzb = typeof data.txzb == "string" ? JSON.parse(data.txzb) : data.txzb ? data.txzb : [];
|
||||
let pbcl = typeof data.pbcl == "string" ? JSON.parse(data.pbcl) : data.pbcl ? data.pbcl : [];
|
||||
let list = []
|
||||
let cl = (pbcl && pbcl.length > 0) ? true : false; // 车辆
|
||||
let zb = (txzb && txzb.length > 0) ? true : false; // 智能装备
|
||||
let qx = (jyqx && jyqx.length > 0) ? true : false; // 警用器械
|
||||
if (zb) {
|
||||
let el = document.createElement("img");
|
||||
el.style.width = "15px"
|
||||
el.src = zfjlyIcon;
|
||||
const makerZb = map.Marker(el, point, { anchor: 'bottom', offset: [20, -26] })
|
||||
list.push(makerZb)
|
||||
}
|
||||
if (qx) {
|
||||
let elqx = document.createElement("img");
|
||||
elqx.style.width = "15px"
|
||||
elqx.src = qxIcon;
|
||||
const makerQx = map.Marker(elqx, point, { anchor: 'bottom', offset: [20, -10] })
|
||||
list.push(makerQx)
|
||||
}
|
||||
if (cl) {
|
||||
let elcl = document.createElement("img");
|
||||
elcl.style.width = "20px"
|
||||
elcl.src = clIcon;
|
||||
const makerCl = map.Marker(elcl, point, { anchor: 'bottom', offset: [20, 2] })
|
||||
list.push(makerCl)
|
||||
}
|
||||
_that._self.gpsZb[data.id] = list
|
||||
}
|
||||
|
||||
|
||||
// 自定义展示
|
||||
MapUtil.prototype.zdySquire = (obj) => {
|
||||
let { points, flag, distance } = obj
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let textTitle = '距离：' + distance; // 展示名字
|
||||
const el = document.createElement('div');
|
||||
el.className = 'makerTitle';
|
||||
if (flag == 'distance') el.className = 'makerTitleDistance'; // 设置样式
|
||||
el.innerHTML = textTitle;
|
||||
const marker = map.Marker(el, points, { anchor: 'bottom', offset: [0, -76] }) // 渲染
|
||||
_that._self[flag].push(marker)
|
||||
}
|
||||
|
||||
/**扩散圆
|
||||
* @param coords:[jd,wd]
|
||||
*/
|
||||
MapUtil.prototype.diffusionCircle = (obj) => {
|
||||
let { coords, flag, isClear } = obj
|
||||
if (!_that._self[flag]) _that._self[flag] = {}
|
||||
if (isClear) _that._self[flag].destroy() //destroy销毁，show(false) 移除
|
||||
let data = [{ position: coords }]
|
||||
_that._self[flag] = map.DiffuseCircle(data, {
|
||||
radius: 10,
|
||||
color: 'rgba(81,217,254)',//扫描扇形的颜色，必须是十六进制或者rgb
|
||||
duration: 30,//圆环与上一个圆环出现的间隔时间。配合speed参数可以调整圆圈的数量
|
||||
speed: 4 //圆环移动速度
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 聚合撒点
|
||||
* @param {*} coords 点位数据 geojson lng lat
|
||||
* @param {*} icon 点位图
|
||||
*/
|
||||
MapUtil.prototype.aggregateScatteringPoint = (obj) => {
|
||||
let { coords, icon, flag, isclear, scale, fontColor } = obj;
|
||||
let points = coords.map(item => {
|
||||
item.lng = item.jd;
|
||||
item.lat = item.wd;
|
||||
return item
|
||||
})
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isclear) _that.removeElement(flag) //移除聚合
|
||||
let maker = map.clusterLayer(points, {
|
||||
id: flag,
|
||||
size: 18,
|
||||
pixelRange: 60,
|
||||
// gradient:{'1':'#00BFFF','10':'#008000', '100':'#FFA500', '1000':'#FF0000'},//可以自定义图片,把颜色换成图片地址
|
||||
gradient: { '1': icon, '10': icon, '100': icon, '1000': icon },//可以自定义图片,把颜色换成图片地址
|
||||
fontSize: 14,
|
||||
fontColor: fontColor ? fontColor : '#001022',
|
||||
style: 'custom',// spiral（螺旋形状），circle(圆圈)，custom(自定义)
|
||||
image: icon,
|
||||
scale: scale ? scale : 1,
|
||||
// highlightImage:icon,
|
||||
fontFamily: ['Microsoft YaHei']
|
||||
})
|
||||
|
||||
_that._self[flag].push(maker)
|
||||
|
||||
// 聚合的点击一个
|
||||
maker.addEventListener("click", (val) => {
|
||||
_that.openInfoDetail(flag, [val]) //点击打开详情
|
||||
})
|
||||
// 聚合的多个
|
||||
maker.addEventListener("clusterClick", (val) => {
|
||||
_that.openInfoDetail(flag, val) //点击打开详情
|
||||
})
|
||||
};
|
||||
|
||||
/**
|
||||
* 热力图
|
||||
* @param {*} coords 数组
|
||||
*/
|
||||
MapUtil.prototype.showHeatDrawing = (res) => {
|
||||
let { coords, flag,isclear ,color} = res;
|
||||
if(!_that._self[flag]) _that._self[flag] = [];
|
||||
if(isclear) _that.removeElement(flag) //清除热力
|
||||
let data = {
|
||||
type: 'FeatureCollection',
|
||||
features: []
|
||||
}
|
||||
for (let index = 0; index < coords.length; index++) {
|
||||
const item = coords[index];
|
||||
let jd = item.lng || item.jd;
|
||||
let wd = item.lat || item.wd;
|
||||
let mag = item.count <= 10 ? 1.4 : (item.count > 10 && item.count <= 50) ? 1.6 : 1.9;
|
||||
let obj = {
|
||||
properties: { mag },
|
||||
type: 'Feature',
|
||||
geometry: { type: 'Point', coordinates: [jd, wd, 0.1] }
|
||||
}
|
||||
data.features.push(obj)
|
||||
}
|
||||
let colors = { '0': 'rgba(23,102,172,0)', '0.5': 'rgb(209,229,240)', '1': 'rgb(178,24,43)' }
|
||||
if (color) colors = { '0': color[0], '0.5': color[1], '1': color[2] }
|
||||
let heartmap = map.HeatMap(data, { colors })
|
||||
_that._self[flag].push(heartmap)
|
||||
};
|
||||
|
||||
|
||||
// 清除所有
|
||||
MapUtil.prototype.removeAll = () => {
|
||||
for(let key in _that._self){
|
||||
if(key != 'rx' && key !='gpsZb' && !key.includes('rxTitle')){
|
||||
let list = _that._self[key]
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const el = list[i];
|
||||
if(el && typeof el == 'object') el.destroy() //destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[key] = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除图层要素
|
||||
* @param {*} layer 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeElement = (layer) => {
|
||||
//警力装备
|
||||
if (layer == 'gpsZb') {
|
||||
for (let key in _that._self.gpsZb) {
|
||||
let item = _that._self.gpsZb[key]
|
||||
if (item && item.length > 0) {
|
||||
for (let child in item) { item[child].destroy() }
|
||||
_that._self.gpsZb[key] = []
|
||||
}
|
||||
}
|
||||
}
|
||||
if(layer == 'rx') _that.idsBox[layer] = [];
|
||||
// 其他图层
|
||||
if (!_that._self[layer]) return false;
|
||||
|
||||
if (layer !== 'gpsZb') {
|
||||
for (let i = 0; i < _that._self[layer].length; i++) {
|
||||
const el = _that._self[layer][i];
|
||||
el.destroy()//destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[layer] = [];
|
||||
|
||||
// d带标题的撒点
|
||||
let T = layer == 'rx' ? 'rxTitle' :'Title'
|
||||
let flagT = layer+T;
|
||||
if (!_that._self[flagT]) return false;
|
||||
for (let i = 0; i < _that._self[flagT].length; i++) {
|
||||
const el = _that._self[flagT][i];
|
||||
el.destroy()//destory()销毁 , show(false) false:隐藏 true ：展示
|
||||
}
|
||||
_that._self[flagT] = []
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 删除图层的某个要素
|
||||
* @param {*} layer 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeElementOne = (layer, id) => {
|
||||
if (!_that.idsBox[layer]) return false;
|
||||
let list = _that.idsBox[layer];
|
||||
list.forEach((el, index) => {
|
||||
if (el == id) {
|
||||
_that.idsBox[layer].splice(index, 1);
|
||||
if (_that._self[layer][index]) _that._self[layer][index].destroy()
|
||||
_that._self[layer].splice(index, 1)
|
||||
if(layer == 'rx'){
|
||||
let flagT = layer +'rxTitle';
|
||||
if(_that._self[flagT][index]) _that._self[flagT][index].destroy()
|
||||
_that._self[flagT].splice(index, 1)
|
||||
_that.removeGpsZbOverlayById(id) //删除图标
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// 删除图标装备
|
||||
MapUtil.prototype.removeGpsZbOverlayById = (id) => {
|
||||
if (_that._self.gpsZb[id]) {
|
||||
try {
|
||||
let info = _that._self.gpsZb[id]
|
||||
if (info) {
|
||||
info.forEach(element => { element.destroy() });
|
||||
delete _that._self.gpsZb[id]
|
||||
}
|
||||
} catch (err) { }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 绘制数据的初始化
|
||||
MapUtil.prototype.Drawplot = (color) => {
|
||||
const { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit } = map.draw({
|
||||
lineWidth: 2,
|
||||
lineColor: 'rgba(233,168,32,1)',
|
||||
fillColor: 'rgba(233,168,32,0.5)',
|
||||
color: 'rgba(233,168,32,1)',
|
||||
pixelSzie: 0,
|
||||
})
|
||||
_that._CustomDraw = { point, line, polygon, circle, rectangle, geoJson, remove, enableEdit }
|
||||
}
|
||||
/**
|
||||
* 绘制工具
|
||||
* @param {*} type 绘制形状
|
||||
* (point 点, line 线, circle 圆, polygon 多边形, rectangle 矩形) ,
|
||||
* geoJson:根据geojson回显图
|
||||
*/
|
||||
MapUtil.prototype.plot = (res,resFun) => {
|
||||
let {flag ,color,linecolor, type ,coords} = res
|
||||
if(!_that._self[flag]) _that._self[flag] = [];
|
||||
if(res.isclear) _that.removePlot(flag); //移除绘制工具
|
||||
if(res.isclear && (res.type == 'polygon' || res.type == 'line')) _that.removeEara(flag); //移除回显的面和线条
|
||||
switch(type){
|
||||
case 'point':
|
||||
_that._CustomDraw.point((val) => { _that.handlePlot(val, type, flag, resFun) })
|
||||
break;
|
||||
case 'rectangle':
|
||||
_that._CustomDraw.rectangle((val) => { _that.handlePlot(val, type, flag, resFun) })
|
||||
break;
|
||||
case 'circle':
|
||||
_that._CustomDraw.circle((val) => { _that.handlePlot(val, type, flag, resFun) })
|
||||
break;
|
||||
case 'polygon':
|
||||
_that._CustomDraw.polygon((val) => { _that.handlePlot(val, type, flag, resFun) }, {
|
||||
fillColor: color || 'rgba(233,168,32,0.5)',
|
||||
lineColor: linecolor || 'rgba(233,168,32,1)',
|
||||
})
|
||||
break;
|
||||
case 'line':
|
||||
_that._CustomDraw.line((val) => { _that.handlePlot(val, type, flag, resFun) })
|
||||
break;
|
||||
case 'geoJson'://返回面
|
||||
let json = {
|
||||
type: 'FeatureCollection',
|
||||
features: [{
|
||||
type: 'Feature',
|
||||
geometry: {
|
||||
type: 'Polygon',
|
||||
coordinates: coords // coords 是三维数组
|
||||
},
|
||||
id: flag,
|
||||
properties: {
|
||||
fillColor: color || 'rgba(233,168,32,1)',
|
||||
lineColor: linecolor || 'rgba(233,168,32,1)',
|
||||
}
|
||||
}],
|
||||
}
|
||||
_that._CustomDraw.geoJson(json, (data) => { _that.handlePlot(data, type, flag, resFun) })
|
||||
break;
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 处理自定义数据
|
||||
* @param {*} val 返回数据
|
||||
* @param {*} type 类型
|
||||
* @param {*} flag 唯一标识
|
||||
* @param {*} resFun 回调
|
||||
*/
|
||||
// 校验
|
||||
MapUtil.prototype.handlePlot = (val, type, flag, resFun) => {
|
||||
_that._self[flag].push(val.id)
|
||||
let coords = val.positionData; //绘制区域
|
||||
resFun(coords, type, flag, val);
|
||||
}
|
||||
|
||||
/**
|
||||
* 移除绘制工具
|
||||
* @param {*} flag 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removePlot = (flag) => {
|
||||
if (!_that._self[flag]) return false;
|
||||
_that._self[flag].forEach(v => {
|
||||
_that._CustomDraw.remove(v)
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 移除绘制面
|
||||
* @param {*} flag 唯一标识
|
||||
*/
|
||||
MapUtil.prototype.removeEara = (flag) => {
|
||||
_that._CustomDraw.remove(flag)
|
||||
_that.removePlot(flag)
|
||||
}
|
||||
/**
|
||||
* 创建线
|
||||
* @param {*} type 回显形状
|
||||
* (solid 实线, dash 虚线, FlowColor 彩虹线, RoadLine 流线
|
||||
*/
|
||||
MapUtil.prototype.createLine = (res) => {
|
||||
let { type , coords , isclear ,flag ,color,width } = res;
|
||||
if(!coords) return false; // coords 是数组对象，可以同时撒多条数据
|
||||
if(!_that._self[flag]) _that._self[flag] = [] ;
|
||||
if(isclear) _that.removeElement(flag); //移除回显的线条
|
||||
let data = coords.map((item,index)=>{
|
||||
return {
|
||||
position: item.coords[0], //二维数组
|
||||
text: '',
|
||||
id: index,
|
||||
userData: {
|
||||
name: item.text
|
||||
}
|
||||
}
|
||||
})
|
||||
let line = map.createLine(data, {
|
||||
color: color ? color : 'rgba(20, 237, 245,1)',
|
||||
width: width ? width : 8,
|
||||
type,
|
||||
highlightColor: 'red',
|
||||
labelOption: {
|
||||
pixelOffset: [0, -1],
|
||||
allShow: false,
|
||||
type: 'text',
|
||||
fontColor: 'rgba(20, 237, 245,1)'
|
||||
}
|
||||
})
|
||||
_that._self[flag].push(line)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 回显平面- 圆 - 多边形 - 矩形
|
||||
* @param {*} type 回显形状
|
||||
* type: 'polygon', 'rectangle
|
||||
coords = [{
|
||||
position:[[[jd,wd],[jd,wd] ---]], //三维数组
|
||||
text,//展示的文字
|
||||
id, //唯一标识
|
||||
FID, //渲染颜色的标识
|
||||
userData:{} //存储数据
|
||||
}]
|
||||
|
||||
* type:circle
|
||||
coords:[jd,wd] radius:半径
|
||||
|
||||
* @param {*} text 展示的文字
|
||||
*/
|
||||
MapUtil.prototype.echoPlane = (res) => {
|
||||
let { type, coords, fontColor, fontSize, text = '', radius = 0, isclear, flag, id = 1, color, linecolor } = res;
|
||||
if (!coords) return;
|
||||
if (isclear) _that.removeElement(flag)
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
let color1 = color ? color : 'rgba(29,237,245,0.6)'
|
||||
let linecolor1 = linecolor ? linecolor : 'rgba(29,237,245,0.6)'
|
||||
let style = {
|
||||
color: color1,
|
||||
outLineColor: linecolor1,
|
||||
outLineWidth: 2,
|
||||
highlightColor: 'rgba(255,0,0,0.5)',
|
||||
labelOption: {
|
||||
pixelOffset: [0, 0],
|
||||
allShow: true,
|
||||
fontColor: fontColor ? fontColor : '#ffffff',
|
||||
fontSize: fontSize ? fontSize : '12px'
|
||||
}
|
||||
}
|
||||
let maker;
|
||||
// 圆
|
||||
if (type == 'circle') {
|
||||
let params = [{ center: coords, radius, text, id }]
|
||||
maker = map.createCircle(params, style);
|
||||
}
|
||||
|
||||
// 矩形
|
||||
if (type == 'rectangle') maker = map.createRectangle(coords, style);
|
||||
|
||||
// 多边形
|
||||
if (type == 'polygon') maker = map.createPolygon(coords, style);
|
||||
_that._self[flag].push(maker);
|
||||
|
||||
maker.addEventListener("click", (val) => {
|
||||
if (flag == 'xfq') {
|
||||
maker.highlight(val.id) //高亮展示
|
||||
emitter.emit('showXFQinfo', val)
|
||||
if (val.id == _that.lightHeight) {
|
||||
_that.isCheck = !_that.isCheck
|
||||
if (_that.isCheck) {
|
||||
maker.highlight(0); //取消高亮展示
|
||||
emitter.emit('showXFQinfo', null)
|
||||
} else {
|
||||
emitter.emit('showXFQinfo', val)
|
||||
}
|
||||
}
|
||||
_that.lightHeight = val.id
|
||||
}
|
||||
if (flag == 'zdxl_fzyc') {
|
||||
emitter.emit('showFzycInfo', { info: val, type: true })
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 分割线展示文字
|
||||
MapUtil.prototype.gapText = (obj) => {
|
||||
let { points, text, flag } = obj
|
||||
_that.makerShowTitle({}, points, flag, text) //展示标题
|
||||
}
|
||||
|
||||
/**
|
||||
* 轨迹回放
|
||||
* @param {*} coords 轨迹坐标.二维数组[[104.03640684556253,30.7415801286654],[103.98021233220163,30.6555411499294],[103.85766040251299,30.58094579138167]]
|
||||
* @param {*} isClear 是否清除上一次的记录
|
||||
*/
|
||||
MapUtil.prototype.displayLineAnimation = (res) => {
|
||||
let { coords, isClear, flag } = res
|
||||
if (!coords) return;
|
||||
if (!_that._self[flag]) _that._self[flag] = [];
|
||||
if (isClear && _that._self[flag]) _that.removeElement(flag); //destroy 移除,start 播放,pause 暂停
|
||||
let lineString = getUUid().slice(3, 5)
|
||||
const data = [
|
||||
{
|
||||
position: coords,
|
||||
text: '实线',
|
||||
id: lineString,
|
||||
userData: { name: '测试1' }
|
||||
}
|
||||
]
|
||||
const track = map.trajectoryRealtime(data, {
|
||||
color: '#28F', //轨迹背景颜色
|
||||
width: 8,
|
||||
image: 'images/car.png',
|
||||
speed: 80, // 单位 m/s
|
||||
imageWidth: 20,
|
||||
imageHeight: 40,
|
||||
isShowLine: false, //轨迹线是否显示
|
||||
isAgain: false,//轨迹运动是否重复,
|
||||
traveledColor: '#32b1fb' //运动轨迹颜色
|
||||
})
|
||||
track.start()
|
||||
|
||||
track.on('length', (data) => {
|
||||
let obj = { flag }
|
||||
if (data && data[0].percent == 0) {
|
||||
obj.icon = require('@/assets/point/start.png') // 开始
|
||||
let item = data[0].position[0]
|
||||
obj.coords = [{ jd: item[0], wd: item[1] }]
|
||||
_that.makerSki(obj)
|
||||
}
|
||||
if (data && data[0].percent == 99) {
|
||||
let len = data[0].position.length
|
||||
let val = data[0].position[len - 1]
|
||||
obj.coords = [{ jd: val[0], wd: val[1] }]
|
||||
obj.icon = require('@/assets/point/end.png') // 结束
|
||||
_that.makerSki(obj)
|
||||
}
|
||||
})
|
||||
_that._self[flag].push(track)
|
||||
}
|
||||
|
||||
// 移除轨迹
|
||||
MapUtil.prototype.removeTrajectory = (flag) => {
|
||||
if (_that._self[flag]) {
|
||||
_that._self[flag].destroy();
|
||||
_that._self[flag] = null
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**geojson 创建边界
|
||||
* let data = {
|
||||
* type: "FeatureCollection",
|
||||
* features: [
|
||||
* {
|
||||
geometry: {
|
||||
type: "Polygon",
|
||||
coordinates: [it.coordinates]
|
||||
},
|
||||
properties: {
|
||||
},
|
||||
type: "Feature",
|
||||
}
|
||||
* ]
|
||||
};
|
||||
*/
|
||||
MapUtil.prototype.createBoundarys = (res) => {
|
||||
let { data } = res
|
||||
if (!data) return false;
|
||||
if (_that.polygonGeo) _that.removeBj();
|
||||
_that.polygonGeo = map.createPolygon(data, {
|
||||
color: 'rgba(20,237,245,0.3)',
|
||||
outLineColor: '#cf1010',
|
||||
outLineWidth: 6,
|
||||
highlightColor: 'red',
|
||||
type: 'solid',
|
||||
labelOption: {
|
||||
pixelOffset: [2, 0],
|
||||
allShow: false,
|
||||
fontColor: '#ffffff'
|
||||
}
|
||||
})
|
||||
_that.polygonGeo.flyTo()
|
||||
}
|
||||
// 移除边界
|
||||
MapUtil.prototype.removeBj = (res) => {
|
||||
_that.polygonGeo.destroy()
|
||||
}
|
||||
|
||||
// 打开详情弹窗
|
||||
MapUtil.prototype.openInfoDetail = (flag, data) => {
|
||||
switch (flag) {
|
||||
case "rx":
|
||||
emitter.emit('showJzInfo', data);
|
||||
break;
|
||||
case 'gaj':
|
||||
case 'pcs':
|
||||
case 'jwz':
|
||||
case 'xfq':
|
||||
case 'zdfkd':
|
||||
emitter.emit('showGazy', data);
|
||||
break;
|
||||
case 'kfd':
|
||||
emitter.emit("changeGroupPoint", { lx: 'kfd', xffwlx: '2', xffwid: data.kfdId });
|
||||
emitter.emit('showGazy', [data]);
|
||||
break;
|
||||
case 'sp':
|
||||
emitter.emit('showGzy', data);
|
||||
emitter.emit("showGzyInfo", data);
|
||||
break;
|
||||
case 'kk':
|
||||
emitter.emit('showGzy', data);
|
||||
break;
|
||||
case 'aj':
|
||||
case 'jqMap':
|
||||
emitter.emit('showAj', data);
|
||||
break;
|
||||
case 'yj':
|
||||
case 'yjMap':
|
||||
emitter.emit("showYjxq", data);
|
||||
break;
|
||||
case 'dzjg':
|
||||
case 'school':
|
||||
case 'hospital':
|
||||
case 'banck':
|
||||
case 'shop':
|
||||
emitter.emit("showShzy", data);
|
||||
break;
|
||||
case 'qchzc_map':
|
||||
case 'jczMap_hm':
|
||||
case 'jczMap_hhx':
|
||||
emitter.emit("showJcz", [data]);
|
||||
break;
|
||||
case 'cyryMap':
|
||||
console.log(data, '从业人员');
|
||||
emitter.emit("showCyry", [data]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 获取uuid 作为边界图层ID
|
||||
function getUUid() {
|
||||
var list = [];
|
||||
var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyz";
|
||||
for (var i = 0; i < 32; i++) {
|
||||
list[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
|
||||
}
|
||||
list[14] = "4";
|
||||
list[19] = hexDigits.substr((list[19] & 0x3) | 0x8, 1);
|
||||
list[8] = list[13] = list[18] = list[23];
|
||||
let uuid = list.join("");
|
||||
return uuid;
|
||||
}
|
||||
|
||||
|
||||
3
src/components/GdMap/rs.json
Normal file
3
src/components/GdMap/rs.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"coords":"104.191712,30.332337,104.190379,30.321575,104.231962,30.315252,104.227763,30.283791,104.241479,30.268395,104.228153,30.257561,104.242864,30.244730,104.270769,30.240455,104.269092,30.219985,104.277914,30.224568,104.293406,30.209630,104.302729,30.213200,104.307097,30.202998,104.325129,30.207037,104.355347,30.194195,104.363096,30.183460,104.354874,30.185101,104.352787,30.178549,104.386214,30.163126,104.392108,30.139422,104.386563,30.134069,104.406584,30.128212,104.417883,30.110023,104.411449,30.102072,104.421724,30.093237,104.433945,30.091459,104.434490,30.102374,104.447575,30.103505,104.455815,30.090000,104.477106,30.090159,104.472787,30.079513,104.480840,30.075074,104.465410,30.062860,104.479359,30.049892,104.456587,30.050092,104.452813,30.040084,104.465165,30.035835,104.455327,30.027999,104.458818,30.019591,104.448027,29.999489,104.477911,29.990649,104.457530,29.956299,104.478816,29.947313,104.470366,29.937748,104.486035,29.924377,104.486081,29.908460,104.505562,29.900162,104.492675,29.891903,104.492992,29.877076,104.501067,29.874142,104.487466,29.868024,104.475572,29.839224,104.480389,29.823872,104.473848,29.813915,104.499239,29.808909,104.491448,29.794094,104.465447,29.790942,104.442186,29.735454,104.427166,29.742971,104.414194,29.733388,104.404817,29.736075,104.393217,29.753224,104.373968,29.744401,104.367685,29.731782,104.356188,29.739397,104.355446,29.733333,104.335661,29.730418,104.332333,29.717842,104.347244,29.712211,104.346778,29.702659,104.336663,29.700136,104.313561,29.713003,104.295611,29.673814,104.280138,29.671614,104.283271,29.663143,104.274707,29.653997,104.280570,29.652266,104.271474,29.639306,104.247799,29.635751,104.237983,29.645245,104.243843,29.650490,104.231474,29.654349,104.237800,29.660088,104.228079,29.663086,104.233011,29.673066,104.227693,29.678490,104.204520,29.666834,104.193826,29.684265,104.200269,29.695269,104.183408,29.688925,104.185530,29.712206,104.181102,29.708149,104.167587,29.719218,104.164097,29.712006,104.156209,29.719685,104.147994,29.708280,104.132691,29.711712,104.116456,29.735662,104.105234,29.739340,104.109314,29.745872,104.099019,29.750351,104.088669,29.742201,104.058084,29.781140,104.070105,29.785362,104.088526,29.816182,104.072903,29.815785,104.072469,29.829395,104.040234,29.833418,104.056118,29.857406,104.049233,29.871115,104.040958,29.865559,104.027382,29.876641,104.001555,29.876057,103.981529,29.851563,103.964863,29.857306,103.968616,29.869100,103.991537,29.880289,103.998148,29.894420,103.984192,29.887484,103.969852,29.890776,103.952945,29.917885,103.962461,29.927505,103.946054,29.965100,103.952523,29.969262,103.917956,29.980131,103.926683,29.990640,103.959824,29.983321,103.957729,29.994857,103.972654,30.001121,103.966893,30.009745,103.977840,30.029956,103.971729,30.047714,103.987262,30.074897,103.977687,30.093740,103.981558,30.102835,103.968602,30.112735,103.978708,30.128111,103.970273,30.143360,103.981090,30.145538,103.982377,30.158880,103.974518,30.161745,103.979487,30.172736,103.969649,30.180335,103.989892,30.197132,103.959528,30.216906,103.966730,30.233955,103.979510,30.240572,103.964281,30.252780,103.969394,30.267698,103.984404,30.277331,103.997281,30.265453,104.047086,30.274065,104.051446,30.261304,104.062409,30.268811,104.066778,30.256984,104.074634,30.261237,104.078283,30.250003,104.089862,30.253217,104.094024,30.241503,104.124537,30.228739,104.149999,30.246957,104.150805,30.269599,104.165559,30.285692,104.179104,30.327688,104.191656,30.332522,104.191712,30.332337;104.479952"
|
||||
}
|
||||
@ -1,71 +1,73 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<!-- 头部 -->
|
||||
<Head type="importantPerson"></Head>
|
||||
<!-- 左边内容 -->
|
||||
<div class="home-aside asideL" style="left:0">
|
||||
<ImportantPerson></ImportantPerson>
|
||||
</div>
|
||||
<!-- 右边内容 -->
|
||||
<div class="home-aside asideR" style="right:0">
|
||||
<div class="aside-middle mt60">
|
||||
<Zdrqhd></Zdrqhd>
|
||||
</div>
|
||||
<div class="aside-middle">
|
||||
<Yjclqktj></Yjclqktj>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="footBtn"><span>发布指令</span></div>
|
||||
</div>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- 头部 -->
|
||||
<Head type="importantPerson"></Head>
|
||||
<!-- 左边内容 -->
|
||||
<div class="home-aside asideL" style="left: 0">
|
||||
<ImportantPerson></ImportantPerson>
|
||||
</div>
|
||||
<!-- 右边内容 -->
|
||||
<div class="home-aside asideR" style="right: 0">
|
||||
<div class="aside-middle mt60">
|
||||
<Zdrqhd></Zdrqhd>
|
||||
</div>
|
||||
<div class="aside-middle">
|
||||
<Yjclqktj></Yjclqktj>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="foot">
|
||||
<div class="footBtn"><span>发布指令</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Head from '@/views/home/layout/head.vue';
|
||||
import ImportantPerson from './model/importantPerson.vue'
|
||||
import Zdrqhd from './model/zdrqhd.vue'
|
||||
import Yjclqktj from './model/yjclqktj.vue'
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Head from "@/views/home/layout/head.vue";
|
||||
import ImportantPerson from "./model/importantPerson.vue";
|
||||
import Zdrqhd from "./model/zdrqhd.vue";
|
||||
import Yjclqktj from "./model/yjclqktj.vue";
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/css/homeScreen.scss";
|
||||
.foot{
|
||||
.foot {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%);
|
||||
width: 1380px;
|
||||
height: 107px;
|
||||
background: url("~@/assets/images/foot.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.footBtn {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
bottom: 46px;
|
||||
transform: translate(-50%);
|
||||
width: 1380px;
|
||||
height: 107px;
|
||||
background: url("~@/assets/images/foot.png") no-repeat center center;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/bg02.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
.footBtn{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 46px;
|
||||
transform: translate(-50%);
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
text-align: center;
|
||||
background: url("~@/assets/images/bg02.png") no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
cursor: pointer;
|
||||
span{
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
white-space: wrap;
|
||||
margin-top: 37px;
|
||||
}
|
||||
cursor: pointer;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
white-space: wrap;
|
||||
margin-top: 37px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.asideL{
|
||||
background: linear-gradient( to right, rgba(78, 98, 132,0.8) 0%, #fff 100%);
|
||||
.asideL {
|
||||
background: linear-gradient(to right, rgba(78, 98, 132, 0.8) 0%, #fff 100%);
|
||||
}
|
||||
.asideR{
|
||||
background: linear-gradient( to left, rgba(78, 98, 132,0.8) 0%, #fff 100%);
|
||||
.asideR {
|
||||
background: linear-gradient(to left, rgba(78, 98, 132, 0.8) 0%, #fff 100%);
|
||||
}
|
||||
.homeBox .home-contant .home-aside .aside-middle{
|
||||
height: calc((100% - 60px)/2);
|
||||
.homeBox .home-contant .home-aside .aside-middle {
|
||||
height: calc((100% - 60px) / 2);
|
||||
}
|
||||
.transition {
|
||||
transition: all 0.5s;
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div class="homeBox">
|
||||
<GdMap></GdMap>
|
||||
<!-- 头部 -->
|
||||
<Head></Head>
|
||||
<!-- 内容 -->
|
||||
@ -30,6 +31,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import GdMap from "@/components/GdMap/index.vue";
|
||||
import Head from './layout/head.vue'
|
||||
import DbCount from './model/dbCount.vue'
|
||||
import QbfkCount from './model/qbfkCount.vue'
|
||||
|
||||
@ -244,6 +244,7 @@ onUnmounted(() => {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.zdy-meuns-popover {
|
||||
background: url("~@/assets/images/el-popper.png") no-repeat center center !important;
|
||||
|
||||
Reference in New Issue
Block a user