Layers.js 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. import Style from "ol/style/Style";
  2. import {deepClone} from '@/common/commonFun'
  3. import {Cluster, Vector as VectorSource} from 'ol/source.js';
  4. import { Vector as VectorLayer} from 'ol/layer.js';
  5. import {boundingExtent} from 'ol/extent.js';
  6. import {
  7. Circle as CircleStyle,
  8. Fill,
  9. Text,
  10. } from 'ol/style.js';
  11. import {unByKey} from 'ol/Observable';
  12. import ImageLayer from 'ol/layer/Image';
  13. import ImageStatic from 'ol/source/ImageStatic';
  14. import XYZLayer from "../../utils/ol-map/XYZLayer";
  15. import GeoJsonLayer from "../../utils/ol-map/GeoJsonLayer";
  16. import eventBus from "@/api/eventBus";
  17. import {VectorStyle} from "../../utils/ol-map/KMap";
  18. import StaticImgLayer from "../../utils/ol-map/StaticImgLayer";
  19. function getColorByVal(val, legendData) {
  20. for (let i = 0; i < legendData.level.length; i++) {
  21. let [min, max] = legendData.level[i];
  22. if (val >= min && val <= max) {
  23. return legendData.colors[i];
  24. }
  25. }
  26. return undefined; // 如果 val 不在任何区间内,返回 undefined
  27. }
  28. /**
  29. * @description 全景化地图层对象
  30. */
  31. class StaticMapLayers {
  32. constructor(map){
  33. this.initStaticMapLayers(map)
  34. this.vectorStyle = new VectorStyle()
  35. this.layerData = {}
  36. this.cacheStyle = {}
  37. this.timeIndex = 0
  38. this.layerName = ""
  39. }
  40. initStaticMapLayers(map){
  41. let that = this
  42. VE_API.warning.fetchWarningLayer({
  43. k: "static_map",
  44. resultType: "json",
  45. }).then(({data}) => {
  46. for(let key in data){
  47. let item = data[key]
  48. if(item.type === "xyz"){
  49. that.layerData[key] = {legend:item.legend, layer:that.addXyzLayer(map, item)}
  50. }else if(item.type === "geojson"){
  51. that.layerData[key] = {legend:item.legend, legendData:item.legendData, layer:that.addGeoJsonLayer(map, item, key)}
  52. }else if(item.type === "img"){
  53. that.layerData[key] = {legend:item.legend, layer:that.addStaticImgLayer(map, item)}
  54. }
  55. }
  56. // that.autoTest()
  57. // 时间轴
  58. eventBus.on("weatherTime:changeTime", ({index}) => {
  59. this.timeIndex = index
  60. this.show(this.layerName)
  61. })
  62. })
  63. }
  64. show(key,isFit = false){
  65. if (isFit) {
  66. this.timeIndex = 0
  67. }
  68. this.layerName = key
  69. this.hideAll()
  70. let keyText = key+this.timeIndex
  71. let layer = this.layerData[keyText].layer
  72. eventBus.emit("alarmList:changeMapLayer", {legendUrl:layer.layer.get("legend"),
  73. colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
  74. layer.show()
  75. if(isFit && layer.layer.getExtent){
  76. let extent = layer.layer.getExtent();
  77. if(extent && extent[0] != Infinity){
  78. layer.mapInstance.fit(extent,{padding:[-200,-200,-200,-200]})
  79. }
  80. }
  81. }
  82. showSingle(key,isFit = false){
  83. this.layerName = key
  84. this.hideAll()
  85. let layer = this.layerData[key].layer
  86. eventBus.emit("alarmList:changeMapLayer", {legendUrl:layer.layer.get("legend"),
  87. colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
  88. layer.show()
  89. if(isFit && layer.layer.getExtent){
  90. let extent = layer.layer.getExtent();
  91. if(extent && extent[0] != Infinity){
  92. layer.mapInstance.fit(extent,{padding:[-200,-200,-200,-200]})
  93. }
  94. }
  95. }
  96. hideAll(){
  97. for(let key in this.layerData){
  98. let layer = this.layerData[key].layer
  99. layer.hide()
  100. }
  101. }
  102. addStaticImgLayer(map, item){
  103. item["opacity"] = 0.5
  104. let imgLayer = new StaticImgLayer(item.url, item, 3, map);
  105. imgLayer.hide()
  106. if(item.legendData){
  107. imgLayer.layer.set("colors", item.legendData.colors)
  108. imgLayer.layer.set("labels", item.legendData.label)
  109. }
  110. imgLayer.layer.set("legend", item.legend)
  111. return imgLayer
  112. }
  113. addXyzLayer(map, item){
  114. let xyz = new XYZLayer(item.url, item, 3, map);
  115. xyz.hide()
  116. return xyz
  117. }
  118. addGeoJsonLayer(map, item, key){
  119. let that = this
  120. item["style"] = function(feature){
  121. let val = feature.get(item.legendData.paramKey)
  122. let cacheKey = `${key}_${item.legendData.paramKey}_${val}`
  123. let style = that.cacheStyle[cacheKey]
  124. if(!style){
  125. let color = getColorByVal(val, item.legendData)
  126. let fillColor = color
  127. let strokeColor = color
  128. style = that.vectorStyle.getPolygonStyle(fillColor, strokeColor, 1)
  129. that.cacheStyle[cacheKey] = style
  130. }
  131. return style
  132. }
  133. let geoJsonLayer = new GeoJsonLayer(item.url, item, 3, map);
  134. geoJsonLayer.layer.set("colors", item.legendData.colors)
  135. geoJsonLayer.layer.set("labels", item.legendData.label)
  136. geoJsonLayer.hide()
  137. return geoJsonLayer
  138. }
  139. autoTest(){
  140. let that = this
  141. let keys = []
  142. for(let key in that.layerData){
  143. keys.push(key)
  144. }
  145. let index = 0
  146. setTimeout(() => {
  147. that.showSingle("从化地块日温",true)
  148. index = (index + 1) % keys.length
  149. }, 2000);
  150. }
  151. }
  152. export default StaticMapLayers