openlayers 地图组件封装
<template><div class="mapBox"><div ref="map" id="map" class="map"></div><div id="popup" class="ol-popup"><a href="#" id="popup-closer" class="ol-popup-closer"></a><div id="popup-content">{{ popup.content }}</div></div><div v-if="false" class="optionsBox"><el-dropdown @command="handleGisCommand"><el-button type="primary">GIS服务<i class="el-icon-arrow-down el-icon--right"></i></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-item command="1">测距离</el-dropdown-item><el-dropdown-item command="2">测面积</el-dropdown-item><el-dropdown-item command="3">清空</el-dropdown-item><el-dropdown-item command="4">打印地图</el-dropdown-item></el-dropdown-menu></el-dropdown><el-radio-group v-model="checkUnderLayer" @change="handleUnderLayerChange"><el-radio-button label="sldt">矢量底图</el-radio-button><el-radio-button label="wxdt">卫星底图</el-radio-button></el-radio-group><el-checkbox-group v-model="checkLayers" @change="handleLayerChange"><el-checkbox-button label="zjc">注记层</el-checkbox-button><el-checkbox-button label="xzqh">行政区划</el-checkbox-button></el-checkbox-group><el-button type="primary" @click="handleFullScreen">{{ isFullScreen ? "退出全屏" : "全屏" }}</el-button><el-button type="primary" @click="handleBackCenter">回到原点</el-button><el-button type="primary" @click="handleTrackStart">{{ mapTrack.isPlay ? "暂停" : "开始" }}</el-button><el-button type="primary" @click="handleTrackStop">停止</el-button></div></div>
</template><script>
import "ol/ol.css";
import request from "@/utils/request.js";
import domtoimage from "dom-to-image";
import Text from "ol/style/Text";import { getWidth, getTopLeft } from "ol/extent";
import View from "ol/View";
import Map from "ol/Map";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import Feature from "ol/Feature";
import { WMTS, Vector as VectorSource, XYZ } from "ol/source";
import { Tile as TileLayer, Vector as VectorLayer, VectorImage } from "ol/layer";
import { getArea, getLength } from "ol/sphere";
import { unByKey } from "ol/Observable";
import { LineString, Polygon, Point, MultiLineString } from "ol/geom";
import { MousePosition, ScaleLine, ZoomSlider } from "ol/control";
import { createStringXY } from "ol/coordinate";
import * as olProj from "ol/proj";
import { Draw, Select, Modify } from "ol/interaction";
import Overlay from "ol/Overlay";import { Circle as CircleStyle, Fill, Stroke, Style, Icon } from "ol/style";
import { scale } from "ol/size";import GeoJSON from "ol/format/GeoJSON";
import SourceVector from "ol/source/Vector";
import { getDistance } from "ol/sphere";import { getVectorContext } from "ol/render";
import { EventBus } from "@/utils/eventBus.js";import { transform, fromLonLat, toLonLat } from "ol/proj";import LayerTile from "ol/layer/Tile";
import ImageLayer from "ol/layer/Image";
import { Raster as RasterSource } from "ol/source";
import { defaults as defaultControls } from "ol/control";
import { saveAs } from "file-saver";
export default {data() {return {map: null,mapCenter: [118.091838, 36.958653], popup: {popupOverlay: null, content: "", },checkLayers: ["zjc", "xzqh"],mapLayers: {},underlayer: {sldt: { layer: null, show: true },wxdt: { layer: null, show: false },},checkUnderLayer: "sldt",mapDraw: {helpTooltipElement: null,feature: null,helpTooltip: null,draw: null,measureTooltipElement: null,measureTooltip: null,listener: null,mapMouseMove: null,drawElements: [],drawLayers: [],},isFullScreen: false,mapTrack: {isPlay: false, isStop: false, route: null,featureMove: {},geometryMove: {},carPoints: [], routeIndex: 0, timer: null,routeLayer: {},coordinates: [[117.98804853292008, 36.924719974587475],... ...],},};},mounted() {this.initDeepColorMap();this.initEvent();this.initPointPopup();window.addEventListener("resize", () => {this.isFullScreen =document.fullscreenElement ||document.webkitFullscreenElement ||document.msFullscreenElement ||document.mozFullScreenElement ||null;});},methods: {handleTrackStart() {this.mapTrack.isPlay = !this.mapTrack.isPlay;if (this.mapTrack.isPlay) {this.trackMoveStart();} else {this.trackMovePause();}},handleTrackStop() {this.mapTrack.isPlay = false;this.mapTrack.isStop = true;this.resetTrack();this.addTrack();},handleUnderLayerChange(type) {for (let i in this.underlayer) {this.underlayer[i].layer.setVisible(false);this.underlayer[i].show = false;}this.underlayer[type].show = true;this.underlayer[type].layer.setVisible(true);},handleLayerChange() {for (let i in this.mapLayers) {this.mapLayers[i].layer.setVisible(false);}for (let i in this.checkLayers) {this.mapLayers[this.checkLayers[i]].layer.setVisible(true);}},handleFullScreen() {if (this.isFullScreen) {this.exitfullscreen();} else {this.enterfullscreen();}},handleBackCenter() {this.map.getView().setCenter(this.mapCenter);},initMap() {const tdLayer = new TileLayer({source: new XYZ({crossOrigin: "anonymous",projection: "EPSG:4326",url: "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}&T=vec_c&tk=地图的key",}),className: "dt",});const tdTextLayer = new TileLayer({source: new XYZ({crossOrigin: "anonymous",projection: "EPSG:4326",url: "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}&T=cva_c&tk=地图的key",}),className: "txt",});this.map = new Map({target: "map",view: new View({center: this.mapCenter,projection: olProj.get("EPSG:4326"),zoom: 13,maxZoom: 17,minZoom: 1,}),});this.map.addLayer(tdLayer);this.map.addLayer(tdTextLayer);this.mapLayers.zjc = { layer: tdTextLayer, show: true };const projection = olProj.get("EPSG:4326");const projectionExtent = projection.getExtent();const size = getWidth(projectionExtent) / 256;const resolutions = [];const matrixIds = [];for (let z = 0; z < 20; ++z) {resolutions[z] = size / Math.pow(2, z + 1);matrixIds[z] = z + 1;}const tdwxLayer = new TileLayer({opacity: 1,visible: false,source: new WMTS({crossOrigin: "anonymous",url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=地图的key",layer: "wxt",matrixSet: "c",format: "tiles",style: "default",projection: this.projection,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),});this.map.addLayer(tdwxLayer);this.underlayer.sldt = { layer: tdLayer, show: true };this.underlayer.wxdt = { layer: tdwxLayer, show: false };},initDeepColorMap() {const view = new View({center: this.mapCenter,zoom: 12, projection: "EPSG:4326",});this.map = new Map({target: "map",view: view,controls: defaultControls({zoom: true,attribution: false,rotate: false,}),});let url = "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}";url = `${url}&T=vec_c&tk=地图的key`;const source = new XYZ({crossOrigin: "anonymous",url: url,projection: "EPSG:4326",});const tdtLayer = new TileLayer({className: "blueLayer",source: source,});this.map.addLayer(tdtLayer);url = "https://t0.tianditu.gov.cn/DataServer?x={x}&y={y}&l={z}";url = `${url}&T=cva_c&tk=地图的key`;const sourceCVA = new XYZ({crossOrigin: "anonymous",url: url,projection: "EPSG:4326",});const tdtcvaLayer = new TileLayer({className: "blueLayer",source: sourceCVA,});this.map.addLayer(tdtcvaLayer);this.mapLayers.zjc = { layer: tdtcvaLayer, show: true };const projection = olProj.get("EPSG:4326");const projectionExtent = projection.getExtent();const size = getWidth(projectionExtent) / 256;const resolutions = [];const matrixIds = [];for (let z = 0; z < 20; ++z) {resolutions[z] = size / Math.pow(2, z + 1);matrixIds[z] = z + 1;}const tdwxLayer = new TileLayer({opacity: 1,visible: false,source: new WMTS({crossOrigin: "anonymous",url:"http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=地图的key",layer: "wxt",matrixSet: "c",format: "tiles",style: "default",projection: this.projection,tileGrid: new WMTSTileGrid({origin: getTopLeft(projectionExtent),resolutions: resolutions,matrixIds: matrixIds,}),wrapX: true,}),});this.map.addLayer(tdwxLayer);this.underlayer.sldt = { layer: tdtLayer, show: true };this.underlayer.wxdt = { layer: tdwxLayer, show: false };},initBlueColorMap() {let target = "map";let tileLayer = [new TileLayer({source: new XYZ({url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",}),}),];let view = new View({center: this.mapCenter,zoom: 12,});this.map = new Map({target: target,layers: tileLayer,view: view,});const TiandiMap_cia = new TileLayer({name: "天地图影像注记图层",source: new XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=地图的key", wrapX: false,}),});this.map.addLayer(TiandiMap_cia);},initEvent() {this.map.once("rendercomplete", () => {this.addProvinceBorder();this.$emit("complete", this.map);});this.map.on("click", e => {var pixel = this.map.getEventPixel(e.originalEvent);console.log(e.coordinate);let feature = this.map.forEachFeatureAtPixel(pixel, feature => {return feature;});if (feature && feature.name && feature.name != "cityScope") {var coodinate = e.coordinate;this.popup.content = "你点击的坐标为：" + coodinate;this.popup.popupOverlay.setPosition(coodinate);this.map.addOverlay(this.popup.popupOverlay);this.$emit("pointClick", true, feature.name, e.coordinate, e.pixel);} else {this.$emit("pointClick", false, feature.name, e.coordinate, e.pixel);this.popup.popupOverlay.setPosition(undefined);}});},initPointPopup() {var container = document.getElementById("popup");var popupCloser = document.getElementById("popup-closer");this.popup.popupOverlay = new Overlay({element: container,autoPan: true,});popupCloser.addEventListener("click", function() {this.popup.popupOverlay.setPosition(undefined);});},addProvinceBorder(geojson) {const provinceLayer = new VectorLayer({renderMode: "vector",source: new VectorSource(),zIndex: 0,});this.map.addLayer(provinceLayer);this.mapLayers.xzqh = { layer: provinceLayer, show: true };let qxn = geojson ? geojson : require("../mixins/370321.json");qxn.features.forEach(featureJSON => {let feature = new GeoJSON().readFeature(featureJSON);feature.set("name", feature.values_.NAME);feature.setStyle(new Style({stroke: new Stroke({color: "rgba(3,15,83, 1)",width: 1,}),fill: new Fill({color: "rgba(3,15,83, 0.5)", }),}));provinceLayer.getSource().addFeature(feature);});},addPoint(list, icon, angle, popupType = 0) {const flagLayer = new VectorLayer({source: new VectorSource(),});this.map.addLayer(flagLayer);let featuresArr = [];for (let i = 0; i < list.length; i++) {let feature = new Feature({geometry: new Point([list[i][0], list[i][1]]),});feature.name = "point";feature.popupType = popupType;feature.setStyle(new Style({image: new Icon({src: icon,anchor: [0.5, 0.9],scale: 1,rotation: angle || 0,}),zIndex: 6000,}));featuresArr.push(feature);} flagLayer.getSource().addFeatures(featuresArr);},handleGisCommand(cmd) {switch (cmd) {case "1":this.drawDistance();break;case "2":this.drawArea();break;case "3":this.drawClear();break;case "4":this.printMap();break;default:break;}},drawDistance() {let source = new VectorSource(); const layer = new VectorLayer({source: source,style: new Style({fill: new Fill({color: "rgba(255, 255, 255, 0.2)",}),stroke: new Stroke({color: "#ffcc33",width: 4,}),image: new CircleStyle({radius: 7,fill: new Fill({color: "#ffcc33",}),}),}),zIndex: 4000,});this.mapDraw.mapMouseMove = this.map.on("pointermove", ev => {let helpMsg = "点击开始测量"; if (this.mapDraw.feature) {helpMsg = "双击结束测量"; }this.mapDraw.helpTooltipElement.innerHTML = helpMsg; this.mapDraw.helpTooltip.setPosition(ev.coordinate); this.mapDraw.helpTooltipElement.classList.remove("hidden"); });this.drawCreateHelpTooltip(); this.map.addLayer(layer); this.mapDraw.drawLayers.push(layer); this.mapDraw.draw = new Draw({source: source,type: "LineString", style: new Style({fill: new Fill({color: "rgba(255, 255, 255, 0.2)",}),stroke: new Stroke({color: "rgba(0, 0, 0, 0.5)",lineDash: [10, 10],width: 4,}),image: new CircleStyle({radius: 5,stroke: new Stroke({color: "rgba(0, 0, 0, 0.7)",}),fill: new Fill({color: "rgba(255, 255, 255, 0.2)",}),}),}),});this.map.addInteraction(this.mapDraw.draw); const formatLength = function(line) {const length = getLength(line);let output;if (length > 100) {output = Math.round((length / 1000) * 100) / 100 + " " + "km";} else {output = Math.round(length * 100) / 100 + " " + "m";}return output;};this.drawCreateMeasureTooltip(); const _this = this;this.mapDraw.draw.on("drawstart", evt => {_this.mapDraw.feature = evt.feature; let tooltipCoord = evt.coordinate; _this.mapDraw.listener = _this.mapDraw.feature.getGeometry().on("change", function(evt) {const geom = evt.target;let output = formatLength(geom); tooltipCoord = geom.getLastCoordinate(); _this.mapDraw.measureTooltipElement.innerHTML = output; _this.mapDraw.measureTooltip.setPosition(tooltipCoord); });});this.mapDraw.draw.on("drawend", () => {this.mapDraw.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";this.mapDraw.measureTooltip.setOffset([0, -7]);this.mapDraw.feature = null;this.mapDraw.measureTooltipElement = null;this.drawCreateMeasureTooltip();unByKey(this.mapDraw.listener);unByKey(this.mapDraw.mapMouseMove);setTimeout(() => {this.mapDraw.helpTooltipElement.classList.add("hidden");this.mapDraw.helpTooltipElement = null;this.map.removeInteraction(this.mapDraw.draw);}, 50);});},drawCreateHelpTooltip() {if (this.mapDraw.helpTooltipElement) {this.mapDraw.helpTooltipElement.parentNode.removeChild(this.mapDraw.helpTooltipElement);}this.mapDraw.helpTooltipElement = document.createElement("div");this.mapDraw.helpTooltipElement.className = "ol-tooltip hidden";this.mapDraw.helpTooltip = new Overlay({element: this.mapDraw.helpTooltipElement,offset: [15, 0],positioning: "center-left",});this.map.addOverlay(this.mapDraw.helpTooltip);},drawCreateMeasureTooltip() {if (this.mapDraw.measureTooltipElement) {this.mapDraw.measureTooltipElement.parentNode.removeChild(this.mapDraw.measureTooltipElement);}this.mapDraw.measureTooltipElement = document.createElement("div");this.mapDraw.measureTooltipElement.className = "ol-tooltip ol-tooltip-measure";this.mapDraw.measureTooltip = new Overlay({element: this.mapDraw.measureTooltipElement,offset: [0, -15],positioning: "bottom-center",stopEvent: false,insertFirst: false,});this.mapDraw.drawElements.push(this.mapDraw.measureTooltip);this.map.addOverlay(this.mapDraw.measureTooltip);},drawClear() {for (let i = 0; i < this.mapDraw.drawLayers.length; i++) {this.map.removeLayer(this.mapDraw.drawLayers[i]);}for (let i = 0; i < this.mapDraw.drawElements.length; i++) {this.map.removeOverlay(this.mapDraw.drawElements[i]);}this.mapDraw.drawLayers = [];this.mapDraw.drawElements = [];this.map.removeInteraction(this.mapDraw.draw);unByKey(this.mapDraw.mapMouseMove);},drawArea() {let source = new VectorSource(); const layer = new VectorLayer({source: source,style: new Style({fill: new Fill({color: "rgba(255, 255, 255, 0.2)",}),stroke: new Stroke({color: "#ffcc33",width: 4,}),image: new CircleStyle({radius: 7,fill: new Fill({color: "#ffcc33",}),}),}),zIndex: 4000,});this.mapDraw.mapMouseMove = this.map.on("pointermove", ev => {let helpMsg = "点击开始测量"; if (this.mapDraw.feature) {helpMsg = "双击结束测量"; }this.mapDraw.helpTooltipElement.innerHTML = helpMsg; this.mapDraw.helpTooltip.setPosition(ev.coordinate); this.mapDraw.helpTooltipElement.classList.remove("hidden"); });this.drawCreateHelpTooltip(); this.map.addLayer(layer); this.mapDraw.drawLayers.push(layer); this.mapDraw.draw = new Draw({source: source,type: "Polygon", style: new Style({fill: new Fill({color: "rgba(255, 255, 255, 0.2)",}),stroke: new Stroke({color: "rgba(0, 0, 0, 0.5)",lineDash: [10, 10],width: 4,}),image: new CircleStyle({radius: 5,stroke: new Stroke({color: "rgba(0, 0, 0, 0.7)",}),fill: new Fill({color: "rgba(255, 255, 255, 0.2)",}),}),}),});this.map.addInteraction(this.mapDraw.draw); const _this = this;const formatArea = function(polygon) {var sourceProj = _this.map.getView().getProjection(); var area = getArea(polygon, {projection: sourceProj,});var output;if (area > 10000) {output = Math.round((area / 1000000) * 100) / 100 + " " + "km<sup>2</sup>";} else {output = Math.round(area * 100) / 100 + " " + "m<sup>2</sup>";}return output;};this.drawCreateMeasureTooltip(); this.mapDraw.draw.on("drawstart", evt => {_this.mapDraw.feature = evt.feature; let tooltipCoord = evt.coordinate; _this.mapDraw.listener = _this.mapDraw.feature.getGeometry().on("change", function(evt) {const geom = evt.target;let output = formatArea(geom); tooltipCoord = geom.getInteriorPoint().getCoordinates(); _this.mapDraw.measureTooltipElement.innerHTML = output; _this.mapDraw.measureTooltip.setPosition(tooltipCoord); });});this.mapDraw.draw.on("drawend", () => {this.mapDraw.measureTooltipElement.className = "ol-tooltip ol-tooltip-static";this.mapDraw.measureTooltip.setOffset([0, -7]);this.mapDraw.feature = null;this.mapDraw.measureTooltipElement = null;this.drawCreateMeasureTooltip();unByKey(this.mapDraw.listener);unByKey(this.mapDraw.mapMouseMove);setTimeout(() => {this.mapDraw.helpTooltipElement.classList.add("hidden");this.mapDraw.helpTooltipElement = null;this.map.removeInteraction(this.mapDraw.draw);}, 50);});},printMap() {const that = this;let exportOptions = {filter: function(element) {var className = element.className || "";return (className.indexOf("ol-control") === -1 ||className.indexOf("ol-scale") > -1 ||(className.indexOf("ol-attribution") > -1 && className.indexOf("ol-uncollapsible")));},};that.map.once("rendercomplete", function(e) {domtoimage.toJpeg(that.map.getViewport(), exportOptions).then(function(dataUrl) {saveAs(dataUrl, "map.jpg");});});that.map.updateSize();},enterfullscreen() {let docElm = document.documentElement;if (docElm.mozRequestFullScreen) {docElm.mozRequestFullScreen();}else if (docElm.webkitRequestFullScreen) {docElm.webkitRequestFullScreen();}else if (elem.msRequestFullscreen) {elem.msRequestFullscreen();}this.isFullScreen = true;},exitfullscreen() {if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitCancelFullScreen) {document.webkitCancelFullScreen();} else if (document.msExitFullscreen) {document.msExitFullscreen();}this.isFullScreen = false;},addTrack() {this.mapTrack.route = new LineString(this.mapTrack.coordinates);this.mapTrack.geometryMove = new Point(this.mapTrack.route.getFirstCoordinate());this.mapTrack.featureMove = new Feature({type: "featureMove",geometry: this.mapTrack.geometryMove,});this.mapTrack.featureMove.name = "track_point";this.mapTrack.dotsData = this.mapTrack.coordinates.map(item => {return transform(item, "EPSG:3857", "EPSG:4326");});this.mapTrack.carPoints = [...this.mapTrack.dotsData];this.mapTrack.routeLayer = new VectorLayer({source: new VectorSource({features: [new Feature({type: "route",geometry: this.mapTrack.route,}),this.mapTrack.featureMove,new Feature({type: "startIcon",geometry: new Point(this.mapTrack.route.getFirstCoordinate()),}),new Feature({type: "endIcon",geometry: new Point(this.mapTrack.route.getLastCoordinate()),}),new Feature({type: "featureMove",geometry: new Point(this.mapTrack.carPoints[0]),}),],}),style: feature => {if (feature.get("type") == "route") {return new Style({stroke: new Stroke({width: 6,color: [25, 59, 128, 1],}),});} else if (feature.get("type") == "startIcon") {return new Style({});} else if (feature.get("type") == "endIcon") {return new Style({});} else if (feature.get("type") == "featureMove") {return new Style({image: new Icon({src: require("@/assets/image/homecar2.png"),scale: 1,rotation: this.trackCountRotate(),}),});}},});this.map.addLayer(this.mapTrack.routeLayer);},trackMoveStart() {this.mapTrack.timer = setInterval(() => {if (this.mapTrack.routeIndex + 1 >= this.mapTrack.carPoints.length) {this.mapTrack.routeIndex = 0;clearInterval(this.mapTrack.timer);return;}if (this.trackNextPoint() === this.mapTrack.carPoints[this.mapTrack.routeIndex + 1]) {this.mapTrack.routeIndex++;if (this.mapTrack.featureMove.getStyle()) {this.mapTrack.featureMove.getStyle().getImage().setRotation(this.trackCountRotate());}}this.mapTrack.featureMove.getGeometry().setCoordinates(fromLonLat(this.mapTrack.carPoints[this.mapTrack.routeIndex]));console.log(this.mapTrack.coordinates[this.mapTrack.routeIndex]);}, 10);},trackMovePause() {clearInterval(this.mapTrack.timer);},trackNextPoint() {let routeIndex = this.mapTrack.routeIndex;let p1 = this.map.getPixelFromCoordinate(fromLonLat(this.mapTrack.carPoints[routeIndex])); let p2 = this.map.getPixelFromCoordinate(fromLonLat(this.mapTrack.carPoints[routeIndex + 1]));let dx = p2[0] - p1[0];let dy = p2[1] - p1[1];let distance = Math.sqrt(dx * dx + dy * dy);if (distance <= 1) {return this.mapTrack.carPoints[routeIndex + 1];} else {let x = p1[0] + dx / distance;let y = p1[1] + dy / distance;let coor = transform(this.map.getCoordinateFromPixel([x, y]), "EPSG:3857", "EPSG:4326");this.mapTrack.carPoints[routeIndex] = coor; return this.mapTrack.carPoints[routeIndex];}},trackCountRotate() {let i = this.mapTrack.routeIndex,j = i + 1;if (j === this.mapTrack.carPoints.length) {i--;j--;}let p1 = this.mapTrack.carPoints[i];let p2 = this.mapTrack.carPoints[j];return Math.atan2(p2[0] - p1[0], p2[1] - p1[1]);},resetTrack() {clearInterval(this.mapTrack.timer);this.mapTrack.routeLayer.getSource().clear();this.map.removeLayer(this.mapTrack.routeLayer);this.mapTrack.featureMove = {};this.mapTrack.geometryMove = {};this.mapTrack.timer = null;this.mapTrack.carPoints = [];this.mapTrack.routeIndex = 0;this.mapTrack.routeLayer = {};this.mapTrack.route = null;},},
};
</script><style lang="scss" scoped>
.mapBox {width: 100%;height: 100%;position: relative;
}
.map {width: 100%;height: 100%;
}/deep/.ol-control {display: none;
}/deep/.blueLayer {// filter: grayscale(100%) sepia(21%) invert(100%) saturate(150%) brightness(100%);filter: grayscale(98%) invert(100%) sepia(50%) hue-rotate(180deg) saturate(2000%) brightness(50%) contrast(90%) !important;
}.optionsBox {position: absolute;top: 20px;left: 20px;z-index: 1000;display: flex;align-items: center;
}
</style>
<style lang="scss" scoped>
/deep/.ol-tooltip {position: relative;background: rgba(0, 0, 0, 0.5);border-radius: 4px;color: white;padding: 4px 8px;opacity: 0.7;white-space: nowrap;font-size: 12px;cursor: default;user-select: none;
}/deep/ .hidden {display: none;
}/deep/.ol-tooltip-measure {opacity: 1;font-weight: bold;
}/deep/.ol-tooltip-static {background-color: #ffcc33;color: black;border: 1px solid white;
}/deep/.ol-tooltip-measure:before,
/deep/.ol-tooltip-static:before {border-top: 6px solid rgba(0, 0, 0, 0.5);border-right: 6px solid transparent;border-left: 6px solid transparent;content: "";position: absolute;bottom: -6px;margin-left: -7px;left: 50%;
}/deep/.ol-tooltip-static:before {border-top-color: #ffcc33;
}
</style>
