vue+openlayers学习

使用最新的vue-cli3.x
1、安装vue-cli3.0.1: https://cli.vuejs.org/guide/installation.html

cnpm install -g @vue/cli

vue -V 查看版本
2、新建项目 vue create vue-openlayers,并选择default模版

image.png

3、运行

cd vue-openlayers
npm run serve

4、用vscode打开项目，打开终端，安装openlayers
openlayers官网：http://openlayers.org

cnpm i -S ol

删除掉HelloWorld.vue
新建 olmap.vue组件 （vscode编辑器下可以安装vetur和 vue vscode snippets两插件方便代码提示及写vue代码-vbase命令）
components/olmap.vue

App.vue

5、运行 npm run serve

image.png

6、将一些信息放置到配置文件中,src目录下新建config文件夹，建mapconfig.js
src/config/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=2          //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

src/components/olmap.vue作相应的更改