Vue中使用OpenLayers【一】

• 安装

npm i -s ol

• 地图组件
• 

• <template>
      <div id="map" ref="map"></div>
  </template>
  
  <script>
  import "ol/ol.css";
  import TileLayer from "ol/layer/Tile";
  import OSM from "ol/source/OSM";
  import { Map, View } from "ol";
  
  export default {
      data() {
          return {
              map: null, 
          };
      },
      created() {},
      mounted() {
          this.initMap();
      },
      methods: {
          // 初始化地图
          initMap() {
              this.map = new Map({
                  target: "map", // 指向对象
                  layers: [
                      // 图层
                      new TileLayer({
                      // 这里定义的是平铺图层
                          source: new OSM(),
                      }),
                  ],
                  view: new View({
                      projection: "EPSG:4326",
                      center: [118.792207, 32.133476],
                      zoom: 5,
                  }),
              });
          },
      },
  };
  </script>
  
  <style lang="less" scoped>
  #map {
      width: 1000px;
      height: 600px;
  }
  </style>