|
|
@@ -0,0 +1,301 @@
|
|
|
+<template>
|
|
|
+ <div class="mapCom">
|
|
|
+ <div id="map"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ import httpRequest from '@/utils/request.js'
|
|
|
+ export default {
|
|
|
+ props: {
|
|
|
+ ids: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ windList: {
|
|
|
+ type: Array,
|
|
|
+ default: () => {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ DefaultIcon1: null,
|
|
|
+ layerGroup: [],
|
|
|
+ layers: [],
|
|
|
+ rightObj: {},
|
|
|
+ tilsUrl: "./static/kMapTiles/{z}/{x}/{y}.jpg",
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ ids(val) {
|
|
|
+
|
|
|
+ if (this.layers.length > 0) {
|
|
|
+ this.map.removeLayer(this.layerGroup)
|
|
|
+ // this.layerGroup.clearLayers();
|
|
|
+ }
|
|
|
+ this.funStationPos(val)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initMap();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async funStationPos(ids) {
|
|
|
+ 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 DefaultIcon1 = L.icon({
|
|
|
+ html: item.name,
|
|
|
+ iconUrl: this.icoName,
|
|
|
+ // 图标的大小 【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
|
|
|
+ // iconSize: [24, 41],
|
|
|
+ // 影子的大小 【值1，值2】 为具体你自定义阴影图标的尺寸，比如我图标尺寸是41×41，表示该图标：宽度41像素，高度：41像素，那么值1:就是41，值2：就是41
|
|
|
+ // shadowSize: [41, 41],
|
|
|
+ // 图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
|
|
|
+ iconAnchor: [24, 41],
|
|
|
+ // shadowAnchor: [4, 62], // 相同的影子
|
|
|
+ // 该点是相对于iconAnchor弹出信息的位置 这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
|
|
|
+ // popupAnchor: [1, -24]
|
|
|
+ })
|
|
|
+
|
|
|
+ let iconLabel = L.divIcon({
|
|
|
+ html: item.name,
|
|
|
+ className: 'iconLabel',
|
|
|
+ // iconSize: 50
|
|
|
+ })
|
|
|
+
|
|
|
+ var marker = null
|
|
|
+ var marker1 = null
|
|
|
+ marker = L.marker([item.latitude, item.longitude], {
|
|
|
+ title: item.name,
|
|
|
+ icon: DefaultIcon1,
|
|
|
+ data: item
|
|
|
+ }).addTo(this.map)
|
|
|
+
|
|
|
+
|
|
|
+ // marker.on('mousemove', function (e) {
|
|
|
+ // console.log('2323', e)
|
|
|
+ // let data = e.target.options.data
|
|
|
+ // // var buttonDiv = document.createElement('div');
|
|
|
+ // // var commitButton = document.createElement('input');
|
|
|
+ // // commitButton.type = 'button';
|
|
|
+ // // commitButton.value = "功率曲线拟合";
|
|
|
+ // // commitButton.onclick = function () {
|
|
|
+ // // console.log('功率曲线拟合', data)
|
|
|
+ // // e.target.closePopup()
|
|
|
+ // // marker(e.latlng, {
|
|
|
+ // // title: item.name,
|
|
|
+ // // icon: DefaultIcon1,
|
|
|
+ // // data: item
|
|
|
+ // // }).addTo(this.map)
|
|
|
+ // // };
|
|
|
+ // // buttonDiv.appendChild(commitButton);
|
|
|
+
|
|
|
+ // // var deleteButton = document.createElement('input');
|
|
|
+ // // deleteButton.type = 'button';
|
|
|
+ // // deleteButton.value = "对风偏差分析";
|
|
|
+ // // deleteButton.onclick = function () {
|
|
|
+ // // console.log('对风偏差分析', data)
|
|
|
+ // // };
|
|
|
+ // // buttonDiv.appendChild(deleteButton);
|
|
|
+
|
|
|
+ // // var parentDiv = document.createElement('div');
|
|
|
+ // // var commentDiv = document.createElement('div');
|
|
|
+ // // // 区域名称
|
|
|
+ // let name = e.target.options.data.name
|
|
|
+ // // var nameSpan = document.createTextNode(name + ':');
|
|
|
+ // // commentDiv.appendChild(nameSpan);
|
|
|
+ // // parentDiv.appendChild(commentDiv);
|
|
|
+ // // parentDiv.appendChild(buttonDiv);
|
|
|
+ // // e.target.bindPopup(e.latlng, parentDiv).openPopup();
|
|
|
+ // e.target.bindPopup(name).openPopup();
|
|
|
+ // })
|
|
|
+ let that = this
|
|
|
+ marker.on('mousemove', function (e) {
|
|
|
+ console.log('map', item)
|
|
|
+ that.rightObj = item
|
|
|
+ })
|
|
|
+
|
|
|
+ marker1 = new L.marker([item.latitude, item.longitude], {
|
|
|
+ icon: iconLabel,
|
|
|
+ }).addTo(this.map)
|
|
|
+
|
|
|
+ this.map.panTo({
|
|
|
+ lat: Number(item.latitude),
|
|
|
+ lng: Number(item.longitude)
|
|
|
+ });
|
|
|
+ this.layers.push(marker)
|
|
|
+ this.layers.push(marker1)
|
|
|
+ }
|
|
|
+ this.layerGroup = L.layerGroup(this.layers)
|
|
|
+ this.map.addLayer(this.layerGroup)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ cesss(e) {
|
|
|
+ console.log('11000001222', e)
|
|
|
+ },
|
|
|
+
|
|
|
+ initMap() {
|
|
|
+ this.map = L.map("map", {
|
|
|
+ // center: [40.02404009136253, 116.50641060224784], // 地图中心--北京
|
|
|
+ // center: [38.44673272215545, 106.27624511718751], // 地图中心--银川
|
|
|
+ zoom: 16, //缩放比列
|
|
|
+ zoomControl: false, //禁用 + - 按钮
|
|
|
+ doubleClickZoom: true, // 禁用双击放大
|
|
|
+ attributionControl: false, // 移除右下角leaflet标识
|
|
|
+ contextmenu: true,
|
|
|
+ contextmenuWidth: 140,
|
|
|
+ contextmenuItems: [{
|
|
|
+ text: '功率曲线拟合',
|
|
|
+ callback: this.powerLine
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: '对风偏差分析',
|
|
|
+ callback: this.windAny
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+ // 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: 16
|
|
|
+ }).addTo(this.map)
|
|
|
+
|
|
|
+ },
|
|
|
+ powerLine(e) {
|
|
|
+ console.log('2221111', this.layers)
|
|
|
+ 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'
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style scoped lang="less">
|
|
|
+ .mapCom {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ .iconLabel {
|
|
|
+ width: 80px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ #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>
|
