< template> < divclass = " mapBox" > < divref = " map" id = " map" class = " map" > </ div> < divid = " popup" class = " ol-popup" > < ahref = " #" id = " popup-closer" class = " ol-popup-closer" > </ a> < divid = " popup-content" > </ div> </ div> < divv-if = " false" class = " optionsBox" > < el-dropdown@command = " handleGisCommand" > < el-buttontype = " primary" > < iclass = " el-icon-arrow-down el-icon--right" > </ i> </ el-button> < el-dropdown-menuslot = " dropdown" > < el-dropdown-itemcommand = " 1" > </ el-dropdown-item> < el-dropdown-itemcommand = " 2" > </ el-dropdown-item> < el-dropdown-itemcommand = " 3" > </ el-dropdown-item> < el-dropdown-itemcommand = " 4" > </ el-dropdown-item> </ el-dropdown-menu> </ el-dropdown> < el-radio-groupv-model = " checkUnderLayer" @change = " handleUnderLayerChange" > < el-radio-buttonlabel = " sldt" > </ el-radio-button> < el-radio-buttonlabel = " wxdt" > </ el-radio-button> </ el-radio-group> < el-checkbox-groupv-model = " checkLayers" @change = " handleLayerChange" > < el-checkbox-buttonlabel = " zjc" > </ el-checkbox-button> < el-checkbox-buttonlabel = " xzqh" > </ el-checkbox-button> </ el-checkbox-group> < el-buttontype = " primary" @click = " handleFullScreen" > </ el-button> < el-buttontype = " primary" @click = " handleBackCenter" > </ el-button> < el-buttontype = " primary" @click = " handleTrackStart" > </ el-button> < el-buttontype = " 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> < stylelang = " 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> < stylelang = " 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> 
