How to use Map cover overlay in openlayers6
This article will explain in detail how to use the map cover overlay in openlayers6. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.
Detailed explanation of the method of realizing popup pop-up window vue page addPopup () by overlay
①: an instance new Overlay (), which sets the relevant properties. Element is bound to the dom of the outermost pop-up window of the page.
②: add overlay pop-up windows to the page through map.addOverlay (this.overlay)
③: closer.onclick adds an x close pop-up event
④: the pop-up window effect is triggered by clicking on the map through the this.map.on ("singleclick", function (evt) event
The specific code is as follows:
AddPopup () {/ / use variable storage DOM object var container = document.getElementById ("popup"); var closer = document.getElementById ("popup-closer"); var content = document.getElementById ("popup-content") / / create a pop-up Overlay object this.overlay = new Overlay ({element: container, / / bind the autoPan: true of the Overlay object and the DOM object, / / define that the pop-up window may not fully set the automatic translation effect autoPanAnimation: {duration: 250 / / the animation time of the automatic translation effect 9 milliseconds)}) / / add the pop-up window to the map map this.map.addOverlay (this.overlay); let _ that = this; / * add a function to close the pop-up window * / closer.onclick = function () {_ that.overlay.setPosition (undefined); closer.blur (); return false;} / * add click map response function to handle pop-up actions * / this.map.on ("singleclick", function (evt) {console.log (evt.coordinate); let coordinate = transform (evt.coordinate, "EPSG:3857", "EPSG:4326")) / / Click the ruler (here is the ruler (m), not latitude and longitude); let hdms = toStringHDMS (toLonLat (evt.coordinate)); / / convert to latitude and longitude display content [XSS _ clean] = `
You click here:
Latitude and longitude:
${hdms}
Coordinates:
XRV ${coordinate [0]} Y: ${coordinate [1]} `; _ that.overlay.setPosition (evt.coordinate); / / display overlay to the specified XMagi y coordinates});}
Effect.
The autoPan property is false effect
Click on the far right side of the screen and you can see that the map will not be adapted according to the location of the mouse click.
Label tagging Information realized by overlay
Vue page
AddMarker () {var marker = new Overlay ({position: fromLonLat ([104.043505, 30.58165]), positioning: "center-center", element: document.getElementById ("marker"), stopEvent: false}); this.map.addOverlay (marker);}
Implementation of text text message with overlay
Vue page
AddText () {var textInfo = new Overlay ({position: fromLonLat ([104.043505, 30.58165]), offset: [20,-20], element: document.getElementById ("textInfo")}); this.map.addOverlay (textInfo);}
Attach the complete code I am text text message import "ol/ol.css"; import {Map, View, Coordinate} from "ol"; import {toStringHDMS} from "ol/coordinate"; import TileLayer from "ol/layer/Tile"; import XYZ from "ol/source/XYZ"; import Overlay from "ol/Overlay"; import {fromLonLat, transform, toLonLat} from "ol/proj" / / Pop-up window to implement export default {name: "dashboard", data () {return {map: null, overlay: null};}, methods: {initMap () {let target = "map" / / bind to the id of the page element to render 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 ({/ / projection: "EPSG:4326", / / use this coordinate system center: fromLonLat ([104.912777, 34.730746]), / / Map Center coordinates zoom: 4.5 / / Zoom level}) This.map = new Map ({target: target, / / bind dom elements for rendering layers: [tileLayer], / / configure map data source view: view / / configure the options configuration of map display (coordinate system, center point, zoom level, etc.)}) }, / * first: dot mark marker * create a dimension information * / addMarker () {var marker = new Overlay ({position: fromLonLat ([104.043505, 30.58165]), positioning: "center-center", element: document.getElementById ("marker") StopEvent: false}) This.map.addOverlay (marker) }, / * second: text label label * create a label tag information * / addText () {var textInfo = new Overlay ({position: fromLonLat ([104.043505, 30.58165]), offset: [20,-20] Element: document.getElementById ("textInfo")}) This.map.addOverlay (textInfo);}, / * third: pop-up window popup * create a pop-up window popup information * / addPopup () {/ / use variables to store the DOM object var container = document.getElementById ("popup") Var closer = document.getElementById ("popup-closer"); var content = document.getElementById ("popup-content") / / create a pop-up Overlay object this.overlay = new Overlay ({element: container, / / bind autoPan: false of Overlay object and DOM object) / / define that the pop-up window may not fully set the automatic pan effect when clicking on the edge. AutoPanAnimation: {duration: 250 / / the animation time of the automatic pan effect is 9 milliseconds)}}) / / add the pop-up window to the map map this.map.addOverlay (this.overlay); let _ that = this; / * add a function to close the response to the pop-up window * / closer.onclick = function () {_ that.overlay.setPosition (undefined) Closer.blur (); return false;}; / * add a click response function to handle pop-up actions * / this.map.on ("singleclick", function (evt) {console.log (evt.coordinate)) Let coordinate = transform (evt.coordinate, "EPSG:3857", "EPSG:4326"); / / Click the ruler (here is the ruler (m), not latitude and longitude); let hdms = toStringHDMS (toLonLat (evt.coordinate)) / / convert to latitude and longitude display content [XSS _ clean] = `
You click here:
Latitude and longitude:
${hdms}
Coordinates:
XRV ${coordinate [0]} Y: ${coordinate [1]} `; _ that.overlay.setPosition (evt.coordinate); / / display overlay to the specified xonomy coordinates});}}, mounted () {this.initMap (); / / initialize pop-up method this.addText (); this.addMarker () This.addPopup ();}}; html,body {height: 100%;} # app {min-height: calc (100vh-50px); width: 100%; position: relative; overflow: none; # map {height: 888px; min-height: calc (100vh-50px);}}. Ol-popup {position: absolute; background-color: white -webkit-filter: drop-shadow (0,0,0,0.2); filter: drop-shadow (0,0,0,0.2); padding: 15px; border-radius: 10px; border: 1px solid # cccccc; bottom: 12px; left:-50px;}. Ol-popup:after,.ol-popup:before {top: 100%; border: solid transparent; content: "" Height: 0; width: 0; position: absolute; pointer-events: none;}. Ol-popup:after {border-top-color: white; border-width: 10px; left: 48px; margin-left:-10px;} .ol-popup:before {border-top-color: # cccccc; border-width: 11px; left: 48px; margin-left:-11px;} .ol-popup-closer {text-decoration: none Position: absolute; top: 2px; right: 8px;} .popup-content {width: 400px;} .ol-popup-closer:after {content: "✖";} # marker {width: 20px; height: 20px; background: red; border-radius: 50%;} # textInfo {width: 200px; height: 40px; line-height: 40px; background: burlywood; color: yellow; text-align: center; font-size: 20px } this is the end of the article on "how to use overlay in openlayers6". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
