在Vue中使用OpenLayers 0x0 项目初始化

使用环境

npm install -g @vue/cli

项目初始化

vue init webpack ol-vue

安装依赖

npm i ol -save

初体验

<template>
    <div id="map"class="map"></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'
import {get as getProjection} from 'ol/proj';
export default {
    name: 'Map',
    data () {
        return {
            map:null,
            view:null
        }
    },
    mounted(){
        var projection = getProjection('EPSG:4326');
        this.map = new olMap({
            target:'map',
            layers:[
                new ollayerTile({
                    source:new olsourceOSM()
                })
            ],
            view:new olView({
                center: [108,30],
                projection: projection,
                zoom:5
            })
        });
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .map {
        height: 800px;
    }
</style>