OpenLayers整合至Vue

最新推荐文章于 2024-04-01 09:00:07 发布

DiracHome

最新推荐文章于 2024-04-01 09:00:07 发布

阅读量1k

点赞数

分类专栏： OpenLayer 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/DiracHome/article/details/105968231

版权

OpenLayer 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

这篇记录如何将js的OpenLayers整合到Vue中

js代码

<!Doctype html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="../v6.3.1-dist/ol.css">
    <script src="../v6.3.1-dist/ol.js" charset="utf-8"></script>
<style>
    * {padding: 0;margin: 0;}
    body,html {
        width: 100%;
        height: 100%;
    }
    #map {
        height: 80%;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="map"></div>
    <script>
      new ol.Map({
            layers: [
              new ol.layer.Tile({source: new ol.source.OSM()})
            ],
            view: new ol.View({
              center: [0, 0],
              zoom: 2 
            }),
            target: 'map'    
        });
    </script>
</body>
</html>

我们开始

1.创建一个vue项目

vue create 项目名 //脚手架3创建方式

2.下载依赖

npm install ol //或者 yarn add ol

3.直接在App.vue中操作，或者新建一个vue文件操作

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

<script>
import 'ol/ol.css'
import OlMap from 'ol/Map'
import OlView from 'ol/View'
import OllayerTile from 'ol/layer/Tile'
import OlsourceOSM from 'ol/source/OSM'
export default {
    name: 'box',
    data () {
        return {
            map:null,
        }
    },
    mounted(){
      this.map = new OlMap({
            layers: [new OllayerTile({source: new OlsourceOSM()})],
            view: new OlView({
              center: [0, 0], 
              zoom: 2  
             }),
            target: 'map'    
        });
		
    }
}
</script>

<style >
*{padding: 0;margin: 0;}
html,body,.box{
  width: 100%;
  height: 100%;
}
.map {
    height: 80%;
}
</style>

template写html结构，script写js代码，style写样式。这是最基本的如果这都不知道建议去学习vue

总结一下vue和js重要的区别

1.对象引入方式的区别

js直接两行代码全部引入，而vue需要一个对象一个对象引入

js中 new 一个 ol对象 ,在Vue中就要先引入对象，再new

比如说

new ol.Map()

在vue中需要先

import OlMap from 'ol/Map'

然后再

this.map = new OlMap()

当然，map在data中定义好了，如果赋值的对象不想在data中定义，就要let一个对象，然后new一个东西给他

2.vue组件化

可以在外部定义vue文件，然后引入，在vue对象中的template中激活，然后直接当标签用，例如

<template>
    <div>
    	<Olmap/>
    </div>
</template>
<script>
import Olmap from './map'
//map.vue先写好一个地图
export default {
  components: {
    Olmap
  },
}
</script>
//别忘了给Olmap留区域

补充：

1.eslint报错

如果你的项目使用了eslint，并且频频报错，建议看看如下报错原因

1.代码不能有分号，将所有分号删除

2.字符串不能用双引号，将双引号替换为单引号

3.行内逗号后要有空格，变量赋值等号后要有空格，行内大括号一前一后要有空格

4.new一个对象，对象名必须大写！！

还有别的固定的格式，具体看报错，百度翻译一下就可以了

2.如何引入ol对象

来来来，官方文档看一看啊

在这里插入图片描述

链接：https://openlayers.org/en/latest/apidoc/

有事没事翻翻文档

大体就是这样，细节部分自己修改哦
有一说一，小eslint怡情，大eslint伤身。。。

DiracHome

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers整合至Vue

这篇记录如何将js的OpenLayers整合到Vue中js代码<!Doctype html><head> <title>OpenLayers</title> <link rel="stylesheet" href="../v6.3.1-dist/ol.css"> <script src="../v6.3...
复制链接

扫一扫