vue openlayer 使用 谷歌地图 图层

vue openlayer 使用 谷歌地图 图层

首先呢，openlayer地图使用的时候有一个默认的地图样式，就是下面这个样子的呢！

但是呢，有些人不是很喜欢这些东西的呢，比如想换成谷歌的图层，其实很简单，就是下面的代码。

相关类库：

  import 'ol/ol.css';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import XYZ from 'ol/source/XYZ';

  import Draw from 'ol/interaction/Draw';
  import Overlay from 'ol/Overlay';
  import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style';
  import { OSM, Vector as VectorSource } from 'ol/source';
  import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';
  import Feature from 'ol/Feature';
  import { Point, MultiLineString, LineString, Polygon} from "ol/geom";
  import { fromLonLat } from 'ol/proj';

主要代码：

        //谷歌地图
        var googleMapLayer = new TileLayer({
          source: new XYZ({
            url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0'
          })
        });

        map = new Map({
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: 'map',
          view: new View({
            center: [116.403218, 39.92372],
            zoom: 12,
            maxZoom: 18,
            projection: 'EPSG:4326',
            constrainResolution: true,  // 设置缩放级别为整数 
            smoothResolutionConstraint: false,  // 关闭无级缩放地图
          }),
        });

        map.addLayer(googleMapLayer)

但是！ 主要各位宝子们！有一个问题需要解决，那就是这个谷歌地图需要访问 www.google.cn 这个网址，大家都知道的哈，国内访问不了，所以说有两种方式实现这个功能。

方式一： FQ访问。
方式二：自己下载google地图的图层，发布geoserve然后自己引入。

解决了访问不了的问题，就可以正常显示了！