vue中利用openlayers加载天地图

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

import ol from ‘openlayers;

然后设置成全局属性

Vue.prototype.$ol=ol;

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

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

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

<div id=’map’>

</div>

然后在方法里写入

   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.Map({
            target: 'map',
            view: new ol.View({
              center: ol.proj.fromLonLat([108.532, 34.145]),
              zoom:5,
              // minZoom: 5
            }),
            controls: [

            ]

          });
          map.addLayer(l1);
          map.addLayer(l2);

直接新建两个图层l1  天地图的注记图层，l2天地图的行政区划图层， 区别就是source不同

然后建立map，target就是那个地图容器，view是视图，center设置中心点坐标，zoom为缩放级别，minZoom最小缩放级别。

controls:我给设置为空，不然就会出现ol底下的那个logo.

最后，用addLayer方法将l1、l2两个图层加入到map中。

另天地图有以下几种地图服

 天地图还有多种服务类型

可见http://www.cnblogs.com/jcwn888/p/7943898.html

转载自：https://blog.csdn.net/xuerwang/article/details/82769871