map.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. import VectorSource from 'ol/source/Vector.js';
  2. import WKT from 'ol/format/WKT.js';
  3. import Feature from 'ol/Feature.js';
  4. import store from '@/store'
  5. import VectorLayer from 'ol/layer/Vector.js';
  6. import Draw from "ol/interaction/Draw";
  7. import Text from "ol/style/Text";
  8. import Icon from "ol/style/Icon";
  9. import {Circle, Fill, Stroke, Style} from 'ol/style.js';
  10. import * as proj from "ol/proj";
  11. import {getArea} from "ol/sphere.js";
  12. /*
  13. * @Author: your name
  14. * @Date: 2021-01-12 09:38:09
  15. * @LastEditTime: 2022-01-20 10:37:39
  16. * @LastEditors: Please set LastEditors
  17. * @Description: In User Settings Edit
  18. * @FilePath: \vue3-element-admin\src\utils\map.js
  19. */
  20. /**
  21. * 过滤不应该出现在属性列表的字段
  22. * @param data
  23. * @param key
  24. * @returns {boolean}
  25. */
  26. function filterWktProp(data,key){
  27. if(key == "regionWkt" || key == "wkt" || key == "pointWkt" || key == "geom" || !data[key]){
  28. return false
  29. }
  30. return true
  31. }
  32. export const newAreaFeature = (data, fieldGeom)=>{
  33. let geom = new WKT().readGeometry(data[fieldGeom || "wkt"])
  34. let feature = new Feature({
  35. geometry: geom
  36. });
  37. feature.set("nodeType","area");
  38. feature.setId(data.id)
  39. for(let key in data){
  40. if(filterWktProp(data,key)){
  41. feature.set(key,data[key])
  42. }
  43. }
  44. return feature;
  45. }
  46. export const newAreaPoint = (data)=>{
  47. let point = new WKT().readGeometry(data["pointWkt"])
  48. let feature = new Feature({
  49. geometry: point
  50. });
  51. feature.set("nodeType","area");
  52. feature.set("isPoint",1)
  53. for(let key in data){
  54. if(filterWktProp(data,key)){
  55. feature.set(key,data[key])
  56. }
  57. }
  58. return feature;
  59. }
  60. export const newPolymerFeature = (data)=>{
  61. let geom = new WKT().readGeometry(data["geom"])
  62. let feature = new Feature({
  63. geometry: geom
  64. });
  65. feature.set("nodeType","polymer");
  66. feature.setId(data.id)
  67. for(let key in data){
  68. if(filterWktProp(data,key)){
  69. feature.set(key,data[key])
  70. }
  71. }
  72. return feature;
  73. }
  74. export const newRegionFeature = (data)=>{
  75. let geom = new WKT().readGeometry(data["regionWkt"])
  76. let feature = new Feature({
  77. geometry: geom
  78. });
  79. feature.set("nodeType","region");
  80. feature.setId(data.id)
  81. for(let key in data){
  82. if(filterWktProp(data,key)){
  83. feature.set(key,data[key])
  84. }
  85. }
  86. return feature;
  87. }
  88. export const newPoint = (data,dataName)=>{
  89. let point = new WKT().readGeometry(data[dataName])
  90. let feature = new Feature({
  91. geometry: point
  92. });
  93. feature.setId(data.id)
  94. feature.set("nodeType","tree")
  95. for(let key in data){
  96. if(filterWktProp(data,key)){
  97. feature.set(key,data[key])
  98. }
  99. }
  100. return feature;
  101. }
  102. /**
  103. * 按treeId分组
  104. * @param data
  105. * @returns {[]}
  106. */
  107. export const groupByTreeId = (data) => {
  108. let res = []
  109. let cur = {treeId:-1,data:[]}
  110. for(let item of data){
  111. if(cur.treeId != item.treeId){
  112. cur = {treeId: item.treeId, data:[]}
  113. res.push(cur)
  114. }
  115. cur.data.push(item)
  116. }
  117. for(let item of res){
  118. item.data.sort((a,b) => {
  119. return Date.parse(b.uploadDate) - Date.parse(a.uploadDate)
  120. })
  121. }
  122. return res
  123. }
  124. /**
  125. * 按createDate分组
  126. * @param data
  127. * @returns {[]}
  128. */
  129. export const groupByCreateDate = (data) => {
  130. let res = {}
  131. let arr = []
  132. for(let item of data){
  133. if(res[item.uploadDate]){
  134. res[item.uploadDate].push(item)
  135. }else{
  136. res[item.uploadDate] = [item]
  137. arr.push({uploadDate:item.uploadDate, data: res[item.uploadDate]})
  138. }
  139. }
  140. arr.sort((a,b) => {
  141. return Date.parse(b.uploadDate) - Date.parse(a.uploadDate)
  142. })
  143. return arr
  144. }
  145. export const setPeriodAttr = (periodMap, data) => {
  146. for(let item of data){
  147. item["attrs"] = []
  148. let periodObj = periodMap[item.periodId]
  149. item["periodName"] = periodObj.name
  150. for(let i=0;i<periodObj.attrFields.length;i++){
  151. item["attrs"].push({name:periodObj.attrNames[i],field:periodObj.attrFields[i]})
  152. }
  153. }
  154. }
  155. export const bboxToFeature = ( x1, y1, x2, y2) => {
  156. let wkt = "POLYGON (("+x1+" "+y1+", "+x1+" "+y2+", "+x2+" "+y2+", "+x2+" "+y1+", "+x1+" "+y1+"))";
  157. let feature = new Feature({
  158. geometry: new WKT().readGeometry(wkt)
  159. });
  160. return feature
  161. }
  162. /**
  163. * 红框样式
  164. * @returns {Style}
  165. */
  166. export const redBoxStyle = ()=>{
  167. const fill = new Fill({
  168. color: 'rgba(255,255,255,0.1)',
  169. });
  170. const stroke = new Stroke({
  171. color: '#f5024f',
  172. width: 0.5,
  173. });
  174. let style = new Style({
  175. fill: fill,
  176. stroke: stroke,
  177. })
  178. return style
  179. }
  180. export const getAreaByWkt = (wkt)=>{
  181. let area = 0;
  182. let geom = new WKT().readGeometry(wkt)
  183. // 获取图层上的Polygon,转成geoJson用于回显
  184. geom.transform(proj.get("EPSG:4326"), proj.get("EPSG:3857"));
  185. let areaItem = getArea(geom);
  186. areaItem = (areaItem + areaItem / 2) / 1000;
  187. area = areaItem;
  188. return area.toFixed(2)
  189. }