Vue + Openlayers 基本使用----加载天地图影像

前面学习了一些 Vue 的基本使用，接下来结合 Openlayers 进行 WebGIS 开发的相关内容学习！

使用 Vue CLI 3 创建项目：

vue create vue-openlayers

安装 Openlayers 框架

npm i -S ol

创建组件：Map.vue（加载了在线的天地图影像数据和图层注记数据）

<template>
  <div id="map">
  </div>
</template>

<script>
//导入相关配置信息
import 'ol/css';
import{ Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import { defaults as defaultControls, FullScreen } from "ol/control"
import XYZ from 'ol/source/XYZ';
export default {
  name:"Map",
  data(){
    return {
      map:null
    }
  },
  mounted(){
    this.map = new Map({//1.创建地图对象 new Map()
      target: 'map', //2.绑定 div 元素
      layers:[ //图层数组 layers
        new TileLayer({
          name:'天地图',
          source: new XYZ({
            crossOrigin:'anonymous',
            url:'https://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a'
          })
        }),
        new TileLayer({
          name:'注记',
          source: new XYZ({
            crossOrigin:'anonymous',
            url:'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d6539c1747bf5296bfe35b02151d761a'
          })

        })
      ],
      view: new View({//视图 View
        projection:"EPSG:4326",
        center:[104.07,30.67],
        zoom: 12
      }),
      controls:defaultControls({//默认控件
        zoom:false,
        rotate:false,
        attribution:false,
      }).extend([//添加新控件
        new FullScreen()
      ])
    })
  }
}
</script>

<style>
#map{
  height: 100%;
  width: 100%;
}
</style>

在 App.vue 中挂载该组件

<template>
<div id="app">
 <Map/>
</div>
</template>

<script>
import Map from '@/components/Map'
export default {
  name: 'App',
  components: {
    Map
  }
}
</script>

<style>
*{
  padding:0;
  margin:0;
}
html,body{
  height: 100%;
}
#app {
  height: 100%;
}
</style>

npm run serve 运行：