1、安装openlayer模块

npm install ol

2、修改App.vue

3、修改router/index.js

4、添加olmap.vue及目录结构（内容在文章末尾）

5、项目发布地址http://www.zgeo.work:8056/#/

6、Git地址 尚未导入到git中

<template>

<div id=“map” ref=“rootmap”>


 

</div>

</template>


 

<script>

import “ol/ol.css”;

import { Map, View } from “ol”;

import TileLayer from “ol/layer/Tile”;

import XYZ from “ol/source/XYZ”;

//import OSM from “ol/source/OSM”;

export default {


data() {


return {


map: null


};


},


created(){


window.console.log(“created”);


},


mounted() {


this.map = new Map({


target: “map”,


layers: [


new TileLayer({


source: new XYZ({


url: “http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=44964a97c8c44e4d04efdf3cba594467”


 


})

}),


new TileLayer({


source: new XYZ({


url: “http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=44964a97c8c44e4d04efdf3cba594467”


 


})

})

],


view: new View({


projection: “EPSG:4326”, //使用这个坐标系


center: [118.08940421351849,30.33594055034778], //深圳


zoom: 12


})

});


}

};

</script>


 

<style>

html,body,#map{height:100%;width:100%; padding:0;


margin:0;}


 

</style>

发表评论

邮箱地址不会被公开。 必填项已用*标注