vue+openlayers(一) 创建项目并加载一个地图

最新推荐文章于 2025-07-06 23:39:56 发布

biubiuyx

最新推荐文章于 2025-07-06 23:39:56 发布

阅读量552

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_52727017/article/details/129310609

本文介绍了如何使用Vue.js框架结合OpenLayers库创建一个前端项目，并展示了一个加载ArcGIS地图的例子。首先，创建Vue项目，删除默认的组件，然后安装OpenLayers库。接着，在MyMap.vue组件中编写代码，尝试加载OSM地图但未成功，因此改用ArcGIS地图进行展示。最后，通过运行项目在浏览器中看到地图成功显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目:

选择配置：我选的vue2

打开创建的项目，删掉helloworld.vue,创建组件MyMap.vue，打开控制台下载ol包

npm i npm install ol -S

完成后package.json文件中查看是否已经添加：

"dependencies": {
    "core-js": "^3.8.3",
    "install": "^0.13.0",
    "npm": "^9.6.0",
    "ol": "^7.2.2",
    "vue": "^2.6.14"
  },

修改App.vue如下：

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

<script>
import MyMap from './components/MyMap.vue'

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

<style>
html,
body {
  width: 100%;
  height: 100%;
}

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