OpenLayers地图组件

import { getCogStatistics, getCogBounds } from "./ol-api.js"; import { Stroke, Style, Fill, Circle, Text } from 'ol/style'; import { transform, transformExtent, toLonLat, Projection } from 'ol/proj'; import { Vector as VectorLayer, Tile, Image as ImageLayer } from 'ol/layer'; import { Vector as VectorSource, XYZ, ImageStatic, ImageWMS, WMTS } from 'ol/source'; import WMTSTileGrid from 'ol/tilegrid/WMTS'; import * as olControl from 'ol/control'; import Map from 'ol/Map'; import View from 'ol/View'; import Draw, { createBox, createRegularPolygon } from 'ol/interaction/Draw'; import Overlay from 'ol/Overlay' import { LineString, Polygon, MultiLineString } from 'ol/geom' import * as olSphere from 'ol/sphere' import { unByKey } from 'ol/Observable' import { WKT } from 'ol/format'; import { defaults } from 'ol/interaction/defaults'; // titiler加载中 获取最大最小范围 export function getMinMax (obj) { let min = null, max = null Object.keys(obj).forEach((key) => { if (!min || min > obj[key].percentile_2) { min = obj[key].percentile_2 } if (!max || max < obj[key].percentile_98) { max = obj[key].percentile_98 } }) return [min, max]; } /**创建样式 * @param {*} feature * @param {*} resolution * @param {*} style * @returns */ export function crtStyle ({ resolution = 300, style = null, feature } = {}) { var iconSize = 300 / resolution; var featureStyle = null; switch (style.type) { // 几何控方未选择样式 case 'unSelected': featureStyle = new Style({ stroke: new Stroke({ color: '#54FF9F', lineDash: [0], width: 2 }), fill: new Fill({ color: 'rgb(158,197,255,0.2)' }), image: new Circle({ radius: 6, fill: new Fill({ color: 'blue' }), stroke: new Stroke({ color: '#ffffff', width: 1.5 }) }), text: new Text({ // 文本样式 text: '10', offsetX: 0 / resolution, offsetY: 0 / resolution, textAlign: 'start', textBaseline: 'bottom', font: iconSize + 'px Calibri,sans-serif', fill: new Fill({ color: '#000' }), stroke: new Stroke({ color: '#fff', width: 3 }) }), geometry: function (feature) { var center = feature.getGeometry().getCoordinates(); const top = [center[0], center[1] + 300]; const bottom = [center[0], center[1] - 300]; const left = [center[0] - 300, center[1]]; const right = [center[0] + 300, center[1]]; const geo = [ [top, bottom], [left, right] ]; return new MultiLineString(geo); } }); break; // 几何控方选择样式 case 'Selected': featureStyle = [new Style({ stroke: new Stroke({ color: '#54FF9F', lineDash: [0], width: 2 }), text: new Text({ // 文本样式 text: '10', offsetX: 0 / resolution, offsetY: 0 / resolution, textAlign: 'start', textBaseline: 'bottom', font: iconSize + 'px Calibri,sans-serif', fill: new Fill({ color: '#000' }), stroke: new Stroke({ color: '#fff', width: 3 }) }), geometry: function (feature) { var center = feature.getGeometry().getCoordinates(); const top = [center[0], center[1] + 300]; const bottom = [center[0], center[1] - 300]; const left = [center[0] - 300, center[1]]; const right = [center[0] + 300, center[1]]; return new MultiLineString([ [top, bottom], [left, right] ]); } }), new Style({ stroke: new Stroke({ color: '#54FF9F', lineDash: [10, 5], width: 2 }), geometry: function (feature) { var center = feature.getGeometry().getCoordinates(); const leftTop = [center[0] - 350, center[1] + 350]; const leftBottom = [center[0] - 350, center[1] - 350]; const rightBottom = [center[0] + 350, center[1] - 350]; const rightTop = [center[0] + 350, center[1] + 350]; return new Polygon([ [ leftTop, leftBottom, rightBottom, rightTop ] ]); } }) ]; break; //绘制样式 case 'draw': featureStyle = new Style({ stroke: new Stroke({ color: '#F25521', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0.2)' }), image: new Circle({ radius: 6, fill: new Fill({ color: 'blue' }), stroke: new Stroke({ color: '#ffffff', width: 1.5 }) }) }); break; // 查询结果样式 case 'result': featureStyle = new Style({ stroke: new Stroke({ color: 'blue', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), image: new Circle({ radius: 6, fill: new Fill({ color: 'blue' }), stroke: new Stroke({ color: '#ffffff', width: 1.5 }) }), text: new Text({ // 文本样式 text: feature ? feature.get('name') : '', offsetX: 0 / resolution, offsetY: 0 / resolution, textAlign: 'center', font: 'bold 14px 宋体', fill: new Fill({ color: 'black' }), backgroundFill: new Fill({ color: "#FDFDFD" }), placement: "point", overflow: true //超出面的部分不显示 }), }); break; // 激活样式 case 'active': featureStyle = new Style({ fill: new Fill({ color: '#F3B59D' }), }); break; //覆盖图层样式 case 'coverage': featureStyle = new Style({ stroke: new Stroke({ color: '#E6E6E6', lineDash: [0], width: 0.9 }), fill: new Fill({ color: '#e6e6e6b0' }) }); break; //红色样式 case 'red': featureStyle = new Style({ stroke: new Stroke({ color: 'red', lineDash: [0], width: 0.9 }) }); break; //通用样式 case 'normal': featureStyle = new Style({ stroke: new Stroke({ color: 'blue', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), }); break; //高亮样式 case 'highligh': featureStyle = new Style({ stroke: new Stroke({ color: '#43FF12', lineDash: [0], width: 0.9 }) }); break; case 'GF1': featureStyle = new Style({ stroke: new Stroke({ color: '#0000FF', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), }); break; case 'GF6': featureStyle = new Style({ stroke: new Stroke({ color: '#FFFF00', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), }); break; case 'Sentinel-2': featureStyle = new Style({ stroke: new Stroke({ color: '#F24F4E', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), }); break; case 'LandSat 8': featureStyle = new Style({ stroke: new Stroke({ color: '#00FFC6', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), }); break; case 'MODIS': featureStyle = new Style({ stroke: new Stroke({ color: '#F59B22', lineDash: [0], width: 0.9 }), fill: new Fill({ color: 'rgb(158,197,255,0)' }), }); break; default: break; } return featureStyle; } /**创建地图 * @param target {string} dom容器id * @param centerPoint {Array} 中心点坐标 * @param dataCrs {Array} 数据坐标 * @param sysCrs {Array} 系统坐标 * @param zoom {Number} 层级 * @returns {Map} */ export function crtMap ({ target, cent