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 这个网址，大家都知道的哈，国内访问不了，所以说有两种方式实现这个功能。

方式一： 科学上网。
方式二：自己下载google地图的图层，发布geoserve然后自己引入。

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