vue openlayer 使用 谷歌地图 图层

2023-10-25 17:40

本文主要是介绍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然后自己引入。

解决了访问不了的问题,就可以正常显示了!

在这里插入图片描述

这篇关于vue openlayer 使用 谷歌地图 图层的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/284153

相关文章

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

CSS引入方式和选择符的讲解和运用小结

《CSS引入方式和选择符的讲解和运用小结》CSS即层叠样式表,是一种用于描述网页文档(如HTML或XML)外观和格式的样式表语言,它主要用于将网页内容的呈现(外观)和结构(内容)分离,从而实现... 目录一、前言二、css 是什么三、CSS 引入方式1、行内样式2、内部样式表3、链入外部样式表四、CSS 选

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Python文件操作与IO流的使用方式

《Python文件操作与IO流的使用方式》:本文主要介绍Python文件操作与IO流的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python文件操作基础1. 打开文件2. 关闭文件二、文件读写操作1.www.chinasem.cn 读取文件2. 写

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤:代码片段:2. 应用 JSON 样式到

java变量内存中存储的使用方式

《java变量内存中存储的使用方式》:本文主要介绍java变量内存中存储的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、变量的定义3、 变量的类型4、 变量的作用域5、 内存中的存储方式总结1、介绍在 Java 中,变量是用于存储程序中数据

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增