vue openlayer 使用谷歌地图图层

原创

粘你一身大鼻嘎 2022-06-26 00:14:59 博主文章分类：Openlayers ©著作权

文章标签 图层谷歌地图 git 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者粘你一身大鼻嘎的原创作品，请联系作者获取转载授权，否则将追究法律责任

vue openlayer 使用谷歌地图图层

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

vue 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)