ol xyz 加载天地图_vue中利用openlayers加载天地图

首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完openlayers依赖包后，在main.js里面引入，

import ol from ‘openlayers;

然后设置成全局属性

Vue.prototype.$ol=ol;

使用ol时，只需要使用this.$ol就可以了。

下面来说使用ol加载天地图

首先定义一个装载地图的容器，使用id进行标识，其他标识方式也可以试试

然后在方法里写入

var ol = this.$ol;

// var $ = this.$jq;

var l1 = new ol.layer.Tile({

source: new ol.source.XYZ({

url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}"// 注记

})

});

var l2 = new ol.layer.Tile({

source: new ol.source.XYZ({

url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}" // 行政区划

})

});

var map = new ol