vue中使用OpenLayers

（一）安装

1. cnpm i -s ol

（二）地图组件

 

 

 1 <template>
 2     <div id="map" ref="map"></div>
 3 </template>
 4 
 5 <script>
 6 import "ol/ol.css";
 7 import TileLayer from "ol/layer/Tile";
 8 import OSM from "ol/source/OSM";
 9 import { Map, View } from "ol";
10 
11 export default {
12     data() {
13         return {
14             map: null, 
15         };
16     },
17     created() {},
18     mounted() {
19         this.initMap();
20     },
21     methods: {
22         // 初始化地图
23         initMap() {
24             this.map = new Map({
25                 target: "map", // 指向对象
26                 layers: [
27                     // 图层
28                     new TileLayer({
29                         // 这里定义的是平铺图层
30                         source: new OSM(),
31                     }),
32                 ],
33                 view: new View({
34                     projection: "EPSG:4326",
35                     center: [118.792207, 32.133476],
36                     zoom: 5,
37 
38                 }),
39             });
40         },
41     },
42 };
43 </script>
44 
45 <style lang="less" scoped>
46 #map {
47     width: 1000px;
48     height: 600px;
49 }
50 </style>

 

posted @ 2021-07-27 21:56  xiao前端  阅读(2668)  评论(1)    收藏  举报