|
|
@@ -0,0 +1,544 @@
|
|
|
+<template>
|
|
|
+ <div class="mapCom">
|
|
|
+ <div id="map"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ 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",
|
|
|
+ canvasLabel: null,
|
|
|
+ markers: null
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ ids(val) {
|
|
|
+ this.layers = [];
|
|
|
+
|
|
|
+ this.funStationPos(val);
|
|
|
+ // this.funStationPosLabel(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initMap() {
|
|
|
+ //矢量文本标签渲染器
|
|
|
+ this.canvasLabel = new L.CanvasLabel({
|
|
|
+ collisionFlg: true,
|
|
|
+ scale: 2,
|
|
|
+ });
|
|
|
+ this.map = L.map("map", {
|
|
|
+ renderer: this.canvasLabel,
|
|
|
+ // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
|
|
|
+ // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
|
|
|
+ // center: [108.953939, 34.266611], // 地图中心--陕西
|
|
|
+ // center: [109.470962, 34.520632], // 地图中心--渭南
|
|
|
+ zoom: 18, //缩放比列
|
|
|
+ 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: 1,
|
|
|
+ maxZoom: 18,
|
|
|
+ }).addTo(this.map);
|
|
|
+
|
|
|
+ // this.setAreaLayer("db", true);
|
|
|
+ // this.setAreaLayer("jb", true);
|
|
|
+ this.setAreaLayer("nx", true);
|
|
|
+ },
|
|
|
+
|
|
|
+ async funStationPos(ids) {
|
|
|
+ let res = null;
|
|
|
+ let tabStr = ""
|
|
|
+
|
|
|
+ // 移除所有 Marker
|
|
|
+ if (this.markers) {
|
|
|
+ this.markers.clearLayers();
|
|
|
+ }
|
|
|
+ if (ids.length > 0) {
|
|
|
+ tabStr = "winds"
|
|
|
+ res = await httpRequest.get("/base/windturbine", {
|
|
|
+ params: {
|
|
|
+ wpids: this.ids.join(","),
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ tabStr = "station"
|
|
|
+ let datas = await httpRequest.get("/benchmarking/wpByCplist?companyids=NX_FGS&type=-1");
|
|
|
+ res = datas.data
|
|
|
+ }
|
|
|
+ if (res.code === 200) {
|
|
|
+ let resdatas = null
|
|
|
+ resdatas = tabStr === "station" ? res.data : res.data.data
|
|
|
+ if (resdatas && resdatas.length) {
|
|
|
+ // 创建一个 LayerGroup 来管理所有的 Marker
|
|
|
+ this.markers = L.layerGroup().addTo(this.map);
|
|
|
+
|
|
|
+ let iconUrl = require(`@/assets/images/indexCom/fengji.png`);
|
|
|
+
|
|
|
+ for (let i = 0; i < resdatas.length; i++) {
|
|
|
+ let item = resdatas[i];
|
|
|
+
|
|
|
+ let latlng = L.latLng(
|
|
|
+ Number(item.latitude),
|
|
|
+ Number(item.longitude)
|
|
|
+ );
|
|
|
+
|
|
|
+ let marker = L.marker(latlng, {
|
|
|
+ // title: item.name,
|
|
|
+ icon: L.divIcon({
|
|
|
+ html: `<div class="custom-icon"><img src="${iconUrl}" alt="Icon"/><span style="color:#000;margin-left:10px">${item.aname}</span></div>`,
|
|
|
+ className: "iconSty",
|
|
|
+ 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>`
|
|
|
+ )
|
|
|
+ .addTo(this.map);
|
|
|
+ this.layers.push(marker);
|
|
|
+ // 添加 Marker 到 LayerGroup
|
|
|
+ this.markers.addLayer(marker);
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ marker.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(this.layers[0].getLatLng(), 14);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ 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 = [];
|
|
|
+ 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.altitude}m</div>
|
|
|
+ </div>`
|
|
|
+ )
|
|
|
+ .addTo(this.map);
|
|
|
+ this.layers.push(c);
|
|
|
+
|
|
|
+ let that = this;
|
|
|
+ c.on("mouseover", function onmouseover(e) {
|
|
|
+ console.log("map", item);
|
|
|
+ that.rightObj = item;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ let center = this.map.getCenter();
|
|
|
+ this.map.panTo([center.lat, center.lng], {
|
|
|
+ animate: true,
|
|
|
+ });
|
|
|
+ this.map.setView(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) => {
|
|
|
+ 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: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: white;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding: 5px;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-icon img {
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-icon span {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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>
|
