vue+openlayers 环境搭建（二）

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、效果图