vue-openlayers中初始地图加载

Vue引入openlayers的命令

npm install ol

template>
  <div id="map" style="width: 100%;height: 100%">

  </div>
</template>

<script>
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import {XYZ} from "ol/source";
import 'ol/ol.css';
import Map from 'ol/Map';
import {defaults} from "ol/control";


export default {
    name: "pointMapInit",
    data(){
        return{
            layer:{//地图底图
                tiandituVecLayer:'',
                tiandituImgLayer:'',
                tiandituCvaLayer:''
            },
            map:null,//地图
        }
    },
    mounted() {
        this.mapInit();
    },
    created() {
    },
    methods:{
        //初始加载地图
        mapInit(){
            let that = this;
            //普通地图
            that.layer.tiandituVecLayer = new TileLayer({
                title: 'generalMap',
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
                    crossOrigin: 'anonymous'
                }),
                visible:false
            });
            // 卫星影像图层
            that.layer.tiandituImgLayer = new TileLayer({
                title:'yx',
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=fea556436d51919f4a429933897be3c1',
                    crossOrigin: 'anonymous',
                }),
                visible:true
            });
            //普通地图标记
            that.layer.tiandituCvaLayer = new TileLayer({
                title: 'generalMapZj',
                source: new XYZ({
                    url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=daafafd5b7bb42922f10e3d1c06df824',
                    crossOrigin: 'anonymous'
                }),
                visible: true
            });
            this.map = new Map({
                target: 'map',
                // interactions: defaultInteractions().extend([modify]),
                overlays: [that.overlay],
                layers: [
                    that.layer.tiandituImgLayer,
                    that.layer.tiandituVecLayer,
                    that.layer.tiandituCvaLayer
                ],
                view: new View({
                    // projection: 'EPSG:4326',
                    // center: [120.4750, 31.6337],
                    center:[13410926.774433982,3715530.4937355495],
                    zoom: 12,
                }),
                controls: defaults({
                    zoom:true,
                    attributionOptions: {
                        collapsible: false
                    }
                })
            });
            this.$root._olMap = this.map;
        },
    },
}
</script>

<style scoped>

</style>