Vue+OpenLayer 创建地图并添加天地图资源

• 首先创建一个放值地图的容器

  <div id="olmap" ref="olmap"></div>

• 新建地图（Map对象）

 this.map = new Map({target: "olmap",view: new View({projection: this.projection,center: this.center, //视图中心点zoom: 14 //缩放级别}),layers: []});

1. target：绑定地图容器
2. view：地图视图
3. projection：地图坐标信息（如：EPSG:4544)
4. center: 地图中心点
5. zoom:缩放等级
6. layer:地图中的图层（可通过 `addLayer()` 后续添加）

• 添加天地图资源

 var TiandiMap_img = MapStatic.AddTileLayer("http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" +"你的key","天地图影像图层","EPSG:3857",false,"天地图影像图层");this.map.addLayer(TiandiMap_img);var TiandiMap_cva = MapStatic.AddTileLayer("http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" +"你的key","天地图矢量注记图层","EPSG:3857",true,"天地图矢量注记图层");this.map.addLayer(TiandiMap_cva);var TiandiMap_cia = MapStatic.AddTileLayer("http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" +"你的key","天地图影像注记图层","EPSG:3857",true,"天地图影像注记图层");this.map.addLayer(TiandiMap_cia);var TiandiMap_cta = MapStatic.AddTileLayer("http://t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=" +"你的key","天地图地形注记图层","EPSG:3857",false,"天地图地形注记图层");this.map.addLayer(TiandiMap_cta);

  注：MapStatic.AddTitleLayer()方法：

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

  //Tiles(地图,地址,图层名称,坐标,是否可见,标题)AddTileLayer: function (url, layerName, prj, visible, title) {//新建一个切片图层var layer = new TileLayer({//设置标题title: title,source: new XYZ({url: url,projection: prj,wrapX: true,}),//设置图层名称name: layerName,//设置是否可见visible: visible});return layer;},

• 结果:

QQ群（GIS开发交流、数据共享、软件使用）：993836992