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

原创

已于 2022-05-05 10:24:09 修改 · 2.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

于 2022-05-04 22:06:09 首次发布

本文介绍了如何使用VueCLI3创建项目，并结合Openlayers框架进行WebGIS开发。通过创建Map.vue组件，加载天地图的影像和注记数据，设置视图及控件，实现了地图的展示。在App.vue中挂载组件并运行，成功展示了地图应用。

前面学习了一些 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=d6539c1747bf5296bfe35