|
|
@@ -1,584 +1,680 @@
|
|
|
<template>
|
|
|
- <div class="mapCom">
|
|
|
- <div id="map"></div>
|
|
|
- </div>
|
|
|
+ <div class="mapCom">
|
|
|
+ <div id="map"></div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
- // import httpRequest from "@/utils/request.js";
|
|
|
- import httpRequest from "@/tools/request.js";
|
|
|
- import {
|
|
|
- CanvasLabel
|
|
|
- } from "@panzhiyue/leaflet-canvaslabel";
|
|
|
- import "./leaflet.canvas-markers.js";
|
|
|
- export default {
|
|
|
- props: {
|
|
|
- ids: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
- },
|
|
|
- windList: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- },
|
|
|
- },
|
|
|
+// import httpRequest from "@/utils/request.js";
|
|
|
+import httpRequest from "@/tools/request.js";
|
|
|
+import { CanvasLabel } from "@panzhiyue/leaflet-canvaslabel";
|
|
|
+import "./leaflet.canvas-markers.js";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ ids: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ windList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ DefaultIcon1: null,
|
|
|
+ layerGroup: [],
|
|
|
+ layers: [],
|
|
|
+ rightObj: {},
|
|
|
+ areaLayer: null,
|
|
|
+ tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
|
|
|
+ ciLayer: null,
|
|
|
+ viewCenterMap: {
|
|
|
+ NX_FGS_HA_FDC_STA: {
|
|
|
+ lng: 106.776222,
|
|
|
+ lat: 37.469638,
|
|
|
},
|
|
|
- data() {
|
|
|
- return {
|
|
|
- map: null,
|
|
|
- DefaultIcon1: null,
|
|
|
- layerGroup: [],
|
|
|
- layers: [],
|
|
|
- rightObj: {},
|
|
|
- areaLayer: null,
|
|
|
- tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
|
|
|
- ciLayer: null,
|
|
|
- viewCenterMap: {
|
|
|
- NX_FGS_HA_FDC_STA: {
|
|
|
- lng: 106.776222,
|
|
|
- lat: 37.469638
|
|
|
- }
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- watch: {
|
|
|
- ids(val) {
|
|
|
- this.funStationPos(val);
|
|
|
- // this.funStationPosLabel(val)
|
|
|
- },
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- this.initMap();
|
|
|
- },
|
|
|
-
|
|
|
- unmounted() {
|
|
|
- this.map.remove();
|
|
|
- this.map = null;
|
|
|
- },
|
|
|
-
|
|
|
- methods: {
|
|
|
- initMap() {
|
|
|
- // 矢量文本标签渲染器
|
|
|
- let canvasLabel = new L.CanvasLabel({
|
|
|
- collisionFlg: true,
|
|
|
- scale: 2,
|
|
|
- });
|
|
|
- this.map = L.map("map", {
|
|
|
- renderer: canvasLabel,
|
|
|
- // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
|
|
|
- // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
|
|
|
- // center: [108.953939, 34.266611], // 地图中心--陕西
|
|
|
- // center: [109.470962, 34.520632], // 地图中心--渭南
|
|
|
- zoom: 17, //缩放比列
|
|
|
- zoomControl: false, //禁用 + - 按钮
|
|
|
- doubleClickZoom: true, // 禁用双击放大
|
|
|
- attributionControl: false, // 移除右下角leaflet标识
|
|
|
- preferCanvas: true,
|
|
|
- contextmenu: true,
|
|
|
- contextmenuWidth: 140,
|
|
|
- // contextmenuItems: [{
|
|
|
- // text: "功率曲线拟合分析",
|
|
|
- // callback: this.powerLine,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // text: "对风偏差分析",
|
|
|
- // callback: this.windAny,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // text: "曲线偏差率分析",
|
|
|
- // callback: this.qxAny,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // text: "温度与功率分析",
|
|
|
- // callback: this.wdyglAny,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // text: "损失电量分析",
|
|
|
- // callback: this.ssdlAny,
|
|
|
- // },
|
|
|
- // {
|
|
|
- // text: "桨距角分析",
|
|
|
- // callback: this.jjjAny,
|
|
|
- // },
|
|
|
- // ],
|
|
|
- });
|
|
|
- // let name = L.tileLayer(
|
|
|
- // "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
|
|
|
- // ).addTo(this.map);
|
|
|
-
|
|
|
- let name = L.tileLayer(this.tilsUrl, {
|
|
|
- minZoom: 6,
|
|
|
- maxZoom: 17,
|
|
|
- }).addTo(this.map);
|
|
|
-
|
|
|
- // this.setAreaLayer("db", true);
|
|
|
- // this.setAreaLayer("jb", true);
|
|
|
- this.setAreaLayer("nx", true);
|
|
|
- },
|
|
|
-
|
|
|
- async funStationPos(ids) {
|
|
|
- let res = null;
|
|
|
- this.rightObj = {};
|
|
|
- if (ids.length > 0) {
|
|
|
- res = await httpRequest.get("/base/windturbine", {
|
|
|
- params: {
|
|
|
- wpids: this.ids.join(","),
|
|
|
- },
|
|
|
- });
|
|
|
- } else {
|
|
|
- // res = await httpRequest.get("/base/station", {
|
|
|
- // params: {},
|
|
|
- // });
|
|
|
- tabStr = "station"
|
|
|
- let datas = await httpRequest.get("/benchmarking/wpByCplist?companyids=NX_FGS&type=-1");
|
|
|
- res = datas.data
|
|
|
- }
|
|
|
-
|
|
|
- if (res.code === 200) {
|
|
|
- if (res.data && res.data.data && res.data.data.length) {
|
|
|
- // 清除现有的 layers
|
|
|
- this.layers.forEach((layer) => {
|
|
|
- this.map.removeLayer(layer);
|
|
|
- });
|
|
|
- this.layers = [];
|
|
|
-
|
|
|
- const viewCenter =
|
|
|
- this.viewCenterMap[res.data.data[0].windpowerstationId] || null;
|
|
|
-
|
|
|
- if (!this.ciLayer) {
|
|
|
- this.ciLayer = L.canvasIconLayer({}).addTo(this.map);
|
|
|
- } else {
|
|
|
- this.ciLayer.clearLayers();
|
|
|
- }
|
|
|
-
|
|
|
- // let iconUrl = require(`@/assets/images/indexCom/run_Icon.gif`);
|
|
|
- let iconUrl = require(`@/assets/images/indexCom/fengji.png`);
|
|
|
- // const img = new Image();
|
|
|
- // img.src = require("@/assets/images/indexCom/run_Icon.gif");
|
|
|
-
|
|
|
- for (let i = 0; i < res.data.data.length; i++) {
|
|
|
- let item = res.data.data[i];
|
|
|
-
|
|
|
- let marker = L.marker(
|
|
|
- [Number(item.latitude), Number(item.longitude)], {
|
|
|
- icon: L.divIcon({
|
|
|
- className: "iconSty",
|
|
|
- iconUrl: iconUrl,
|
|
|
- iconSize: [30, 39],
|
|
|
- iconAnchor: [15, 12.5],
|
|
|
- }
|
|
|
- // {
|
|
|
- // className: "currentMapIcon",
|
|
|
- // html: `<img src="${img.src}" style="width: 30px; height: 39px;">`,
|
|
|
- // iconSize: [30, 39],
|
|
|
- // iconAnchor: [15, 12.5],
|
|
|
- // }
|
|
|
- ),
|
|
|
- data: item,
|
|
|
- }
|
|
|
- ).bindTooltip(
|
|
|
- `
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ watch: {
|
|
|
+ ids(val) {
|
|
|
+ this.funStationPos(val);
|
|
|
+ // this.funStationPosLabel(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ mounted() {
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+
|
|
|
+ unmounted() {
|
|
|
+ this.map.remove();
|
|
|
+ this.map = null;
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ initMap() {
|
|
|
+ // 矢量文本标签渲染器
|
|
|
+ let canvasLabel = new L.CanvasLabel({
|
|
|
+ collisionFlg: true,
|
|
|
+ scale: 2,
|
|
|
+ });
|
|
|
+ this.map = L.map("map", {
|
|
|
+ renderer: canvasLabel,
|
|
|
+ // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
|
|
|
+ // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
|
|
|
+ // center: [108.953939, 34.266611], // 地图中心--陕西
|
|
|
+ // center: [109.470962, 34.520632], // 地图中心--渭南
|
|
|
+ zoom: 17, //缩放比列
|
|
|
+ zoomControl: false, //禁用 + - 按钮
|
|
|
+ doubleClickZoom: true, // 禁用双击放大
|
|
|
+ attributionControl: false, // 移除右下角leaflet标识
|
|
|
+ preferCanvas: true,
|
|
|
+ contextmenu: true,
|
|
|
+ contextmenuWidth: 140,
|
|
|
+ // contextmenuItems: [{
|
|
|
+ // text: "功率曲线拟合分析",
|
|
|
+ // callback: this.powerLine,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "对风偏差分析",
|
|
|
+ // callback: this.windAny,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "曲线偏差率分析",
|
|
|
+ // callback: this.qxAny,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "温度与功率分析",
|
|
|
+ // callback: this.wdyglAny,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "损失电量分析",
|
|
|
+ // callback: this.ssdlAny,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // text: "桨距角分析",
|
|
|
+ // callback: this.jjjAny,
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ });
|
|
|
+ // let name = L.tileLayer(
|
|
|
+ // "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
|
|
|
+ // ).addTo(this.map);
|
|
|
+
|
|
|
+ let name = L.tileLayer(this.tilsUrl, {
|
|
|
+ minZoom: 6,
|
|
|
+ maxZoom: 17,
|
|
|
+ }).addTo(this.map);
|
|
|
+
|
|
|
+ // this.setAreaLayer("db", true);
|
|
|
+ // this.setAreaLayer("jb", true);
|
|
|
+ this.setAreaLayer("nx", true);
|
|
|
+ },
|
|
|
+
|
|
|
+ async funStationPos(ids) {
|
|
|
+ let res = null;
|
|
|
+ this.rightObj = {};
|
|
|
+ if (ids.length > 0) {
|
|
|
+ res = await httpRequest.get("/base/windturbine", {
|
|
|
+ params: {
|
|
|
+ wpids: this.ids.join(","),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // res = await httpRequest.get("/base/station", {
|
|
|
+ // params: {},
|
|
|
+ // });
|
|
|
+ tabStr = "station";
|
|
|
+ let datas = await httpRequest.get(
|
|
|
+ "/benchmarking/wpByCplist?companyids=NX_FGS&type=-1"
|
|
|
+ );
|
|
|
+ res = datas.data;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data && res.data.data && res.data.data.length) {
|
|
|
+ // 清除现有的 layers
|
|
|
+ this.layers.forEach((layer) => {
|
|
|
+ this.map.removeLayer(layer);
|
|
|
+ });
|
|
|
+ this.layers = [];
|
|
|
+
|
|
|
+ const viewCenter =
|
|
|
+ this.viewCenterMap[res.data.data[0].windpowerstationId] || null;
|
|
|
+
|
|
|
+ if (!this.ciLayer) {
|
|
|
+ this.ciLayer = L.canvasIconLayer({}).addTo(this.map);
|
|
|
+ } else {
|
|
|
+ this.ciLayer.clearLayers();
|
|
|
+ }
|
|
|
+
|
|
|
+ // let iconUrl = require(`@/assets/images/indexCom/run_Icon.gif`);
|
|
|
+ let iconUrl = require(`@/assets/images/indexCom/fengji.png`);
|
|
|
+ // const img = new Image();
|
|
|
+ // img.src = require("@/assets/images/indexCom/run_Icon.gif");
|
|
|
+
|
|
|
+ for (let i = 0; i < res.data.data.length; i++) {
|
|
|
+ let item = res.data.data[i];
|
|
|
+
|
|
|
+ let marker = L.marker(
|
|
|
+ [Number(item.latitude), Number(item.longitude)],
|
|
|
+ {
|
|
|
+ icon: L.divIcon(
|
|
|
+ {
|
|
|
+ className: "iconSty",
|
|
|
+ iconUrl: iconUrl,
|
|
|
+ iconSize: [30, 39],
|
|
|
+ // iconAnchor: [15, 12.5],
|
|
|
+ iconAnchor: [15, 39],
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // className: "currentMapIcon",
|
|
|
+ // html: `<img src="${img.src}" style="width: 30px; height: 39px;">`,
|
|
|
+ // iconSize: [30, 39],
|
|
|
+ // iconAnchor: [15, 12.5],
|
|
|
+ // }
|
|
|
+ ),
|
|
|
+ data: item,
|
|
|
+ }
|
|
|
+ ).bindTooltip(
|
|
|
+ `
|
|
|
<div class="tip-box-top">
|
|
|
<div class="item">${item.aname}</div>
|
|
|
<div class="item">经度:${item.latitude}°</div>
|
|
|
<div class="item">纬度:${item.longitude}°</div>
|
|
|
<div class="item">海拔高度:${item.spare3}m</div>
|
|
|
</div>`
|
|
|
- );
|
|
|
-
|
|
|
- let latlng = L.latLng(
|
|
|
- Number(item.latitude),
|
|
|
- Number(item.longitude)
|
|
|
- );
|
|
|
-
|
|
|
- let c1 = L.circleMarker(latlng, {
|
|
|
- radius: 5,
|
|
|
- color: "transparent",
|
|
|
- labelStyle: {
|
|
|
- text: item.aname,
|
|
|
- scale: 1.2,
|
|
|
- rotation: 0,
|
|
|
- offsetY: 35,
|
|
|
- fillStyle: "#fff",
|
|
|
- zIndex: i,
|
|
|
- },
|
|
|
- data: item,
|
|
|
- }).addTo(this.map);
|
|
|
-
|
|
|
- marker.on("tooltipopen", (e) => {
|
|
|
- this.rightObj = item;
|
|
|
- });
|
|
|
-
|
|
|
- marker.addTo(this.map);
|
|
|
-
|
|
|
- this.layers.push(c1);
|
|
|
- this.layers.push(marker);
|
|
|
-
|
|
|
- this.ciLayer.addLayer(marker);
|
|
|
- }
|
|
|
-
|
|
|
- let center = this.map.getCenter();
|
|
|
- this.map.panTo([center.lat, center.lng], {
|
|
|
- animate: true
|
|
|
- });
|
|
|
-
|
|
|
- if (viewCenter) {
|
|
|
- this.map.setView(viewCenter, 13);
|
|
|
- } else if (this.layers.length > 0) {
|
|
|
- this.map.setView(this.layers[0].getLatLng(), 13);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- async funStationPosLabel(ids) {
|
|
|
- if (this.layers.length > 0) {
|
|
|
- for (var i = 0; i < this.layers.length; i++) {
|
|
|
- this.map.removeLayer(this.layers[i]);
|
|
|
- }
|
|
|
- this.layers = [];
|
|
|
- }
|
|
|
- let res = null;
|
|
|
- if (ids.length > 0) {
|
|
|
- res = await httpRequest.get("/base/location", {
|
|
|
- params: {
|
|
|
- ids: this.ids.join(","),
|
|
|
- },
|
|
|
- });
|
|
|
- } else {
|
|
|
- res = await httpRequest.get("/base/station", {
|
|
|
- params: {},
|
|
|
- });
|
|
|
- }
|
|
|
- if (res.code === 200) {
|
|
|
- if (res.data && res.data.length) {
|
|
|
- this.layers = [];
|
|
|
- const viewCenter =
|
|
|
- this.viewCenterMap[res.data[0].windpowerstationId] || null;
|
|
|
- for (let i = 0; i < res.data.length; i++) {
|
|
|
- let item = res.data[i];
|
|
|
-
|
|
|
- let latlng = L.latLng(
|
|
|
- Number(item.latitude),
|
|
|
- Number(item.longitude)
|
|
|
- );
|
|
|
- let c = L.circleMarker(latlng, {
|
|
|
- radius: 5,
|
|
|
- color: "#12e799",
|
|
|
- labelStyle: {
|
|
|
- text: item.aname,
|
|
|
- scale: 1,
|
|
|
- rotation: 0,
|
|
|
- offsetY: 15,
|
|
|
- fillStyle: "#000",
|
|
|
- zIndex: i,
|
|
|
- },
|
|
|
- data: item,
|
|
|
- })
|
|
|
- .bindTooltip(
|
|
|
- `
|
|
|
+ );
|
|
|
+
|
|
|
+ let latlng = L.latLng(
|
|
|
+ Number(item.latitude),
|
|
|
+ Number(item.longitude)
|
|
|
+ );
|
|
|
+
|
|
|
+ let c1 = L.circleMarker(latlng, {
|
|
|
+ radius: 5,
|
|
|
+ color: "transparent",
|
|
|
+ labelStyle: {
|
|
|
+ text: item.aname,
|
|
|
+ scale: 1.2,
|
|
|
+ rotation: 0,
|
|
|
+ offsetY: 20,
|
|
|
+ fillStyle: "#fff",
|
|
|
+ zIndex: i,
|
|
|
+ },
|
|
|
+ data: item,
|
|
|
+ }).addTo(this.map);
|
|
|
+
|
|
|
+ marker.on("tooltipopen", (e) => {
|
|
|
+ this.rightObj = item;
|
|
|
+ });
|
|
|
+
|
|
|
+ marker.addTo(this.map);
|
|
|
+
|
|
|
+ this.layers.push(c1);
|
|
|
+ this.layers.push(marker);
|
|
|
+
|
|
|
+ this.ciLayer.addLayer(marker);
|
|
|
+ }
|
|
|
+
|
|
|
+ const lineArray = [
|
|
|
+ [
|
|
|
+ // 35kV集电一线
|
|
|
+ "1101~1102",
|
|
|
+ "1103~1102",
|
|
|
+ "1102~1104",
|
|
|
+ "1104~1105",
|
|
|
+ "1106~1107",
|
|
|
+ "1107~1108",
|
|
|
+ "1108~1109",
|
|
|
+ "1109~1110",
|
|
|
+ "1110~1111",
|
|
|
+ "1111~1113",
|
|
|
+ "1113~1112",
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ // 35kV集电二线
|
|
|
+ "1201~1202",
|
|
|
+ "1201~1203",
|
|
|
+ "1203~1204",
|
|
|
+ "1204~1205",
|
|
|
+ "1205~1206",
|
|
|
+ "1206~1207",
|
|
|
+ "1207~1208",
|
|
|
+ "1208~1209",
|
|
|
+ "1209~1210",
|
|
|
+ "1210~1211",
|
|
|
+ "1211~1212",
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ // 35kV集电三线
|
|
|
+ "2308~2307",
|
|
|
+ "2307~2304",
|
|
|
+ "2304~2303",
|
|
|
+ "2303~2302",
|
|
|
+ "2302~2301",
|
|
|
+ "2301~2302",
|
|
|
+ "2302~2303",
|
|
|
+ "2303~2304",
|
|
|
+ "2307~2309",
|
|
|
+ "2309~2311",
|
|
|
+ "2311~2312",
|
|
|
+ "2312~2313",
|
|
|
+ "2313~2312",
|
|
|
+ "2312~2311",
|
|
|
+ "2309~2310",
|
|
|
+ "2310~2306",
|
|
|
+ "2306~2305",
|
|
|
+ ],
|
|
|
+ [
|
|
|
+ // 35kV集电四线
|
|
|
+ "2412~2411",
|
|
|
+ "2411~2410",
|
|
|
+ "2411~2409",
|
|
|
+ "2409~2408",
|
|
|
+ "2408~2407",
|
|
|
+ "2407~2402",
|
|
|
+ "2402~2401",
|
|
|
+ "2401~2402",
|
|
|
+ "2407~2403",
|
|
|
+ "2403~2404",
|
|
|
+ "2404~2405",
|
|
|
+ "2405~2406",
|
|
|
+ ],
|
|
|
+ ];
|
|
|
+ const lineColor = ["red", "blue", "orange", "#FF7F50"];
|
|
|
+
|
|
|
+ lineArray.forEach((pEle, pIndex) => {
|
|
|
+ let latlngs = [];
|
|
|
+ pEle.forEach((cEle) => {
|
|
|
+ const points = cEle.split("~");
|
|
|
+ const point1 =
|
|
|
+ res.data.data.find((wt) => {
|
|
|
+ return wt.nemCode === points[0];
|
|
|
+ }) || null;
|
|
|
+ const point2 =
|
|
|
+ res.data.data.find((wt) => {
|
|
|
+ return wt.nemCode === points[1];
|
|
|
+ }) || null;
|
|
|
+ if (point1 && point2) {
|
|
|
+ latlngs.push([point1.latitude, point1.longitude]);
|
|
|
+ latlngs.push([point2.latitude, point2.longitude]);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // 创建Polyline对象,并添加到地图
|
|
|
+ var polyline = L.polyline(latlngs, {
|
|
|
+ color: lineColor[pIndex],
|
|
|
+ }).addTo(this.map);
|
|
|
+
|
|
|
+ // 可选:设置地图视图以确保这条线在视野内
|
|
|
+ // map.fitBounds(polyline.getBounds());
|
|
|
+ });
|
|
|
+
|
|
|
+ let center = this.map.getCenter();
|
|
|
+ this.map.panTo([center.lat, center.lng], {
|
|
|
+ animate: true,
|
|
|
+ });
|
|
|
+
|
|
|
+ if (viewCenter) {
|
|
|
+ this.map.setView(viewCenter, 13);
|
|
|
+ } else if (this.layers.length > 0) {
|
|
|
+ this.map.setView(this.layers[0].getLatLng(), 13);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ async funStationPosLabel(ids) {
|
|
|
+ if (this.layers.length > 0) {
|
|
|
+ for (var i = 0; i < this.layers.length; i++) {
|
|
|
+ this.map.removeLayer(this.layers[i]);
|
|
|
+ }
|
|
|
+ this.layers = [];
|
|
|
+ }
|
|
|
+ let res = null;
|
|
|
+ if (ids.length > 0) {
|
|
|
+ res = await httpRequest.get("/base/location", {
|
|
|
+ params: {
|
|
|
+ ids: this.ids.join(","),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ res = await httpRequest.get("/base/station", {
|
|
|
+ params: {},
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (res.code === 200) {
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ this.layers = [];
|
|
|
+ const viewCenter =
|
|
|
+ this.viewCenterMap[res.data[0].windpowerstationId] || null;
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let item = res.data[i];
|
|
|
+
|
|
|
+ let latlng = L.latLng(
|
|
|
+ Number(item.latitude),
|
|
|
+ Number(item.longitude)
|
|
|
+ );
|
|
|
+ let c = L.circleMarker(latlng, {
|
|
|
+ radius: 5,
|
|
|
+ color: "#12e799",
|
|
|
+ labelStyle: {
|
|
|
+ text: item.aname,
|
|
|
+ scale: 1,
|
|
|
+ rotation: 0,
|
|
|
+ offsetY: 15,
|
|
|
+ fillStyle: "#000",
|
|
|
+ zIndex: i,
|
|
|
+ },
|
|
|
+ data: item,
|
|
|
+ })
|
|
|
+ .bindTooltip(
|
|
|
+ `
|
|
|
<div class="tip-box-top">
|
|
|
<div class="item">${item.aname}</div>
|
|
|
<div class="item">经度:${item.latitude}°</div>
|
|
|
<div class="item">纬度:${item.longitude}°</div>
|
|
|
<div class="item">海拔高度:${item.spare3}m</div>
|
|
|
</div>`
|
|
|
- )
|
|
|
- .addTo(this.map);
|
|
|
- this.layers.push(c);
|
|
|
-
|
|
|
- let that = this;
|
|
|
- c.on("mouseover", function onmouseover(e) {
|
|
|
- that.rightObj = item;
|
|
|
- });
|
|
|
- }
|
|
|
- let center = this.map.getCenter();
|
|
|
- this.map.panTo([center.lat, center.lng], {
|
|
|
- animate: true,
|
|
|
- });
|
|
|
- this.map.setView(viewCenter || this.layers[0].getLatLng(), 13);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- setAreaLayer(jsonName, isBounds) {
|
|
|
- const wfAllGeoJson = require(`@/assets/${jsonName}.json`);
|
|
|
- this.areaLayer = L.geoJSON(wfAllGeoJson, {
|
|
|
- style: (feature) => {
|
|
|
- return {
|
|
|
- fillOpacity: 0.1,
|
|
|
- fillColor: "rgb(27, 242, 245)",
|
|
|
- weight: 2,
|
|
|
- color: "rgb(27, 242, 245)",
|
|
|
- };
|
|
|
- },
|
|
|
- });
|
|
|
- this.map.addLayer(this.areaLayer);
|
|
|
- if (isBounds) {
|
|
|
- this.map.fitBounds(this.areaLayer.getBounds());
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- powerLine(e) {
|
|
|
- if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
- this.$message({
|
|
|
- message: "该坐标系下暂无功率曲线拟合",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.layers.forEach((item, index) => {
|
|
|
- if (item.options.data) {
|
|
|
- if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
- if (
|
|
|
- item.options.data.latitude === this.rightObj.latitude &&
|
|
|
- item.options.data.longitude === this.rightObj.longitude
|
|
|
- ) {
|
|
|
- this.$emit("rightClick", {
|
|
|
- menuIndex: 0,
|
|
|
- current: this.rightObj,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.options.data.name === this.rightObj.name) {
|
|
|
- this.$message({
|
|
|
- message: "风场暂无功率曲线拟合功能",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- windAny(e) {
|
|
|
- if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
- this.$message({
|
|
|
- message: "该坐标系下暂无对风偏差分析",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.layers.forEach((item) => {
|
|
|
- if (item.options.data) {
|
|
|
- if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
- if (
|
|
|
- item.options.data.latitude === this.rightObj.latitude &&
|
|
|
- item.options.data.longitude === this.rightObj.longitude
|
|
|
- ) {
|
|
|
- this.$emit("rightClick", {
|
|
|
- menuIndex: 1,
|
|
|
- current: this.rightObj,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.options.data.name === this.rightObj.name) {
|
|
|
- this.$message({
|
|
|
- message: "风场暂无对风偏差分析功能",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- qxAny(e) {
|
|
|
- if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
- this.$message({
|
|
|
- message: "该坐标系下暂无曲线偏差分析",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.layers.forEach((item) => {
|
|
|
- if (item.options.data) {
|
|
|
- if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
- if (
|
|
|
- item.options.data.latitude === this.rightObj.latitude &&
|
|
|
- item.options.data.longitude === this.rightObj.longitude
|
|
|
- ) {
|
|
|
- this.$emit("rightClick", {
|
|
|
- menuIndex: 2,
|
|
|
- current: this.rightObj,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.options.data.name === this.rightObj.name) {
|
|
|
- this.$message({
|
|
|
- message: "风场暂无曲线偏差分析功能",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- wdyglAny(e) {
|
|
|
- if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
- this.$message({
|
|
|
- message: "该坐标系下暂无温度与功率分析",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.layers.forEach((item) => {
|
|
|
- if (item.options.data) {
|
|
|
- if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
- if (
|
|
|
- item.options.data.latitude === this.rightObj.latitude &&
|
|
|
- item.options.data.longitude === this.rightObj.longitude
|
|
|
- ) {
|
|
|
- this.$emit("rightClick", {
|
|
|
- menuIndex: 3,
|
|
|
- current: this.rightObj,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.options.data.name === this.rightObj.name) {
|
|
|
- this.$message({
|
|
|
- message: "风场暂无温度与功率分析功能",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- ssdlAny(e) {
|
|
|
- if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
- this.$message({
|
|
|
- message: "该坐标系下暂无损失电量分析",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.layers.forEach((item) => {
|
|
|
- if (item.options.data) {
|
|
|
- if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
- if (
|
|
|
- item.options.data.latitude === this.rightObj.latitude &&
|
|
|
- item.options.data.longitude === this.rightObj.longitude
|
|
|
- ) {
|
|
|
- this.$emit("rightClick", {
|
|
|
- menuIndex: 4,
|
|
|
- current: this.rightObj,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.options.data.name === this.rightObj.name) {
|
|
|
- this.$message({
|
|
|
- message: "风场暂无损失电量分析功能",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- jjjAny(e) {
|
|
|
- if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
- this.$message({
|
|
|
- message: "该坐标系下暂无桨距角分析",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.layers.forEach((item) => {
|
|
|
- if (item.options.data) {
|
|
|
- if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
- if (
|
|
|
- item.options.data.latitude === this.rightObj.latitude &&
|
|
|
- item.options.data.longitude === this.rightObj.longitude
|
|
|
- ) {
|
|
|
- this.$emit("rightClick", {
|
|
|
- menuIndex: 5,
|
|
|
- current: this.rightObj,
|
|
|
- });
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.options.data.name === this.rightObj.name) {
|
|
|
- this.$message({
|
|
|
- message: "风场暂无桨距角分析功能",
|
|
|
- type: "error",
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
+ )
|
|
|
+ .addTo(this.map);
|
|
|
+ this.layers.push(c);
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ c.on("mouseover", function onmouseover(e) {
|
|
|
+ that.rightObj = item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let center = this.map.getCenter();
|
|
|
+ this.map.panTo([center.lat, center.lng], {
|
|
|
+ animate: true,
|
|
|
+ });
|
|
|
+ this.map.setView(viewCenter || this.layers[0].getLatLng(), 13);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ setAreaLayer(jsonName, isBounds) {
|
|
|
+ const wfAllGeoJson = require(`@/assets/${jsonName}.json`);
|
|
|
+ this.areaLayer = L.geoJSON(wfAllGeoJson, {
|
|
|
+ style: (feature) => {
|
|
|
+ return {
|
|
|
+ fillOpacity: 0.1,
|
|
|
+ fillColor: "rgb(27, 242, 245)",
|
|
|
+ weight: 2,
|
|
|
+ color: "rgb(27, 242, 245)",
|
|
|
+ };
|
|
|
},
|
|
|
- };
|
|
|
+ });
|
|
|
+ this.map.addLayer(this.areaLayer);
|
|
|
+ if (isBounds) {
|
|
|
+ this.map.fitBounds(this.areaLayer.getBounds());
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ powerLine(e) {
|
|
|
+ if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
+ this.$message({
|
|
|
+ message: "该坐标系下暂无功率曲线拟合",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.layers.forEach((item, index) => {
|
|
|
+ if (item.options.data) {
|
|
|
+ if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
+ if (
|
|
|
+ item.options.data.latitude === this.rightObj.latitude &&
|
|
|
+ item.options.data.longitude === this.rightObj.longitude
|
|
|
+ ) {
|
|
|
+ this.$emit("rightClick", {
|
|
|
+ menuIndex: 0,
|
|
|
+ current: this.rightObj,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.options.data.name === this.rightObj.name) {
|
|
|
+ this.$message({
|
|
|
+ message: "风场暂无功率曲线拟合功能",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ windAny(e) {
|
|
|
+ if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
+ this.$message({
|
|
|
+ message: "该坐标系下暂无对风偏差分析",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.layers.forEach((item) => {
|
|
|
+ if (item.options.data) {
|
|
|
+ if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
+ if (
|
|
|
+ item.options.data.latitude === this.rightObj.latitude &&
|
|
|
+ item.options.data.longitude === this.rightObj.longitude
|
|
|
+ ) {
|
|
|
+ this.$emit("rightClick", {
|
|
|
+ menuIndex: 1,
|
|
|
+ current: this.rightObj,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.options.data.name === this.rightObj.name) {
|
|
|
+ this.$message({
|
|
|
+ message: "风场暂无对风偏差分析功能",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ qxAny(e) {
|
|
|
+ if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
+ this.$message({
|
|
|
+ message: "该坐标系下暂无曲线偏差分析",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.layers.forEach((item) => {
|
|
|
+ if (item.options.data) {
|
|
|
+ if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
+ if (
|
|
|
+ item.options.data.latitude === this.rightObj.latitude &&
|
|
|
+ item.options.data.longitude === this.rightObj.longitude
|
|
|
+ ) {
|
|
|
+ this.$emit("rightClick", {
|
|
|
+ menuIndex: 2,
|
|
|
+ current: this.rightObj,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.options.data.name === this.rightObj.name) {
|
|
|
+ this.$message({
|
|
|
+ message: "风场暂无曲线偏差分析功能",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ wdyglAny(e) {
|
|
|
+ if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
+ this.$message({
|
|
|
+ message: "该坐标系下暂无温度与功率分析",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.layers.forEach((item) => {
|
|
|
+ if (item.options.data) {
|
|
|
+ if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
+ if (
|
|
|
+ item.options.data.latitude === this.rightObj.latitude &&
|
|
|
+ item.options.data.longitude === this.rightObj.longitude
|
|
|
+ ) {
|
|
|
+ this.$emit("rightClick", {
|
|
|
+ menuIndex: 3,
|
|
|
+ current: this.rightObj,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.options.data.name === this.rightObj.name) {
|
|
|
+ this.$message({
|
|
|
+ message: "风场暂无温度与功率分析功能",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ ssdlAny(e) {
|
|
|
+ if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
+ this.$message({
|
|
|
+ message: "该坐标系下暂无损失电量分析",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.layers.forEach((item) => {
|
|
|
+ if (item.options.data) {
|
|
|
+ if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
+ if (
|
|
|
+ item.options.data.latitude === this.rightObj.latitude &&
|
|
|
+ item.options.data.longitude === this.rightObj.longitude
|
|
|
+ ) {
|
|
|
+ this.$emit("rightClick", {
|
|
|
+ menuIndex: 4,
|
|
|
+ current: this.rightObj,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.options.data.name === this.rightObj.name) {
|
|
|
+ this.$message({
|
|
|
+ message: "风场暂无损失电量分析功能",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ jjjAny(e) {
|
|
|
+ if (!this.rightObj.latitude && !this.rightObj.longitude) {
|
|
|
+ this.$message({
|
|
|
+ message: "该坐标系下暂无桨距角分析",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.layers.forEach((item) => {
|
|
|
+ if (item.options.data) {
|
|
|
+ if (item.options.data.name.indexOf("风电场") === -1) {
|
|
|
+ if (
|
|
|
+ item.options.data.latitude === this.rightObj.latitude &&
|
|
|
+ item.options.data.longitude === this.rightObj.longitude
|
|
|
+ ) {
|
|
|
+ this.$emit("rightClick", {
|
|
|
+ menuIndex: 5,
|
|
|
+ current: this.rightObj,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (item.options.data.name === this.rightObj.name) {
|
|
|
+ this.$message({
|
|
|
+ message: "风场暂无桨距角分析功能",
|
|
|
+ type: "error",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
<style scoped lang="less">
|
|
|
- .mapCom {
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- .iconLabel {
|
|
|
- width: 80px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .iconSty {
|
|
|
- .iconStyClass {
|
|
|
- width: 50px;
|
|
|
- height: 100px;
|
|
|
- position: relative;
|
|
|
- top: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- #map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .lmap-image {
|
|
|
- width: 32px;
|
|
|
- height: 32px;
|
|
|
- }
|
|
|
-
|
|
|
- .lmap-span {
|
|
|
- display: inline-block;
|
|
|
- margin-left: 5px;
|
|
|
- padding: 5px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- white-space: nowrap;
|
|
|
- }
|
|
|
-
|
|
|
- .lmap-text {
|
|
|
- display: inline-block;
|
|
|
- margin-left: 5px;
|
|
|
- padding: 5px;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 20px;
|
|
|
- font-size: 16px;
|
|
|
- color: #fff;
|
|
|
- width: 500px;
|
|
|
- white-space: nowrap;
|
|
|
- position: absolute;
|
|
|
- text-align: center;
|
|
|
- top: 25px;
|
|
|
- left: -250px;
|
|
|
+.mapCom {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .iconLabel {
|
|
|
+ width: 80px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconSty {
|
|
|
+ .iconStyClass {
|
|
|
+ width: 50px;
|
|
|
+ height: 100px;
|
|
|
+ position: relative;
|
|
|
+ top: 40px;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.lmap-image {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+.lmap-span {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+
|
|
|
+.lmap-text {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ width: 500px;
|
|
|
+ white-space: nowrap;
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ top: 25px;
|
|
|
+ left: -250px;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="less">
|
|
|
- .mapCom {
|
|
|
- .currentMapIcon {
|
|
|
- img {
|
|
|
- position: absolute;
|
|
|
- z-index: 1000;
|
|
|
- }
|
|
|
- }
|
|
|
+.mapCom {
|
|
|
+ .currentMapIcon {
|
|
|
+ img {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
}
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|