875 lines
26 KiB
JavaScript
875 lines
26 KiB
JavaScript
|
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;
|
|||
|
|
}
|