<template>
<div id="MapBOXmap">
<div id="map" ref="rootmap">
<div
id="popup"
class="popup"
style="background-color: rgb(1 18 44); opacity: 0.9"
></div>
<!-- <div id="fhPointDiffusion"></div> -->
<div class="Legend" style="width: 190px">
<!-- <p style="text-align: center;color: white;">管网类型</p> -->
<el-row>
<el-col class="line1class">
<img src="./../../../static/img/zhongzhuanzhan.png" class="TLimg" />
中转站
</el-col>
<el-col class="line2class">
<img src="./../../../static/img/yunshuche.png" class="TLimg" />
运输车
</el-col>
<el-col class="line3class">
<img src="./../../../static/img/wuzidian.png" class="TLimg" />
物资点
</el-col>
<el-col class="line4class">
<img src="./../../../static/img/qiangxiuyuan.png" class="TLimg" />
抢修员
</el-col>
<el-col class="line5class">
<img src="./../../../static/img/ysbz_icon.png" class="TLimg" />
泵站
</el-col>
</el-row>
</div>
</div>
<!-- 视频对话 -->
<el-dialog
title="视频对话"
:visible.sync="dialogVisible"
width="30%"
:close-on-click-modal="false"
>
<div
id="TongHuaBox"
v-loading="loading"
element-loading-text="拼命加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
@close="LoginIsOk = false"
>
<!-- <TongHua v-if="LoginIsOk" :userNo="unsrNo" ref="TongHuaBox"></TongHua> -->
<router-view></router-view>
</div>
</el-dialog>
</div>
</template>
<script>
var setting = window.RongCall.setting;
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import XYZ from "ol/source/XYZ";
import { Polygon, LineString } from "ol/geom";
import * as olSphere from "ol/sphere";
import { fromLonLat, transform } from "ol/proj";
import { unByKey } from "ol/Observable";
import * as layer from "ol/layer.js";
import * as source from "ol/source.js";
import * as geom from "ol/geom.js";
import * as style from "ol/style.js";
import Overlay from "ol/Overlay.js";
import TileLayer from "ol/layer/Tile";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import Cluster from "ol/source/Cluster";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Circle from "ol/style/Circle";
import Stroke from "ol/style/Stroke";
import Draw from "ol/interaction/Draw";
import dragzoom from "ol/interaction/DragZoom";
import DragPan from "ol/interaction/DragPan";
import DragBox from "ol/interaction/DragBox";
import Icon from "ol/style/Icon";
import Select from "ol/interaction/Select";
import Modify from "ol/interaction/Modify";
import FormatWKT from "ol/format/WKT";
import TileWMS from "ol/source/TileWMS";
import { bbox as bboxStrategy } from "ol/loadingstrategy.js";
import ImageWMS from "ol/source/ImageWMS";
import Image from "ol/layer/Image";
import GeoJSON from "ol/format/GeoJSON";
import loadingstrategy from "ol/loadingstrategy";
import tilegrid from "ol/tilegrid";
import axios from "axios";
import gcoord from "gcoord";
import { defaults } from "ol/control";
import spthImg from "./../../../static/img/spth.png";
import TongHua from "./../call/index.vue";
export default {
components: { TongHua },
data() {
return {
map: null,
dialogVisible: false,
LoginIsOk: false,
loading: false,
unsrNo: "",
};
},
created() {
window.closepopup = this.closepopup;
window.spthClick = this.spthClick;
},
mounted() {
// 时间未改变且因子也没变化，只需要重新绘制
this.$nextTick(function () {
setTimeout(() => {
this.map.updateSize();
}, 500);
});
var mapcontainer = this.$refs.rootmap;
this.map = new Map({
controls: defaults({
attribution: false,
zoom: false,
rotate: false,
}),
target: mapcontainer,
layers: [
new TileLayer({
source: new XYZ({
url:
"https://api.mapbox.com/styles/v1/raomap/ckjjpsibk0gj719ppklycwqxg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmFvbWFwIiwiYSI6ImNqdTEwY2F1YjBtOWs0NG1lZGtmcTA1a2kifQ.CqXTzbSSoQmJmoHKeIdi9A",
}),
}),
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [120.827, 40.718], //鄱阳湖
zoom: 14,
}),
});
//添加矢量图层
this.editSource = new SourceVector({
wrapX: false,
});
this.editVectorLayer = new LayerVector({
source: this.editSource,
zIndex: 99999,
});
this.map.addLayer(this.editVectorLayer);
/* this.initPipe(["高新园区","CBD船园","东城","连山区","龙港（新城区）","北港","龙港（马仗房）"]) */
//添加泵站后台点位
this.initBZData();
//添加物资点后台点位
this.initWZDData();
//添加右键面板
this.menu_overlay = new Overlay({
element: document.getElementById("popup"),
positioning: "bottom-center",
offset: [0, -20],
});
this.menu_overlay.setVisible(false);
this.map.addOverlay(this.menu_overlay);
//鼠标移动事件
this.map.on("pointermove", function (evt) {
if (evt.map.hasFeatureAtPixel(evt.pixel)) {
evt.map.getTargetElement().style.cursor = "pointer";
} else {
evt.map.getTargetElement().style.cursor = "";
}
});
//map点击地图图标事件
//鼠标点击事件
this.map.on("click", (evt) => {
if (this.menu_overlay && this.menu_overlay != "")
this.menu_overlay.setPosition(undefined);
// this.menu_overlay.setVisible(false);
var pixel = this.map.getEventPixel(evt.originalEvent);
var feature = this.map.forEachFeatureAtPixel(
pixel,
function (feature, layer) {
return feature;
}
);
if (feature) {
var currentLayerName = "";
let data = {};
var lng, lat;
if (
feature.typeid == "运输车" ||
feature.typeid == "运输线路" ||
feature.typeid == "流向"
) {
return;
} else if (feature.typeid == "抢修员") {
lng = feature.lng;
lat = feature.lat;
currentLayerName = feature.peopleName;
data = {
人员名称: feature.peopleName,
经度: feature.lng,
纬度: feature.lat,
电话: feature.phone,
};
} else if (feature.typeid == "物资点") {
lng = feature.lng;
lat = feature.lat;
currentLayerName = feature.siteName;
data = {
站点名称: feature.siteName,
经度: feature.lng,
纬度: feature.lat,
安装位置: feature.siteAddress,
};
} else if (feature.typeid == "泵站") {
lng = feature.lng;
lat = feature.lat;
currentLayerName = feature.pumpName;
data = {
站点名称: feature.pumpName,
经度: feature.lng,
纬度: feature.lat,
安装位置: feature.pumpPosition,
类型: feature.pumpTypeZn,
};
}
//管线类别
else {
lng = evt.coordinate[0];
lat = evt.coordinate[1];
if (feature.values_.Layer == "YSLINE") currentLayerName = "雨水管线";
else if (feature.values_.Layer == "WSLINE")
currentLayerName = "污水管线";
else currentLayerName = "雨污合流管";
data = {
区域: feature.区域,
管段: feature.OBJECTID,
坡度: feature.坡度,
材质: feature.材质,
管径: feature.管径,
高程: feature.Elevation + "m",
长度: feature.长度 + "m",
};
}
//开始展示属性字段
let textContent = "";
textContent =
"<div style='color: #fff !important;font-size: 17px;font-weight: bold;text-align: left;padding-left: 25px;height: 27px;border-left: 2px solid;border-left-color: rgb(88,253,255);border-right: 2px solid;border-right-color: rgb(88,253,255);border-bottom: 1px solid;border-bottom-color: gray'>" +
currentLayerName +
"<a style='color:#fff;position: absolute;top: 5px;right: 13px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a> </div>";
textContent += '<div style="overflow:auto">';
for (let key in data) {
textContent +=
'<div style="height:30px;color: #fff;line-height: 30px;">' +
'<div style="font-size:14px;line-height:30px; margin-left: 11px;position: absolute;">' +
key +
"：" +
"</div>" +
'<div style="font-size:14px;line-height:30px;position: absolute;margin-left: 87px;">' +
data[key] +
"</div>" +
"</div>";
}
textContent += "</div>";
//textContent = closeDOM + textContent;
textContent +=
'<div style="bottom: -10px;border-top: 10px solid #3750ce;border-right: 10px solid transparent;border-left: 10px solid transparent;width: 0;height: 0;position: absolute;left: 50%;transform: translate(-50%, 0);"></div>';
//提取公共方法，放缩地图、显示属性等
document.getElementById("popup").innerHTML = textContent;
this.menu_overlay.setPosition([lng, lat]);
}
});
},
methods: {
initWZDData() {
this.$http
.post(this.nozzle.houseQueryAll, {})
.then((response) => {
if (response.data.code === 200) {
this.initWZDPoints(response.data.data);
} else {
this.$message({
type: "warning",
message: response.data.message,
});
}
this.loading1 = false;
})
.catch((response) => {});
},
initBZData() {
this.$http
.post(this.nozzle.manPumpQueryPage, {
current: 1,
data: {},
size: 9999,
})
.then((response) => {
if (response.data.code === 200) {
this.initBZPoints(response.data.data.list);
} else {
this.$message({
type: "warning",
message: response.data.message,
});
}
})
.catch((response) => {});
},
//视频通话按钮-------------------------------------------------------------------
spthClick(peopleNo) {
console.log("人员编号是：" + peopleNo);
this.LoginIsOk = false;
this.dialogVisible = true;
this.login(peopleNo);
this.unsrNo = peopleNo;
this.$router.push({
path:'/FangXunZhiHui/emergencycommand',
query:'2'
})
},
// 视频通话功能----------------------------------------------------------A
async login(peopleNo) {
this.loading = true;
var userId = peopleNo;
let _this = this;
var loginDetail;
let result = await this.$axios.login({
userId,
});
if (result.code !== 200) {
this.loading = false;
_this.$message("登录失败, 请检查 CallLib Demo Server 是否启动");
} else {
this.loading = false;
setting.token = result.token;
loginDetail = result;
let RongCall = window.RongCall;
RongCall.initIM(setting);
this.LoginIsOk = true;
}
},
// 视频通话功能----------------------------------------------------------B
closepopup() {
if (this.menu_overlay && this.menu_overlay != "")
this.menu_overlay.setPosition(undefined);
},
initWZDPoints(listData) {
let imgUrl1 = require("./../../../static/img/wuzidian.png"); // 物资点
let imgUrl2 = require("./../../../static/img/zhongzhuanzhan.png"); // 中转站
let imgUrl3 = require("./../../../static/img/yunshuche.png"); // 运输车
let imgUrl = imgUrl1;
var points = new Array();
if (listData.length > 0) {
//添加图片
for (let i = 0; i < listData.length; i++) {
if (listData[i].type == 0) imgUrl = imgUrl1;
else {
imgUrl = imgUrl2;
points.push([
parseFloat(listData[i].coordX),
parseFloat(listData[i].coordY),
]);
}
this.editVectorLayer
.getSource()
.addFeature(
this.addWZDPngToMap(
parseFloat(listData[i].coordX),
parseFloat(listData[i].coordY),
imgUrl,
listData[i].siteAddress,
listData[i].siteName
)
);
}
if (points.length > 1) {
//加载中转站线路
var route = new LineString(points);
var routeFeature = new Feature({
type: "route",
geometry: route,
});
routeFeature.setStyle(
new Style({
stroke: new Stroke({
width: 3,
lineDash: [1, 2, 3, 4, 5, 6],
color: "#26D485",
}),
})
);
routeFeature.typeid = "运输线路";
this.editVectorLayer.getSource().addFeature(routeFeature);
//加载第一根线路上的运输车
var wkt =
"POINT(" +
(points[0][0] + points[1][0]) / 2 +
" " +
(points[0][1] + points[1][1]) / 2 +
")";
var featureCar = new FormatWKT().readFeature(wkt);
featureCar.typeid = "运输车";
featureCar.setStyle(
new Style({
image: new Icon({
src: imgUrl3,
}),
zIndex: 999999,
})
);
this.editVectorLayer.getSource().addFeature(featureCar);
}
}
},
initBZPoints(listData) {
let imgUrl = require("./../../../static/img/ysbz_icon.png"); // 图片地址
if (listData.length > 0) {
//添加图片
for (let i = 0; i < listData.length; i++) {
this.editVectorLayer
.getSource()
.addFeature(
this.addPngToMap(
parseFloat(listData[i].pointY),
parseFloat(listData[i].pointX),
imgUrl,
listData[i].pumpPosition,
listData[i].pumpTypeZn,
listData[i].pumpName
)
);
}
}
},
addPngToMap(lng, lat, imgUrl, pumpPosition, pumpTypeZn, pumpName) {
var wkt = "POINT(" + lng + " " + lat + ")";
var feature = new FormatWKT().readFeature(wkt);
feature.typeid = "泵站";
feature.lng = lng; //经度
feature.lat = lat; //维度
feature.pumpName = pumpName; //站点名称
feature.pumpPosition = pumpPosition; //站点安装位置
feature.pumpTypeZn = pumpTypeZn; //站点安装位置
feature.setStyle(
new Style({
image: new Icon({
src: imgUrl,
}),
zIndex: 999999,
})
);
return feature;
},
addWZDPngToMap(lng, lat, imgUrl, siteAddress, siteName) {
var wkt = "POINT(" + lng + " " + lat + ")";
var feature = new FormatWKT().readFeature(wkt);
feature.typeid = "物资点";
feature.lng = lng; //经度
feature.lat = lat; //维度
feature.siteName = siteName; //站点名称
feature.siteAddress = siteAddress; //站点安装位置
feature.setStyle(
new Style({
image: new Icon({
src: imgUrl,
}),
zIndex: 999999,
})
);
return feature;
},
//点击前端定位人员按钮
locatePeople(x, y, item, userNo) {
//有经纬度代表上线，展示到地图上logo并展示属性
if (x && y) {
if (this.menu_overlay && this.menu_overlay != "")
this.menu_overlay.setPosition(undefined);
//有该人员编号的logo就先删除该图标feature
var features = this.editSource.getFeatures();
for (let mm = 0; mm < features.length; mm++) {
if (features[mm].peopleNo && features[mm].peopleNo == item.peopleNo) {
this.editSource.removeFeature(features[mm]);
}
}
//重新去上图人员feature
let imgUrl = require("./../../../static/img/qiangxiuyuan.png"); // 抢修员
var wkt = "POINT(" + x + " " + y + ")";
var feature = new FormatWKT().readFeature(wkt);
feature.typeid = "抢修员";
feature.lng = x; //经度
feature.lat = y; //维度
feature.peopleName = item.peopleName; //人员名称
feature.phone = item.phone; //电话
feature.setStyle(
new Style({
image: new Icon({
src: imgUrl,
}),
zIndex: 999999,
})
);
this.editSource.addFeature(feature);
//定位并展示当前属性
this.map.getView().setCenter([parseFloat(x), parseFloat(y)]);
this.map.getView().setZoom(16);
let data = {
人员名称: item.peopleName,
经度: x,
纬度: y,
电话: item.phone,
};
//开始展示属性字段
let textContent = "";
textContent =
"<div style='color: #fff !important;font-size: 17px;font-weight: bold;text-align: left;padding-left: 25px;height: 27px;border-left: 2px solid;border-left-color: rgb(88,253,255);border-right: 2px solid;border-right-color: rgb(88,253,255);border-bottom: 1px solid;border-bottom-color: gray'>" +
item.peopleName +
`<img style='padding-left: 15px;padding-top: 4px;cursor: pointer;' onclick='spthClick("` +
userNo +
`")'` +
" src='" +
spthImg +
"'></img>" +
"<a style='color:#fff;position: absolute;top: 5px;right: 13px;cursor: pointer;' class='ol-popup-closer' onclick='closepopup()' >X</a> </div>";
textContent += "<div>";
for (let key in data) {
textContent +=
'<div style="height:30px;color: #fff;">' +
'<div style="font-size:14px;line-height:30px; margin-left: 11px;position: absolute;">' +
key +
"：" +
"</div>" +
'<div style="font-size:14px;line-height:30px;position: absolute;margin-left: 87px;">' +
data[key] +
"</div>" +
"</div>";
}
textContent += "</div>";
//textContent = closeDOM + textContent;
textContent +=
'<div style="bottom: -10px;border-top: 10px solid #3750ce;border-right: 10px solid transparent;border-left: 10px solid transparent;width: 0;height: 0;position: absolute;left: 50%;transform: translate(-50%, 0);"></div>';
//提取公共方法，放缩地图、显示属性等
document.getElementById("popup").innerHTML = textContent;
this.menu_overlay.setPosition([parseFloat(x), parseFloat(y)]);
} else {
this.$message({
message: "该人员尚未上线或无法获取定位信息！",
type: "warning",
});
}
},
initPipe(showArray) {
if (this.menu_overlay && this.menu_overlay != "")
this.menu_overlay.setPosition(undefined);
if (showArray.length > 0) {
//清除管线source
var features = this.editSource.getFeatures();
for (let mm = 0; mm < features.length; mm++) {
if (features[mm].typeid == "管线") {
this.editSource.removeFeature(features[mm]);
}
}
for (let mg = 0; mg < features.length; mg++) {
if (features[mg].typeid == "流向") {
this.editSource.removeFeature(features[mg]);
}
}
//加载geoJson图层
var geojsonObject = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.99996101818647, 40.73757621896738],
[120.99908572962283, 40.73751931796221],
],
},
properties: {
OBJECTID_1: 1,
OBJECTID: 65,
FID_: 0,
Entity: "LWPolyline",
Layer: "WSLINE",
Color: 6,
Linetype: "YSGL",
Elevation: 8.97,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.000877136131976,
len: "97.7946338395179",
区域: "CBD船园",
长度: "74.05",
坡度: "0.1211",
材质: "波纹管",
管径: "DN500",
Shape_Le_1: 0.000877136131976,
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.80726342996343, 40.68232721892605],
[120.80674118016145, 40.683335871553254],
],
},
properties: {
OBJECTID_1: 2,
OBJECTID: 908,
FID_: 0,
Entity: "LWPolyline",
Layer: "WSLINE",
Color: 6,
Linetype: "YSGL",
Elevation: 14.0587,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.00113583668634,
len: "159.070250142691",
区域: "高新园区",
长度: "120.46",
坡度: "0.1167",
材质: "混凝土",
管径: "DN500",
Shape_Le_1: 0.00113583668634,
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.88227837025067, 40.77101317631707],
[120.88300357365608, 40.77176299146896],
[120.88337507280141, 40.77213875969608],
[120.88364085214369, 40.7724144882381],
[120.88388866932667, 40.772700864753176],
[120.8842081876578, 40.77299807360225],
[120.88532542802614, 40.77414909250666],
[120.88653915395889, 40.775397648282876],
[120.88758746938629, 40.776487488107136],
],
},
properties: {
OBJECTID_1: 3,
OBJECTID: 8614,
FID_: 0,
Entity: "LWPolyline",
Layer: "YSLINE",
Color: 5,
Linetype: "YSGL",
Elevation: 12.5739,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.0076271465233,
len: "998.563488941753",
区域: "东城",
长度: "150.09",
坡度: "0.08377",
材质: "混凝土",
管径: "DN600",
Shape_Le_1: 0.0076271465233,
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.86804141338064, 40.755814294694005],
[120.86889551211823, 40.75600909684238],
],
},
properties: {
OBJECTID_1: 4,
OBJECTID: 13918,
FID_: 0,
Entity: "LWPolyline",
Layer: "HLLINE",
Color: 32,
Linetype: "YSGL",
Elevation: 16.673,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.00087603226571,
len: "99.2941574846395",
区域: "连山区",
长度: "75.19",
坡度: "0.2217",
材质: "箱涵",
管径: "1000*1200",
Shape_Le_1: 0.00087603226571,
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.85779035344217, 40.72721076886194],
[120.85818671164748, 40.7266124777837],
],
},
properties: {
OBJECTID_1: 5,
OBJECTID: 20586,
FID_: 0,
Entity: "LWPolyline",
Layer: "HLLINE",
Color: 32,
Linetype: "YSGL",
Elevation: 15.096,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.000717671262632,
len: "98.3387018626339",
区域: "龙港（新城区）",
长度: "74.47",
坡度: "0.2027",
材质: "箱涵",
管径: "1000*1000",
Shape_Le_1: 0.000717671262632,
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.94028655597981, 40.7761919960638],
[120.94038922168534, 40.77673490599119],
[120.9404148784439, 40.776857045616225],
],
},
properties: {
OBJECTID_1: 6,
OBJECTID: 31994,
FID_: 0,
Entity: "LWPolyline",
Layer: "HLLINE",
Color: 32,
Linetype: "YSGL",
Elevation: 8.822,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.00067733711932,
len: "98.8038143917963",
区域: "北港",
长度: "74.82",
坡度: "0.1179",
材质: "混凝土",
管径: "DN1000",
Shape_Le_1: 0.00067733711932,
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.94215908747196, 40.71983489276613],
[120.94336513859037, 40.720093765315085],
],
},
properties: {
OBJECTID_1: 7,
OBJECTID: 33834,
FID_: 0,
Entity: "LWPolyline",
Layer: "HLLINE",
Color: 32,
Linetype: "YSGL",
Elevation: 32.7151,
LineWt: 25,
RefName: "",
height: 0,
Shape_Leng: 0.00123352109702,
len: "139.53729059293",
区域: "龙港（马仗房）",
长度: "105.66",
坡度: "0.3096",
材质: "混凝土",
管径: "DN500",
Shape_Le_1: 0.00123352109702,
},
},
],
};
for (let i = 0; i < geojsonObject.features.length; i++) {
if (
showArray.indexOf(geojsonObject.features[i].properties.区域) > -1
) {
var result = [];
var points = new Array();
var currentLonLat = geojsonObject.features[i].geometry.coordinates;
var properties = geojsonObject.features[i].properties;
for (let kx = 0; kx < currentLonLat.length; kx++) {
result = gcoord.transform(
[currentLonLat[kx][0], currentLonLat[kx][1]], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
);
points.push(result);
}
//添加管线feature
var route = new LineString(points);
var lineFeature = new Feature({
geometry: route,
});
lineFeature.typeid = "管线";
lineFeature.Layer = properties.Layer;
lineFeature.OBJECTID = properties.OBJECTID;
lineFeature.区域 = properties.区域;
lineFeature.坡度 = properties.坡度;
lineFeature.材质 = properties.材质;
lineFeature.管径 = properties.管径;
lineFeature.Elevation = properties.Elevation;
lineFeature.长度 = properties.长度;
lineFeature.setStyle(this.setDefaultVecStyle(lineFeature));
this.editVectorLayer.getSource().addFeature(lineFeature);
//定位
this.map
.getView()
.setCenter([
(points[0][0] + points[1][0]) / 2,
(points[0][1] + points[1][1]) / 2,
]);
this.map.getView().setZoom(16);
/* currentFeas.features.push(geojsonObject.features[i]) */
}
}
//加载对应的箭头
var geojsonArrow = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.99949261050097, 40.7376594479494],
[120.99972564700238, 40.73756091789119],
[120.99950926672807, 40.73745243484194],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "WSLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "CBD船园",
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.80690739815873, 40.68273000089101],
[120.80712393130909, 40.68259664111406],
[120.80716628351615, 40.68279472223037],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "WSLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "高新园区",
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.88427305530388, 40.773554755126895],
[120.8838886690852, 40.772700865039724],
[120.88477750103732, 40.77315500567789],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "YSLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "东城",
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.86849643495066, 40.75597445082781],
[120.86868072260938, 40.755960107825274],
[120.86853807551825, 40.755855477777345],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "HLLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "连山区",
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.85781976553278, 40.726862416401104],
[120.85808795595358, 40.72676154660559],
[120.85814099276854, 40.72698733810398],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "HLLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "龙港（新城区）",
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.94027644860114, 40.77647661435202],
[120.94035687130236, 40.776563832856425],
[120.94040208414242, 40.7764613858015],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "HLLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "北港",
},
},
{
type: "Feature",
geometry: {
type: "LineString",
coordinates: [
[120.94275880848, 40.72003324972184],
[120.94293968740328, 40.72000244444848],
[120.9427916450419, 40.719896192767976],
],
},
properties: {
FID_: 0,
Entity: "",
Layer: "HLLINE",
Color: 0,
Linetype: "",
Elevation: 0,
LineWt: 0,
RefName: "",
height: 0,
区域: "龙港（马仗房）",
},
},
],
};
for (let i = 0; i < geojsonArrow.features.length; i++) {
if (
showArray.indexOf(geojsonArrow.features[i].properties.区域) > -1
) {
var result = [];
var points = new Array();
var currentLonLat = geojsonArrow.features[i].geometry.coordinates;
var properties = geojsonArrow.features[i].properties;
for (let kx = 0; kx < currentLonLat.length; kx++) {
result = gcoord.transform(
[currentLonLat[kx][0], currentLonLat[kx][1]], // 经纬度坐标
gcoord.GCJ02, // 当前坐标系
gcoord.WGS84 // 目标坐标系
);
points.push(result);
}
//添加管线feature
var route = new LineString(points);
var lineFeature = new Feature({
geometry: route,
});
lineFeature.typeid = "流向";
lineFeature.Layer = properties.Layer;
lineFeature.setStyle(this.setDefaultVecStyle(lineFeature));
this.editVectorLayer.getSource().addFeature(lineFeature);
//定位
/* this.map
.getView()
.setCenter([
(points[0][0] + points[1][0]) / 2,
(points[0][1] + points[1][1]) / 2,
]);
this.map.getView().setZoom(16); */
}
}
//结束
}
},
//设置默认初始Vector图层的style样式
setDefaultVecStyle(feature) {
var color;
if (feature.Layer === "WSLINE") color = "#FA3411";
else if (feature.Layer === "YSLINE") color = "#0070FF";
else color = "#E69800";
return new Style({
stroke: new Stroke({
color: color,
width: 4,
}),
zIndex: 1999,
});
},
getMap() {
return this.map;
},
},
};
</script>
<style scoped>
#MapBOXmap {
width: 100%;
height: 100%;
overflow: hidden;
}
#map {
height: 100%;
width: 100%;
position: absolute;
right: 0;
}
.ol-zoom {
display: none;
}
/*点扩散效果样式*/
@keyframes fhPointFlash {
from {
transform: scale(0);
background: rgba(252, 5, 5, 1);
}
to {
transform: scale(2);
background: rgba(0, 0, 0, 0);
}
}
@-webkit-keyframes fhPointFlash {
from {
-webkit-transform: scale(0, 0);
background: rgba(252, 5, 5, 1);
}
to {
-webkit-transform: scale(2, 2);
background: rgba(0, 0, 0, 0);
}
}
.Legend {
width: auto;
height: auto;
/* background: rgba(0, 0, 0, 0.8); */
overflow-y: auto;
position: absolute;
top: 26px;
z-index: 1;
margin-left: 329px;
padding: 5px;
left: 10px;
}
.TLimg {
width: 20px;
height: auto;
margin-right: 5px;
}
.line1class {
display: flex;
padding-left: 5px;
padding-right: 5px;
height: 35px;
line-height: 35px;
text-align: center;
align-items: center;
color: #fff;
width: 180px;
}
.line2class {
display: flex;
padding-left: 5px;
padding-right: 5px;
height: 35px;
line-height: 35px;
text-align: center;
align-items: center;
color: #fff;
width: 180px;
}
.line3class {
display: flex;
padding-left: 5px;
padding-right: 5px;
height: 35px;
line-height: 35px;
text-align: center;
align-items: center;
color: #fff;
width: 180px;
}
.line4class {
display: flex;
padding-left: 5px;
padding-right: 5px;
height: 35px;
line-height: 35px;
text-align: center;
align-items: center;
color: #fff;
width: 180px;
}
.line5class {
display: flex;
padding-left: 5px;
padding-right: 5px;
height: 35px;
line-height: 35px;
text-align: center;
align-items: center;
color: #fff;
width: 180px;
}
.popup {
background: url(./../../../static/img/tc_bg_img.png) no-repeat;
background-size: 100% 100%;
width: 260px;
}
#TongHuaBox {
height: 500px;
width: 100%;
background: rgb(255, 255, 255);
position: relative;
}
</style>
