ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue+openlayers学习:加载天地图

2021-10-19 18:03:43  阅读:493  来源: 互联网

标签:map vue 依赖 url ol openlayers import 加载


vue+openlayers学习:加载天地图

笔者本人是纯新手,学习的过程记录一下,也可以给像我一样学习openlayers的同学一些思路,欢迎各位大佬前来指正

创建项目

在创建项目之前,需安装node js和vue-cli,可以直接百度,上面介绍的安装很细

1.创建webpack

推荐使用vscode

  1. 打开vscode,然后【文件】>【打开文件夹】打开需要创建项目的文件夹
  2. 打开【终端】,在终端输入界面里面输入:vue init webpack 项目名称在安装时,他会问你几个问题,推荐这样来
Use ESLint to lint your code?    No
Set up unit tests ?       No
Setup e2e tests with Nightwatch?       No
Should we run npm install for you after the project has been created?      //选择npm
其他部分可以默认设置

等终端运行完成,项目就创建好了,项目大概如下所示
在这里插入图片描述

2.安装openlayers的依赖

何为依赖,依赖就是你写项目是引用的javascript,css等,也就是运行所需要的包,可以说是运行环境

我们上一步创建的项目,相当于重新创建了一个文件夹,后续操作都是在这个文件夹里面进行,所以,需要打开项目文件夹,怎么打开,这样来

在终端输入:
cd 你创建的项目的名称

OK,可以开始安装依赖了

npm install ol  //安装openlayers的依赖

安装的依赖安装在哪了?,在这:
在这里插入图片描述
ps:成功的同学可以不用看这个
在有些时候,我们安装的依赖不是我们想要的,就很烦,遇到这样的情况,可以这样装:

  1. 打开package.json,找到这个
    在这里插入图片描述

  2. 在npm的官网(https://www.npmjs.com)找到我们要的依赖,看清望准依赖的版本号
    ‘~’(波浪符号):更新到当前中间位数字中最新的版本;
    ‘^’(插入符号):更新到当前第一位数字中最新的版本。

  3. 按`“依赖名称”:"版本号"格式输入

  4. 在终端里面输入npm install安装依赖

写代码

此时,你的准备工作已经全部完成,进入写代码阶段。首先在components中创建一个vue文件,我的命名为map, 要找不到components的话,这玩意在src文件夹中。

<template>
  <div class="map"
       id="olMap">
  </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: [经度,纬度],//中心点经纬度
          zoom: 11,//图层缩放大小
          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=去天地图申请一个key`
      const sourceCVA = new XYZ({
        url: url,
        projection: 'EPSG:4326'
      })
      const tdtcvaLayer = new TileLayer({
        source: sourceCVA
      })
      this.map.addLayer(tdtcvaLayer)
    }
  }

}
</script>

<style lang="less" scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>

更改App.vue

更改一下App.vue的代码,可以自己对照着看看

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

<script>
import map from './components/map'

export default {
  name: 'App',
  components: {
    map
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行

在终端里面,,输入npm run dev运行结束,会出来

 App running at:
  - Local:   http://localhost:8080
  - Network: http://10.10.21.46:8080

直接把按ctrl点击网址就可以看到你的地图
在这里插入图片描述
后续不间断更新------

标签:map,vue,依赖,url,ol,openlayers,import,加载
来源: https://blog.csdn.net/p1758133202/article/details/120849192

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有