Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to achieve the ranging function of Vue+OpenLayer". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "how to achieve the ranging function of Vue+OpenLayer"!

Introduce related library files

This library file can just follow the official website. First of all, let's talk about one thing, ha. The case used on the official website is the EPSG:3857 used on the map. If we change it to EPSG:4326, the measurement data are not accurate. Keep this in mind.

Import 'ol/ol.css'; import Draw from' ol/interaction/Draw'; import Map from 'ol/Map'; import Overlay from' ol/Overlay'; import View from 'ol/View'; import {Circle as CircleStyle, Fill, Stroke, Style} from' ol/style'; import {LineString, Polygon} from 'ol/geom'; import {OSM, Vector as VectorSource} from' ol/source'; import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer' Import {getArea, getLength} from 'ol/sphere'; import {unByKey} from' ol/Observable'

The above is the library file I introduced, which is basically the same as the official website.

Draw prompt text

First of all, let's take a look at the following picture of the effect of the official website. There is a title text box next to the mouse to prompt the user for operation information when the official website begins to draw or is drawn.

Let's first implement this function.

First of all, let's make it clear that this is the key code. Some parameters may be used to find that they are not declared and are global. You can add them to the global situation by yourself, mainly the following.

Var map = null var helpTooltipElement = null var feature = null; var helpTooltip = null; var draw = null; var measureTooltipElement = null; var measureTooltip = null; var listener = null; var mapMouseMove = null

First of all, we need to implement the ranging function on the page to write two buttons, one to start ranging, one to end ranging. Then when you click to start ranging, execute a method, assuming it is the distance method.

Distance () {let source = new VectorSource () / / first create a data source, which is used to place the segments const layer = new VectorLayer during and after the drawing ({/ / add a layer to place the data source, and you can set the style as you like. My default official website 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',}) MapMouseMove = map.on ('pointermove', (ev) = > {/ / add a mouse movement event to the map let helpMsg =' Click to measure'/ / default action prompt text if (feature) {/ / featuer is global Determine if you have clicked the mouse to draw helpMsg = 'double click to end the measurement' / / if you clicked to draw before, it will show the end of double click} helpTooltipElement [XSS _ clean] = helpMsg / / set the prompt text helpTooltip.setPosition (ev.coordinate) for dom; / / set the location to follow the mouse helpTooltipElement.classList.remove ('hidden') / / let it be displayed}) this.createHelpTooltip () / / create the helpTooltipElement method map.addLayer (layer) / / add the layer to the map}

A dom element that initializes the action prompt is then called. This is the function of the official website. If the parameter name and the pointing problem of map need to be modified according to your own actual situation.

CreateHelpTooltip () {if (helpTooltipElement) {helpTooltipElement [XSS _ clean] .removeChild (helpTooltipElement);} helpTooltipElement = document.createElement ('div'); helpTooltipElement.className =' ol-tooltip hidden'; helpTooltip = new Overlay ({element: helpTooltipElement, offset: [15,0], positioning: 'center-left',}); map.addOverlay (helpTooltip) }

Also, in order to look good, copy the style of the official website for a while.

/ 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/.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;}

Then you can see that after we click the "start ranging" button, the above code executes, and a small action prompt appears next to the mouse.

Mouse drawing line

OK, through the above code, we successfully draw the prompt box, and then the mouse is drawn, and the code is very simple. In the pointermove method of map listening, continue to create a draw to draw. The key code is as follows:

Draw = new Draw ({source, / / this data source is our original data source, which is abbreviated, actually source:source, type: 'LineString', / / drawing line style: new Style ({/ / the style of the front line before the drawing is finished, this is the style of the official website If necessary, you can modify 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)',}) }),})

Then bind the draw to the map.

Map.addInteraction (draw); / / draw bind to the map

Then the mouse drawing line is realized.

Set distance information window

When we click to start the measurement, when we drag the mouse, the current distance from the starting point will be displayed at the top. The local code implementation looks like the following. Continue to write after the above code:

/ / start listening to drawing draw.on ('drawstart', (evt) = > {feature = evt.feature; / / feature is the global let tooltipCoord = evt.coordinate; / / the current mouse position listener = feature.getGeometry () .on (' change', function (evt) {const geom = evt.target; let output = formatLength (geom)) / / the format of the distance is tooltipCoord = geom.getLastCoordinate (); / / set the real-time position of the real-time position after the mouse position is changed [XSS _ clean] = output; / / set the content of the prompt box, that is, the distance from measureTooltip.setPosition (tooltipCoord); / / set the location of the distance prompt box});}) / / format length. Direct official website code 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 +'+ 'return output;;} return output;}; this.createMeasureTooltip () / / create a prompt box for that distance

Then the above code calls a method.

CreateMeasureTooltip () {if (measureTooltipElement) {featureTooltipElement [XSS _ clean] .removeChild (measureTooltipElement);} measureTooltipElement = document.createElement ('div'); measureTooltipElement.className =' ol-tooltip ol-tooltip-measure' MeasureTooltip = new Overlay ({element: measureTooltipElement, offset: [0,-15], positioning: 'bottom-center', stopEvent: false, insertFirst: false,}); this.drawElements.push (measureTooltip) map.addOverlay (measureTooltip);}

After completing the above code, after we click to start the measurement, we will display the distance from the current mouse position to the starting point in real time above the mouse.

Drawing complete

The above has realized the click to start ranging, and the distance information is displayed in real time, and then the total length is displayed when the double click is finished.

Continue to write after the previous code:

/ / double-click to finish drawing draw.on ('drawend', () = > {measureTooltipElement.className =' ol-tooltip ol-tooltip-static'; measureTooltip.setOffset ([0,-7]); feature = null; measureTooltipElement = null; this.createMeasureTooltip (); unByKey (listener);})

The above code is basically the code of the official website, but the variable name needs to be changed slightly.

The function of double-click measurement is realized through the above code.

OK, that's it, the ranging function is complete!

Cancel drawing

When the drawing function is complete, you need to cancel the drawing. To cancel the drawing, you need to cancel the mapping function and delete the content already drawn on the interface after clicking the "cancel drawing" button.

First of all, we need to delete the content drawn on the map, including connections, and pop-up windows.

It is important to note that we need to save the drawn layers, such as wires and pop-up windows, to one or more lists, and then traverse and delete them when the button is clicked.

So we need to add the created layers to an array and save them after we click on the ranging layer to load it into the map.

Map.addLayer (layer) this.drawLayers.push (layer) / / Save it

Including the pop-up window with the total distance.

This.drawElements.push (measureTooltip) map.addOverlay (measureTooltip); / / Save it

Then execute the following code when you click the cancel Measurement button:

/ / Undraw cancal () {for (let I = 0; I)

< this.drawLayers.length; i++) { map.removeLayer(this.drawLayers[i]) } for (let i = 0; i < this.drawElements.length; i++) { map.removeOverlay(this.drawElements[i]) } this.drawLayers = [] this.drawElements = [] map.removeInteraction(draw) unByKey(mapMouseMove); }, 这样就可以了。 这样就完成了！ 全部代码 这里分享一下全部代码，就不放资源了，下载还花钱，我也是跟人家学的，没必要都。 测距 取消 import 'ol/ol.css'; import Draw from 'ol/interaction/Draw'; import Map from 'ol/Map'; import Overlay from 'ol/Overlay'; import View from 'ol/View'; import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'; import { LineString, Polygon } from 'ol/geom'; import { OSM, Vector as VectorSource } from 'ol/source'; import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'; import { getArea, getLength } from 'ol/sphere'; import { unByKey } from 'ol/Observable'; var map = null var helpTooltipElement = null var feature = null; var helpTooltip = null; var draw = null; var measureTooltipElement = null; var measureTooltip = null; var listener = null; var mapMouseMove = null; export default { name: "Home", data() { return { drawLayers: [], drawElements: [], } }, mounted() { this.initMap() }, methods: { // 初始化地图 initMap() { map = new Map({ layers: [ new TileLayer({ source: new OSM(), }), ], target: 'map', view: new View({ center: [0, 0], zoom: 5, maxZoom: 18, // projection: 'EPSG:4326', constrainResolution: true, // 设置缩放级别为整数 smoothResolutionConstraint: false, // 关闭无级缩放地图 }), }); }, // 测距 distance() { 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', }), }), }), }); mapMouseMove = map.on('pointermove', (ev) =>

{let helpMsg = 'click to start measurement' if (feature) {helpMsg = 'double click to end measurement'} helpTooltipElement [XSS _ clean] = helpMsg; helpTooltip.setPosition (ev.coordinate) HelpTooltipElement.classList.remove ('hidden')}) map.getViewport () .addEventListener (' mouseout', function () {helpTooltipElement.classList.add ('hidden');}) Draw = new Draw ({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)',}) / / start firm drawing draw.on ('drawstart', (evt) = > {feature = evt.feature; let tooltipCoord = evt.coordinate; listener = feature.getGeometry (). On (' change', function (evt) {const geom = evt.target; let output = formatLength (geom); tooltipCoord = geom.getLastCoordinate () FeatureTooltipElement [XSS _ clean] = output; measureTooltip.setPosition (tooltipCoord);});}); / / double-click to finish drawing draw.on ('drawend', () = > {measureTooltipElement.className =' ol-tooltip ol-tooltip-static'; measureTooltip.setOffset ([0,-7]); feature = null; measureTooltipElement = null) This.createMeasureTooltip (); unByKey (listener);}); / / format length 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 +'+ 'return output;;} return output;}; this.createHelpTooltip () this.createMeasureTooltip () map.addLayer (layer) this.drawLayers.push (layer) map.addInteraction (draw) }, / / Undraw cancal () {for (let I = 0; I < this.drawLayers.length; iTunes +) {map.removeLayer (this.drawLayers [I])} for (let I = 0; I < this.drawElements.length) MapMouseMove +) {map.removeOverlay (this.drawElements [I])} this.drawLayers = [] this.drawElements = [] map.removeInteraction (draw) unByKey (mapMouseMove);}, createMeasureTooltip () {if (measureTooltipElement) {featureTooltipElement.removeChild (measureTooltipElement);} measureTooltipElement = document.createElement ('div') MeasureTooltipElement.className = 'ol-tooltip ol-tooltip-measure'; measureTooltip = new Overlay ({element: measureTooltipElement, offset: [0,-15], positioning:' bottom-center', stopEvent: false, insertFirst: false,}); this.drawElements.push (measureTooltip) map.addOverlay (measureTooltip) }, createHelpTooltip () {if (helpTooltipElement) {helpTooltipElement [XSS _ clean] .removeChild (helpTooltipElement);} helpTooltipElement = document.createElement ('div'); helpTooltipElement.className =' ol-tooltip hidden'; helpTooltip = new Overlay ({element: helpTooltipElement, offset: [15,0], positioning: 'center-left',}) Map.addOverlay (helpTooltip);},},}; .home {width: 100%; height: 100%; background-color: aliceblue; position: relative;} # map {height: 100%; width: 100%;} .set {position: absolute; top: 0px; right: 0px; z-index: 99;} .btn {margin: 10px } / deep/.hidden {display: none;} / 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/.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;} so far, I believe you have a better understanding of "how to achieve ranging in Vue+OpenLayer". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.