Shulou(Shulou.com)06/02 Report--

This article is about how vue uses openlayers to load the map of heaven and earth and Amap. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Part 1. Install openlayersnpm I-save ol in vue

The vue mentioned here is based on scaffolding. Create a new page, the vue file, and configure the routing. Then you can put it directly into my code to run the display.

Sky map import "ol/ol.css"; import {Tile as TileLayer} from "ol/layer"; import XYZ from "ol/source/XYZ"; import {defaults as defaultControls} from "ol/control"; import Map from "ol/Map.js"; import View from "ol/View.js"; export default {data () {return {map: null, parser: null,};}, mounted () {this.initMap () }, methods: {initMap () {const map = new Map ({target: "olMap", view: new View ({center: [0,0], / / center point longitude and latitude zoom: 4, / / layer zoom size projection: "EPSG:4326",}), controls: defaultControls ({zoom: true Attribution: false, rotate: false,}),}) This.map = map; / / add a map let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}"; url = `${url} & const source vectorclocktk = replace your key`; const source = new XYZ ({url: url, projection:" EPSG:4326 ",}) Const tdtLayer = new TileLayer ({source: source,}); this.map.addLayer (tdtLayer); / / add a note url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}"; url = `${url} & replace your key` Const sourceCVA = new XYZ ({url: url, projection: "EPSG:4326",}); const tdtcvaLayer = new TileLayer ({source: sourceCVA,}); this.map.addLayer (tdtcvaLayer);},}; .map {width: 100%; height: 100vh;}

The sky map can be displayed.

Effect picture:

Second, Amap part

Compared with the sky map, Amap is much easier, directly on the code

Amap import {Map,View,Feature} from 'ol'import * as olProj from' ol/proj'import {Point} from 'ol/geom'import {Style, Fill, Stroke, Circle as sCircle} from "ol/style" / / add layers import Tilelayer from 'ol/layer/Tile'import {Vector as VectorLayer} from' ol/layer'import {XYZ,Vector as VectorSource} from 'ol/source'// into the style file import "ol/ol.css" export default {data () {return {map:null}}, mounted () {this.init (); this.setMarker () }, methods: {init () {this.map=new Map ({target:'map', layers: [new Tilelayer ({source: new XYZ ({url:' https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',})})] View:new View ({/ / use Xi'an as the center of the map / / olProj.fromLonLat method to convert latitude and longitude into corresponding coordinates center:olProj.fromLonLat ([108.945951, 34.465262]), zoom:2}),})} SetMarker () {let _ style = new Style ({image:new sCircle ({radius:10, stroke:new Stroke ({color: "# fff",}), fill: new Fill ({color:'#3399CC',}) ),}) Let _ feature = new Feature ({geometry:new Point (olProj.fromLonLat ([108.945951, 34.465262])),}); _ feature.setStyle (_ style); let _ marker = new VectorLayer ({source: new VectorSource ({feature: [_ feature],}),}); this.map.addLayer (_ marker) },},} # map {/ * screen width * / width: 100vW; height: 100vh;} Thank you for reading! This is the end of the article on "how vue uses openlayers to load the map of heaven and earth and Amap". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.