这篇文章给大家分享的是有关vue如何利用openlayers加载天地图和高德地图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
npm i --save ol
这里说的vue
是基于脚手架构建的。 新建个页面,也就是vue
文件,配置好路由。接着就是可以直接放入我的代码运行显示了。
<template> <div class="wrapper"> <div>天地图</div> <div class="map" id="olMap"></div> </div> </template> <script> 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], //中心点经纬度 zoom: 4, //图层缩放大小 projection: "EPSG:4326", }), controls: defaultControls({ zoom: true, attribution: false, rotate: false, }), }); this.map = map; // 添加地图 let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}"; url = `${ url}&T=vec_c&tk=替代你的key`; const source = new XYZ({ url: url, projection: "EPSG:4326", }); const tdtLayer = new TileLayer({ source: source, }); this.map.addLayer(tdtLayer); // 添加注记 url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}"; url = `${ url}&T=cva_c&tk=替代你的key`; const sourceCVA = new XYZ({ url: url, projection: "EPSG:4326", }); const tdtcvaLayer = new TileLayer({ source: sourceCVA, }); this.map.addLayer(tdtcvaLayer); }, }, }; </script> <style scoped> .map { width: 100%; height: 100vh; } </style>
天地图就可以显示出来了。
效果图:
相对于天地图,高德地图就容易多了,直接上代码
<template> <div class="wrapper"> <div>高德地图</div> <div id="map"></div> </div> </template> <script> 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"; // 添加图层 import Tilelayer from 'ol/layer/Tile' import { Vector as VectorLayer} from 'ol/layer' import { XYZ,Vector as VectorSource} from 'ol/source' //引入样式文件 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({ // 将西安作为地图中心 // olProj.fromLonLat方法将经纬度转换成对应的坐标 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); }, }, } </script> <style scoped> #map{ /* 屏幕宽高 */ width: 100vw; height: 100vh; } </style>
感谢各位的阅读!关于“vue如何利用openlayers加载天地图和高德地图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。