1、vue脚手架环境搭建成功后，执行cnpm i -S ol 安装ol环境，执行成功后node_modules下会有ol文件夹。
2、新建ol组件并引入ol脚本。
import "../../node_modules/ol/ol.css";
import { get as getProjection } from "../../node_modules/ol/proj";
import { getWidth, getTopLeft } from "../../node_modules/ol/extent";
import View from "../../node_modules/ol/View";
import Map from "../../node_modules/ol/Map";
import TileLayer from "../../node_modules/ol/layer/Tile";
import WMTS from "../../node_modules/ol/source/WMTS";
import WMTSTileGrid from "../../node_modules/ol/tilegrid/WMTS";
import VectorSource from "../../node_modules/ol/source/Vector";
import VectorLayer from "../../node_modules/ol/layer/Vector";
import Feature from "../../node_modules/ol/Feature";
import Point from "../../node_modules/ol/geom/Point";
import olStyle from "../../node_modules/ol/style/Style";
import olstyleIcon from "../../node_modules/ol/style/Icon";
import olstyleText from "../../node_modules/ol/style/Text";
import olstyleFill from "../../node_modules/ol/style/Fill";
import olstyleStroke from "../../node_modules/ol/style/Stroke";
import { defaults as defaultControls } from "../../node_modules/ol/control";
import MousePosition from "../../node_modules/ol/control/MousePosition";
import { createStringXY } from "../../node_modules/ol/coordinate";
3、初始化加载天地图
var mapcontainer = this.$refs.rootmap;
//渲染地图
var projection = getProjection("EPSG:4326");
var projectionExtent = projection.getExtent();
var size = getWidth(projectionExtent) / 256;
var resolutions = new Array(18);
var matrixIds = new Array(18);
for (var z = 1; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
this.map = new Map({
target: "vecmap",
layers: [
new TileLayer({
source: new WMTS({
name: "中国矢量1-14级",
url:
"http://t{0-6}.tianditu.com/vec_c/wmts?tk=",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
style: "default",
projection: "EPSG:4326",
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
}),
new TileLayer({
source: new WMTS({
name: "中国矢量注记1-14级",
url:
"http://t{0-6}.tianditu.com/cva_c/wmts?tk=",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
style: "default",
projection: "EPSG:4326",
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
})
})
})
],
view: new View({
projection: "EPSG:4326", //使用这个坐标系
center: [118.236, 28.365],
zoom: 3,
maxZoom: 19,
minZoom: 1
})
});
}
4、效果图
