/**
* @mapConfig {string} mapConfig.target 地图 关联到对应的div容器
* @mapConfig {string} mapConfig.projection 地图 坐标系
* @mapConfig {string} mapConfig.center 地图 中心点经纬度
* @mapConfig {string} mapConfig.zoom 地图 层级
* @mapConfig {string} mapConfig.maxZoom 地图 最大层级
* @mapConfig {string} mapConfig.minZoom 地图 最小层级
* @mapConfig {string} mapConfig.type 地图 类型
* @mapConfig {string} mapConfig.url 地图 底图
* hightLightVectorLayer 地图高亮图层
*/
//矢量点实例
/* let paramsData={url:require("./../../../assets/icon/bg_modal.png"),picmaxZoom:15,picminZoom:0,labelmaxZoom:20,labelminZoom:15,opacity:1,color:"green"}
updateXFpoints(this.pointLayer.XFPointLayer,"river", [{ lon:112.422,lat:30.75}], paramsData); */
//矢量线实例
/* var paramsData={lineDash:[10, 10],strokeColor:"yellow",strokeWidth:2,maxZoom:18,minZoom:0,text:"好好",offsetX:-2,offsetY:2}
updateXFlines(this.lineLayer.XFLineLayer,"river", [{ geometry: "LINESTRING(114.005 30.35,112.422 30.75)"}], paramsData); */
//矢量面实例
/* var paramsData={lineDash:[10, 10],strokeColor:"yellow",fillColor:"blue",strokeWidth:2,maxZoom:18,minZoom:0,text:"好好",offsetX:-2,offsetY:2}
updateXFpolygons(this.polygonLayer.XFPolygonLayer,"river", [{ geometry: "multipolygon(((114.005 30.35,112.422 30.75,112.722 30.75,114.005 30.35)))"}], paramsData);
*/
import { Map, View, Feature } from "ol";
import { OSM, TileArcGISRest } from "ol/source";
import { Polygon, LineString } from "ol/geom";
import TileLayer from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import XYZ from "ol/source/XYZ";
import TileWMS from "ol/source/TileWMS";
import ImageArcGISRest from "ol/source/ImageArcGISRest";
import { defaults } from "ol/interaction";
import FormatWKT from "ol/format/WKT";
import Point from "ol/geom/Point";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import Stroke from "ol/style/Stroke";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Icon from "ol/style/Icon";
import Overlay from "ol/Overlay.js";
import Circle from "ol/style/Circle";
import Draw from "ol/interaction/Draw";
import Select from "ol/interaction/Select";
import Modify from "ol/interaction/Modify";
import GeoJSON from "ol/format/GeoJSON";
let map = null,
hightLightVectorLayer = null,
draw = null,
flashOverlay = null,
modifyInteraction = null,
preselectedFeature = null,
selectfeatureInteraction = null;
export const intCreateMap = (mapConfig) => {
//瓦片图层
// let mapLayer = new TileLayer({
// source: new XYZ({
// url: mapConfig.url,
// }),
// });
// 初始地图视图
let mapView = new View({
projection: mapConfig.projection,
center: mapConfig.center,
zoom: mapConfig.zoom,
maxZoom: mapConfig.maxZoom,
minZoom: mapConfig.minZoom,
// other options
});
// 地图对象
map = new Map({
target: mapConfig.target,
//layers: [mapLayer],
view: mapView,
controls: defaults({
attribution: false,
zoom: false,
rotate: false,
doubleClickZoom: false,
}),
});
loadXFmap(mapConfig.type, mapConfig.url);
return map;
};
/**
* type:type=0代表在线XYZ瓦片地图或nginx发布的TMS离线瓦片，type=1代表离线发布的arcgis地图,type=2代表离线发布的geoserver地图
* url: url为地图引用地址
* layername: layername为type=2类型时候必须指定的图层名
* @return {void} 无返回.
*/
export const loadXFmap = (type, url, layername) => {
let baseLayerAll = map.getLayers().array_;
for (var i = 0; i < baseLayerAll.length; i++) {
if (baseLayerAll[i].values_.zIndex == 0) {
map.removeLayer(baseLayerAll[i]);
break;
}
}
var currentLayer;
if (type == 0) {
currentLayer = new TileLayer({
zIndex: 0,
source: new XYZ({
crossOrigin: "anonymous",
url: url,
}),
});
} else if (type == 1) {
currentLayer = new ImageLayer({
zIndex: 0,
source: new ImageArcGISRest({
ratio: 1,
parmas: {},
url: url,
}),
});
} else if (type == 2) {
currentLayer = new TileLayer({
zIndex: 0,
source: new TileWMS({
url: url,
params: { LAYERS: layername, TILED: false },
projection: "EPSG:4326",
}),
});
}
map.addLayer(currentLayer);
setTimeout(() => {
map.updateSize();
}, 10);
};
//添加矢量图层
export const asdLayerVector = (zIndex) => {
let sourceVector = new SourceVector({
wrapX: false,
});
return new LayerVector({
source: sourceVector,
maxResolution: 2,
visible: true,
zIndex: zIndex,
});
};
//添加瓦片图层
export const addWpLayerTile = (zIndex, url, layername) => {
let XFwmsSource = new TileWMS({
url: url,
params: { LAYERS: layername, TILED: false },
projection: "EPSG:4326",
});
return new TileLayer({
source: XFwmsSource,
visible: true,
zIndex: zIndex,
});
};
//添加面板
export const addMenuOverlay = (target) => {
let menu_overlay = new Overlay({
element: document.getElementById(target),
positioning: "bottom-center",
offset: [0, -20],
});
menu_overlay.setVisible(false);
return menu_overlay;
};
/**
* 修改点矢量点，修改包括新增业务，所以都调用这个方法
* 入参
* tuglieId:tuglieId代码每一个图列的id,用于区分图列图层展示的不同；
* data: data为所需要配置到地图上的点位所有基础信息，必须包含经纬度lon,lat;
* params: params为对象{}，代表该类型所配置的图标、大小、层级、透明度、中心点、标注是否要等等样式
* @return {void} 无返回.
*/
export const updateXFpoints = (layer, tuglieId, data, params) => {
//做type类型的点矢量插入渲染
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (
data[i].lon != null &&
data[i].lat != null &&
data[i].lon != "" &&
data[i].lat != "" &&
parseFloat(data[i].lon) > -180 &&
parseFloat(data[i].lon) < 180 &&
parseFloat(data[i].lat) > -90 &&
parseFloat(data[i].lat) < 90
) {
var wkt = "POINT(" + data[i].lon + " " + data[i].lat + ")";
var feature = new FormatWKT().readFeature(wkt);
feature.tuglieId = tuglieId;
feature.lon = data[i].lon;
feature.lat = data[i].lat;
feature.cell = data[i];
feature.id = data[i].id;
feature.params = params;
feature.sampleData = data[i].sampleData; //基础数据
feature.setStyle(getXFpointsStyle);
layer.getSource().addFeature(feature);
}
}
}
};
export const getXFpointsStyle = (feature) => {
var currentZoom = map.getView().getZoom();
var params = feature.params;
//显示层级
var zIndex = params && params.zIndex ? params.zIndex : 0;
console.log("zIndex", zIndex);
//文字显示级别
var labelmaxZoom = params && params.labelmaxZoom ? params.labelmaxZoom : 22;
var labelminZoom = params && params.labelminZoom ? params.labelminZoom : 0;
//图片位置
var anchor = params && params.anchor ? params.anchor : [0.1, 0.1];
//图片放缩
var scale = params && params.scale ? params.scale : 1;
//图标显示级别
var picmaxZoom = params && params.picmaxZoom ? params.picmaxZoom : 22;
var picminZoom = params && params.picminZoom ? params.picminZoom : 0;
//var opacityCul = params && params.opacity ? params.opacity : 1;
var fillColor = params && params.fillColor ? params.fillColor : "red";
//边框颜色
var strokeColor = params && params.strokeColor ? params.strokeColor : "red";
//文字位置（2个字段，默认是0----number）
var offsetX = params && params.offsetX ? params.offsetX : 0;
var offsetY = params && params.offsetY ? params.offsetY : 0;
var thispng = params.url;
var pngsize = [50, 50];
var pngsizecul = [0, 0];
//显示文字级别
var textYvalue = params && params.text ? params.text : "";
var textStr = "";
if (textYvalue) {
if (currentZoom <= labelmaxZoom && currentZoom >= labelminZoom)
textStr = textYvalue;
else textStr = "";
}
//图片级别
if (pngsize) {
if (currentZoom <= picmaxZoom && currentZoom >= picminZoom)
pngsizecul = [50, 50];
else pngsizecul = [0, 0];
}
let style = null;
if (thispng) {
style = new Style({
image: new Icon({
src: thispng,
size: pngsizecul,
scale: scale,
anchor: anchor,
//opacity: opacityCul,
}),
text: new Text({
offsetY: -35,
font: "26px Calibri,sans-serif",
text: textStr,
fill: new Fill({
color: fillColor,
}),
offsetX: offsetX,
offsetY: offsetY,
}),
zIndex: zIndex,
});
} else {
style = new Style({
zIndex: zIndex,
image: new Circle({
radius: 5,
fill: new Fill({
color: fillColor,
}),
stroke: new Stroke({
color: strokeColor,
size: 1,
}),
}),
});
}
return style;
};
/**
* 修改点矢量线，修改包括新增业务，所以都调用这个方法
* 入参
* tuglieId:tuglieId代码每一个图列的id,用于区分图列图层展示的不同；
* data: data为所需要配置到地图上的线所有基础信息，必须包含坐标字段;
* params: params为对象{}，代表该类型所配置的线宽、线型、层级、透明度、颜色、标注是否要等等样式
* @return {void} 无返回.
*/
export const updateXFlines = (layer, tuglieId, data, params) => {
//做type类型的点矢量插入渲染
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].geometry != null && data[i].geometry != "") {
var wkt = data[i].geometry;
console.log(wkt);
var feature = new FormatWKT().readFeature(wkt);
feature.tuglieId = tuglieId;
feature.geometry = data[i].geometry;
feature.cell = data[i];
feature.id = data[i].id;
feature.params = params;
feature.sampleData = data[i].sampleData; //名称
feature.setStyle(getXFlinesStyle);
layer.getSource().addFeature(feature);
}
}
}
};
export const getXFlinesStyle = (feature) => {
var currentZoom = map.getView().getZoom();
var params = feature.params;
//显示层级
var zIndex = params && params.zIndex ? params.zIndex : 0;
console.log("线层级" + zIndex);
var labelmaxZoom = params && params.labelmaxZoom ? params.labelmaxZoom : 22;
var labelminZoom = params && params.labelminZoom ? params.labelminZoom : 0;
//线条样式
var lineDash = params && params.lineDash ? params.lineDash : [];
//边框颜色
var strokeColor = params && params.strokeColor ? params.strokeColor : "red";
//边框宽度
var strokeWidth = params && params.strokeWidth ? params.strokeWidth : 2;
//填充颜色
var fillColor = params && params.fillColor ? params.fillColor : "red";
//显示文字
var textYvalue = params && params.text ? params.text : "";
var text = "";
if (textYvalue) {
if (currentZoom <= labelmaxZoom && currentZoom >= labelminZoom)
text = textYvalue;
else text = "";
}
//文字颜色
var labelColor = params && params.labelColor ? params.labelColor : "red";
//文字位置（2个字段，默认是0----number）
var offsetX = params && params.offsetX ? params.offsetX : 0;
var offsetY = params && params.offsetY ? params.offsetY : 0;
//显示层级
var maxZoom = params && params.maxZoom ? params.maxZoom : 22;
var minZoom = params && params.minZoom ? params.minZoom : 0;
var showFlag = false;
if (currentZoom <= maxZoom && currentZoom >= minZoom) showFlag = true;
else showFlag = false;
var style;
if (showFlag) {
style = [
new Style({
zIndex: zIndex,
//填充色
fill: new Fill({
color: fillColor,
}),
//边线颜色
stroke: new Stroke({
color: strokeColor,
width: strokeWidth,
lineDash: lineDash,
}),
//文字
text: new Text({
offsetY: -35,
font: "26px Calibri,sans-serif",
text: text,
fill: new Fill({
color: labelColor,
}),
offsetX: offsetX,
offsetY: offsetY,
}),
}),
];
} else {
style = null;
}
return style;
};
/**
* 修改点矢量面，修改包括新增业务，所以都调用这个方法
* 入参
* tuglieId:tuglieId代码每一个图列的id,用于区分图列图层展示的不同；
* data: data为所需要配置到地图上的线所有基础信息，必须包含坐标字段;
* params: params为对象{}，代表该类型所配置的面边宽、线型、层级、透明度、颜色（内填充及外线条）、标注是否要等等样式
* @return {void} 无返回.
*/
export const updateXFpolygons = (layer, tuglieId, data, params) => {
//做type类型的点矢量插入渲染
if (data.length > 0) {
for (var i = 0; i < data.length; i++) {
if (data[i].geometry != null && data[i].geometry != "") {
var wkt = data[i].geometry;
var feature = new FormatWKT().readFeature(wkt);
feature.tuglieId = tuglieId;
feature.geometry = data;
feature.cell = data;
feature.params = params;
feature.sampleData = data.sampleData; //名称
feature.setStyle(getXFpolygonsStyle);
layer.getSource().addFeature(feature);
}
}
}
};
export const getXFpolygonsStyle = (feature) => {
var currentZoom = map.getView().getZoom();
var params = feature.params;
//显示层级
var zIndex = params && params.zIndex ? params.zIndex : 0;
console.log("层级" + zIndex);
var labelmaxZoom = params && params.labelmaxZoom ? params.labelmaxZoom : 22;
var labelminZoom = params && params.labelminZoom ? params.labelminZoom : 0;
//线条样式
var lineDash = params && params.lineDash ? params.lineDash : [];
//边框颜色
var strokeColor = params && params.strokeColor ? params.strokeColor : "red";
//边框宽度
var strokeWidth = params && params.strokeWidth ? params.strokeWidth : 2;
//填充颜色
var fillColor = params && params.fillColor ? params.fillColor : "red";
//显示文字
var textYvalue = params && params.text ? params.text : "";
var text = "";
if (textYvalue) {
if (currentZoom <= labelmaxZoom && currentZoom >= labelminZoom)
text = textYvalue;
else text = "";
}
//文字颜色
var labelColor = params && params.labelColor ? params.labelColor : "red";
//文字位置（2个字段，默认是0----number）
var offsetX = params && params.offsetX ? params.offsetX : 0;
var offsetY = params && params.offsetY ? params.offsetY : 0;
//显示层级
var maxZoom = params && params.maxZoom ? params.maxZoom : 22;
var minZoom = params && params.minZoom ? params.minZoom : 0;
var showFlag = false;
if (currentZoom <= maxZoom && currentZoom >= minZoom) showFlag = true;
else showFlag = false;
var style;
if (showFlag) {
style = [
new Style({
zIndex: zIndex,
//填充色
fill: new Fill({
color: fillColor,
}),
//边线颜色
stroke: new Stroke({
color: strokeColor,
width: strokeWidth,
lineDash: lineDash,
}),
//文字
text: new Text({
offsetY: -35,
font: "26px Calibri,sans-serif",
text: text,
fill: new Fill({
color: labelColor,
}),
offsetX: offsetX,
offsetY: offsetY,
}),
}),
];
} else {
style = null;
}
return style;
};
/**
* 删除点、线、面方法
* 入参
* tuglieId:tuglieId代码每一个图列的id,用于区分图列图层展示的不同；
* layer: 代表图层;
* @return {void} 无返回.
*/
export const deleteFeatures = (layer, tuglieId) => {
//先清除点矢量图层里type指定的features
var features = layer.getSource().getFeatures();
if (features.length > 0) {
for (var i = 0; i < features.length; i++) {
if (features[i].tuglieId == tuglieId) {
layer.getSource().removeFeature(features[i]);
}
}
}
};
/**
* 隐藏或者展示瓦片方法
* 入参
* tuglieId:tuglieId代码每一个图列的id,用于区分图列图层展示的不同；
* state: 代表瓦片图层的状态1---展示瓦片，0---隐藏瓦片;
* @return {void} 无返回.
*/
export const showWpFeatures = (tuglieId, state) => {
let baseLayerAll = map.getLayers().array_;
let visible = state == 1 ? true : false;
baseLayerAll.forEach((item) => {
if (item.tuglieId == tuglieId) {
item.setVisible(visible);
}
});
console.log(baseLayerAll);
};
/**
* 根据图层名及点击的坐标去取feature数据
* 入参
* point:point代表点击的经纬度,map.on监听会提供此入参；
* layer: 代表图层;
* @return 返回点击的该图层查询到的feature对象.
*/
export const queryWPdata = (layer, point) => {
//点击wms通过getFeatureInfo方法得到feature
var viewResolution = map.getView().getResolution();
var url = layer
.getSource()
.getFeatureInfoUrl(point, viewResolution, "EPSG:4326", {
INFO_FORMAT: "application/json",
});
return url;
};
/**
* 高亮矢量图层方法
* 入参
* coord:coord需要高亮的坐标；
* mapFeature:mapFeature矢量元素；;
* hightLightVectorLayer:代表高亮图层
* value:值存在代表瓦片;
* @return {void} 无返回.
*/
export const highLightByClick = (
mapFeature,
coord,
hightLightVectorLayer,
value
) => {
var feature = null,
wkt = null,
result = "";
var type = judgeTypeByfeature(mapFeature, value);
if (!value) {
//矢量线和面
if (type == 5 || type == 4 || type == 3 || type == 2) {
coord.forEach((item, i) => {
if (i % 2 == 0) {
result += item + " ";
} else {
result += item + ",";
}
});
}
} else {
//瓦片
if (type == 5 || type == 4 || type == 3 || type == 2) {
let data;
if (type == 2) {
data = coord;
} else if (type == 3) {
data = coord[0];
} else if (type == 4) {
data = coord[0];
} else if (type == 5) {
data = coord[0][0];
}
// let data = type == 2 ? coord : coord[0];
// let data1 = type == 4 ? coord[0] : coord[0];
data.forEach((item) => {
result += item[0] + " " + item[1] + ",";
});
} else {
wkt = "POINT(" + coord[0] + " " + coord[1] + ")";
}
}
if (type == 5 || type == 4 || type == 2 || type == 3) {
result = result.slice(0, result.length - 1);
wkt =
type == 2 || type == 3
? "LINESTRING(" + result + ")"
: "MULTIPOLYGON(((" + result + ")))";
}
if (wkt) {
// 解析 wkt字符串
feature = new FormatWKT().readFeature(wkt);
if (type == 1) {
feature.setStyle(
new Style({
image: new Circle({
radius: 10,
fill: new Fill({
color: "#33ffff",
}),
}),
})
);
} else {
feature.setStyle(
new Style({
stroke: new Stroke({
color: "#33ffff",
width: 3,
}),
})
);
}
hightLightVectorLayer.getSource().addFeature(feature);
}
};
/**
* 判断点线面方法
* 入参
* feature:feature为传入的元素
* * value:值存在代表瓦片;
* @return {void} 返回点线面类型.
*/
export const judgeTypeByfeature = (feature, value) => {
//先获取要素几何，然后通过getType()函数获取几何类型。
//value存在代表是瓦片图层，瓦片图层和矢量图层获取集合类型的方式不一样
var g = "",
type = null;
g = value ? feature.geometry.type : feature.getGeometry().getType();
console.log(g);
//判断是不是点
if (g.includes("Point")) {
type = 1;
}
//判断是不是线
else if (g == "LineString") {
type = 2;
}
//判断是不是多线
else if (g == "MultiLineString") {
type = 3;
}
//判断是不是面
else if (g == "Polygon") {
type = 4;
}
//判断是不是多面
else if (g == "MultiPolygon") {
type = 5;
}
return type;
};
//人员车辆行走
//测试人员沿着固定路线走动
/**
* 轨迹回放方法
* 入参
* data:data轨迹行走的数据，格式方式：[
[114.18585916410007, 30.523804453442494],
[114.18086229598782, 30.517617854827392],
[114.17550850872453, 30.511788175363108],
[114.17096373820357, 30.50581572823853],
[114.168, 30.503]
]
* params: 轨迹回放参数，包括图标、轨迹线和已走完的轨迹的颜色及宽度、播放速度等参数;
* @return {void} 无返回.
*/
export const startMove = (data, params) => {
let dataIndex = 0;
let arcDataIndex = 0;
//过滤轨迹中相同点
var trueCoord = [];
if (data.length > 1) {
trueCoord.push([data[0][0], data[0][1]]);
for (var mm = 1; mm < data.length; mm++) {
if (!(data[mm][0] == data[mm - 1][0] && data[mm][1] == data[mm - 1][1]))
trueCoord.push([data[mm][0], data[mm][1]]);
}
}
data = trueCoord;
if (data && dataIndex < data.length - 1) {
//绘制路线
var route = new LineString(data);
var routeFeature = new Feature({
type: "route",
geometry: route,
});
routeFeature.setStyle(
new Style({
//边线颜色
stroke: new Stroke({
color: params.routeColor || "white",
width: params.routeWidth || 2,
}),
})
);
//绘制已行走的路线
var finiroute = new LineString([]);
var finishrouteFeature = new Feature({
type: "route",
geometry: finiroute,
});
finishrouteFeature.setStyle(
new Style({
//边线颜色
stroke: new Stroke({
color: params.finishedColor || "gray",
width: params.finishedWidth || 2,
}),
zIndex: 99999999,
})
);
var start = {
x: data[dataIndex][0],
y: data[dataIndex][1],
};
var end = {
x: data[dataIndex + 1][0],
y: data[dataIndex + 1][1],
};
var dx = end.x - start.x;
var dy = end.y - start.y;
var layersPeople = asdLayerVector(9999);
//定义 this.geoMarker
var geoMarker = new Feature({
typeid: "人员",
//geometry: new Point([start.x,start.y])
});
layersPeople.getSource().addFeature(geoMarker);
layersPeople.getSource().addFeature(routeFeature);
layersPeople.getSource().addFeature(finishrouteFeature);
map.addLayer(layersPeople);
var arcLineList = [];
var current;
var autoSplitmiles = params.autoSplitmiles || 40;
//计算单元分段的路程
var firstMileslen = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
var cellMiles = firstMileslen / autoSplitmiles;
for (var i = 0; i < autoSplitmiles; i++) {
current = [];
current[0] = (dx / autoSplitmiles) * i + start.x;
current[1] = (dy / autoSplitmiles) * i + start.y;
arcLineList.push(current);
}
//设置定时器
var finishArray = [];
var interval = setInterval(() => {
if (arcDataIndex < autoSplitmiles) {
var point = [
arcLineList[arcDataIndex][0] * 1,
arcLineList[arcDataIndex][1] * 1,
];
var geom = new Point(point);
finishArray.push(point);
if (finishArray.length > 1)
var geomfiniline = new LineString(finishArray);
var style = new Style({
text: new Text({
text: "人员A",
font: "bold 12px 微软雅黑",
fill: new Fill({
color: "yellow",
}),
offsetY: -10,
textAlign: "center",
textBaseline: "bottom",
}),
image: new Icon({
src: params.icon,
//rotateWithView: false,
//rotation: -rotation
}),
});
geoMarker.cell = {
name: "人员A",
lon: point[0],
lat: point[1],
};
geoMarker.setStyle(style);
geoMarker.setGeometry(geom);
//设置已行走的路线变动
if (finishArray.length > 1)
finishrouteFeature.setGeometry(geomfiniline);
arcDataIndex++;
} else {
if (dataIndex < data.length - 2) {
dataIndex++;
arcDataIndex = 0;
} else {
dataIndex = 0;
arcDataIndex = 0;
}
start = {
x: data[dataIndex][0],
y: data[dataIndex][1],
};
end = {
x: data[dataIndex + 1][0],
y: data[dataIndex + 1][1],
};
dx = end.x - start.x;
dy = end.y - start.y;
if (dx == 0 && dy == 0) {
return;
}
// rotation = Math.atan2(dy, dx);
arcLineList = [];
var current1;
//计算新的路程有多少个分段，并赋值
var newMileslen = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
autoSplitmiles = parseInt(newMileslen / cellMiles);
for (var i = 0; i < autoSplitmiles; i++) {
current1 = [];
current1[0] = (dx / autoSplitmiles) * i + start.x;
current1[1] = (dy / autoSplitmiles) * i + start.y;
arcLineList.push(current1);
}
var point = [
arcLineList[arcDataIndex][0] * 1,
arcLineList[arcDataIndex][1] * 1,
];
var geom = new Point(point);
var style = new Style({
text: new Text({
text: "人员A",
offsetY: -10,
font: "bold 12px 微软雅黑",
fill: new Fill({
color: "yellow",
}),
textAlign: "center",
textBaseline: "bottom",
}),
image: new Icon({
src: params.icon,
// rotateWithView: false,
//rotation: -rotation
}),
});
geoMarker.cell = {
name: "人员A",
lon: end.x,
lat: end.y,
};
geoMarker.setStyle(style);
geoMarker.setGeometry(geom);
arcDataIndex++;
console.log(dataIndex);
//==0代表此次路线走完，需要清楚红色已走路线
if (dataIndex == 0) {
finishrouteFeature.setGeometry(finiroute);
finishArray = [];
}
}
}, 300);
}
};
/**
* 新增编辑方法
* 入参
* type:type入参为开始新增编辑的图元类型，可用画点、线、面、圆，分别入参"Point"、"LineString"、"Polygon"、"Circle"
* drawLayer: 编辑的图层;
* params:编辑图元的样式;
* @return {void} 无返回.
*/
export const addInteraction = (type, drawLayer, params) => {
removeDraw();
if (type !== "None") {
draw = new Draw({
source: drawLayer.getSource(),
type: type,
});
map.addInteraction(draw);
//绘制结束时触发的事件
//创建 promise 实例
let promise = new Promise((resolve, reject) => {
draw.on("drawend", (evt) => {
var feature = evt.feature;
var cor = feature.getGeometry().getCoordinates();
console.log("feature", feature);
console.log("编辑的坐标是：", cor);
if (type == "Point") {
feature.params = params;
feature.setStyle(getXFpointsStyle);
} else if (type == "LineString") {
feature.setStyle(getXFlinesStyle);
} else if (type == "Polygon") {
feature.params = params;
feature.setStyle(getXFpolygonsStyle);
} else if (type == "Circle") {
feature.params = params;
feature.setStyle(getXFpolygonsStyle);
}
resolve({ cor, draw });
});
});
return promise;
}
};
//删除交互Draw
export const removeDraw = () => {
map.removeInteraction(draw);
console.log(draw);
};
/**
* 修改编辑方法
* 入参
* drawLayer: 编辑的图层;
* @return {void} 无返回.
*/
export const editInteraction = (drawLayer) => {
//判断是否已经选中moveCurrentFeature为空否
//if (selectedFeature) {
//创建一个交互修改对象
modifyInteraction = new Modify({
//设置要素为交互选择对象所获取的要素
source: drawLayer.getSource(),
});
map.addInteraction(modifyInteraction);
let promise = new Promise((resolve, reject) => {
modifyInteraction.on("modifyend", (e) => {
var cor = e.features.item(0).getGeometry().getCoordinates();
console.log("feature", e.features);
console.log("修改的坐标是：", cor);
// resolve(cor);
resolve({ cor, modifyInteraction });
});
});
return promise;
};
/**
* 选择工具方法
* 入参
* drawLayer: 选择的图层;
* @return {void} 无返回.
*/
export const selectInteraction = (drawLayer) => {
//判断是否已经选中moveCurrentFeature为空否
//if (selectedFeature) {
//创建一个交互修改对象
selectfeatureInteraction = new Select({
//水平包裹
wrapX: false,
source: drawLayer.getSource(),
});
map.addInteraction(selectfeatureInteraction);
let promise = new Promise((resolve, reject) => {
selectfeatureInteraction.on("select", (e) => {
//获取当前待移动的feature
var selectedFeature = e.selected[0];
console.log("selectedFeature", selectedFeature);
if (selectedFeature) selectedFeature.isSelected = 1;
if (
preselectedFeature &&
selectedFeature &&
preselectedFeature != selectedFeature
)
preselectedFeature.isSelected = 0;
preselectedFeature = selectedFeature;
console.log("选择中的feture是", selectedFeature);
// resolve(cor);
resolve({ selectedFeature, selectfeatureInteraction });
});
});
return promise;
};
/**
* 修改json格式矢量点线面，修改包括新增业务，所以都调用这个方法
* 入参
* tuglieId:tuglieId代码每一个图列的id,用于区分图列图层展示的不同；
* data: data为geoJson数据对象;
* params: params为对象{}，代表该类型所配置的面边宽、线型、层级、透明度、颜色（内填充及外线条）、标注是否要等等样式
* type:type为对象类型，1，2，3分别代表点，线，面类型;
* @return {void} 无返回.
*/
export const updateXFgeoJson = (layer, tuglieId, data, params, type) => {
if (data) {
let features = new GeoJSON().readFeatures(data);
for (var i = 0; i < features.length; i++) {
var feature = features[i];
feature.tuglieId = tuglieId;
//feature.geometry = data;
//feature.cell = data;
feature.params = params;
//feature.sampleData = data.sampleData; //名称
if (type == 1) {
feature.setStyle(getXFpointsStyle);
} else if (type == 2) {
feature.setStyle(getXFlinesStyle);
} else if (type == 3) {
feature.setStyle(getXFpolygonsStyle);
}
layer.getSource().addFeature(feature);
}
}
};
/**
* 闪烁一个或多个点方法
* 入参
* lon:lon闪烁点的经度
* lat: lat闪烁点的纬度;
* domid:闪烁样式的id;
* @return {void} 无返回.
*/
export const flashAtPoints = (lon, lat, domid) => {
//记录全部name为id的doms
//this.domsOfwellsWS.push(domid);
//if (this.pointHover) map.removeOverlay(this.pointHover);
flashOverlay = new Array();
var divlast;
const div = document.createElement("div");
div.id = domid;
document.body.appendChild(div);
if (div) {
div.className = "fhPointDiffusionmapwsj";
divlast = div;
} else {
var oDiv = document.createElement(domid);
oDiv.id = domid;
oDiv.className = "fhPointDiffusionmapwsj";
//document.getElementById("map").appendChild(oDiv);
console.log(map.values_.target);
map.values_.target.appendChild(oDiv);
divlast = oDiv;
}
var pointHover = new Overlay({
element: divlast,
positioning: "center-center",
stopEvent: false,
});
map.addOverlay(pointHover);
pointHover.setPosition([parseFloat(lon), parseFloat(lat)]);
flashOverlay.push(pointHover);
};
/**
* 根据domid去显示或隐藏
* 入参
* domid:闪烁样式的id;
* * state:state为true表示打开闪烁样式，false代表关闭闪烁样式;
* @return {void} 无返回.
*/
export const showflashPoints = (domids, state) => {
if (domids.length > 0) {
if (state) {
for (var i = 0; i < domids.length; i++) {
var box = document.getElementById(domids[i]);
if (box) box.style.display = "block";
}
} else {
for (var i = 0; i < domids.length; i++) {
var box = document.getElementById(domids[i]);
if (box) box.style.display = "none";
}
}
}
};
