Vue集成openlayers

1.安装ol库

使用cnpm i ol -s命令安装

2.建一个olMap.vue文件夹

<template>
    <div class=‘olMap‘>
        <h2>{{this.name}}</h2>
        <div class=‘map‘  ref=‘rootmap‘></div>
    </div>
</template>

<script>
import ‘ol/ol.css‘
import { Map, View } from ‘ol‘
import mapconfig from ‘../../mapconfig‘

export default {
    name: ‘HomeMap‘,
    data () {
        return {
            name: ‘地图展示‘,
            map: null
        }
    },
    mounted () {
        var mapcontainer = this.$refs.rootmap
        this.map = new Map({
          target: mapcontainer,
          layers: mapconfig.streetmap(),
          view: new View({
            projection: ‘EPSG:4326‘,
            center: [mapconfig.x, mapconfig.y],
            zoom: mapconfig.zoom
          })
        })
    }
}

</script>

<style lang=‘stylus‘>
    .olMap
        width: 100%
        .map
            height: 100%
            .ol-attribution
                display: none
            .ol-zoom
                display: none
</style>    

3.在首页home.vue中使用该olMap组件

<template>
    <div>
      <home-header></home-header>
         <home-swiper></home-swiper>
    <home-content></home-content>
         <home-map></home-map>
     </div>
</template>

<script>
import HomeHeader from ‘./components/Header‘
import HomeSwiper from ‘./components/Swiper‘
import HomeContent from ‘./components/Content‘
import HomeMap from ‘./components/olMap‘

export default {
  name: ‘Home‘,
  components: {
    HomeHeader,
    HomeSwiper,
    HomeContent,
    HomeMap
  }
}
</script>

<style>
</style>

4.使用mapconfig.js文件

import TileLayer from ‘ol/layer/Tile‘
import TileArcGISRest from ‘ol/source/TileArcGISRest‘
import OSM from ‘ol/source/OSM‘
import XYZ from ‘ol/source/XYZ‘

let maptype = 1
//0表示部署的离线瓦片地图,1表示OSM,2表示使用Arcgis在线午夜蓝地图服务
var streetmap=function(){
    var maplayer = null
    switch(maptype){
        case 0:
            maplayer=new TileLayer({
                source: new XYZ({
                    url:‘http://127.0.0.1:7080/streetmap/shenzhen/{z}/{x}/{y}.jpg‘
                })
            })
        break
        case 1:
            maplayer=new TileLayer({
                source: new OSM()
            })
        break
        case 2:
            maplayer=new TileLayer({
                source:new TileArcGISRest({
                    url:‘https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer‘
                })
            })
        break
    }
    return [maplayer]
}

var mapconfig = {
    x: 114.064839,
    y: 22.548857,
    zoom: 15,
    streetmap: streetmap
}

export default mapconfig

5.效果如下

源码地址:https://gitee.com/newGlobe/vueLearn/tree/master/src/pages/

原文地址:https://www.cnblogs.com/gisblog/p/10430258.html

时间: 2025-01-14 13:32:43

Vue集成openlayers的相关文章

vue集成百度UEditor富文本编辑器

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器.那么.如果你有这个需求.希望可以帮助到你 vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下 废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码.地址:http://ueditor.baidu.com/website/ 把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEd

vue安装openlayers,jquery,bootstrap,

安装 安装openlayers安装指定包安装openlayersVUE中的地图import ol from "openlayers";import "openlayers/dist/ol.css"; cnpm install openlayers --save 安装jquery cnpm install jquery --saveimport $ from 'jquery' 安装 bootstrapnpm install bootstrap --save-dev /

springboot+vue集成mavon-editor,开发在线文档知识库

先睹为快,来看下效果: 技术选型 SpringBoot.Spring Security.Oauth2.Vue-element-admin 集成mavon-editor编辑器 安装 mavon-editor npm install mavon-editor --save 引入mavon-editor 后台使用 js文件:index.js // 全局注册 import Vue from 'vue' import mavonEditor from 'mavon-editor' import 'mavo

vue集成ueditor

相关代码见github 1.引入ueditor相关的文件,具体目录见下图如下 我将下载的文件放在static下面,这里专门用来放置相关的静态文件 (在ueditor.config.js需要配置一下路径 var URL = window.UEDITOR_HOME_URL || '/static/ueditor_1/')根据自己的文件路径各自处理 2.新建一个Ueditor.vue组件对象,该组件用来封装ueditor,用来进行复用. <template> <div> <!--下

HT Vue 集成

(本文中 dataModel = dm = 数据容器, gv = graphView = g2d = 2D 视图) 初始化项目 使用 vue-cli 生成项目.生成注意以下几个问题 1. 建议手动配置 Manually select features 2. 勾选 Router 3. 配置设置 Indedicated config files 4. 项目初始化完成后增加 vue.config.js 并配置 module.exports = { devServer: { port: 12580 }

前端web页面通过VUE集成H5直播、点播播放器LivePlayer

基于VUE和webpck的前端工程 这里可以参考 https://github.com/livegbs/GB28181-Server 1.安装@liveqing/liveplayer npm -i @liveqing/liveplayer --save-dev 2.webpack.config.js 添加配置 这里是配置webpack自动copy,当然也可以手动复制到待发布的web目录,如www .... const CopyWebpackPlugin = require('copy-webpa

vue 集成 element ui

打开vue项目所在的项目路径 输入 npm install element-ui -S 安装element ui 表示安装成功 在vue项目下的node_modules下会显示 element ui 配置element ui 改变项目目录中的main.js文件: 初始main.js文件: import Vue from 'vue'import App from './App'import router from './router'import ElementUI from 'element-u

vue 集成百度富文本编辑器

<template> <div> <textarea style="display:none" id="editor_content" name="contentHtml"></textarea> <script id="editor" type="text/plain"></script> </div></templ

Simditor学习--vuejs集成simditor

唠叨 因为项目需要我自己研究了和集成在vue方便以后再使用,详情官方文档在这里.希望大家有好的建议提出让我继续改进. simditor介绍 Simditor 是团队协作工具 Tower 使用的富文本编辑器,基于jQuery开发. 相比传统的编辑器它的特点是: 功能精简,加载快速 输出格式化的标准 HTML 每一个功能都有非常优秀的使用体验 兼容的浏览器:IE10+.Chrome.Firefox.Safari. Vue集成 下载: 点击这里下载的压缩文件.你也可以通过bower或者npm安装sim