在OpenLayers合法显示谷歌地图图层？
OpenLayers是一个基于JavaScript的开源地图可视化库，可以用于创建交互式的地图应用程序。要在OpenLayers中合法显示谷歌地图图层，您需要确保您有权访问谷歌地图API。
首先，您需要安装OpenLayers库。可以使用以下命令在终端中安装OpenLayers：
npm install openlayers接下来，您需要引入OpenLayers库，并加载谷歌地图API：
var ol = require('openlayers');
var google = require('googleapis');
var maps = google.maps;
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Google({
name: 'Google Maps',
type: 'RoadMap',
source: new ol.source.GoogleMaps({
key: 'YOUR_API_KEY',
v: '3.17',
cluster: true,
styles: [
{
geometry: 'point',
style: 'default',
maxZoom: 12
}
]
})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([120.977728, 24.803321]), //设定地图中心点位置
zoom: 8 //设定地图缩放层级
})
});在上面的程式码中，我们使用Google Maps API来创建一个地图。首先，我们导入Google Maps API和Google Maps JavaScript API。接着，我们创建一个新的OpenLayers地图，并添加一个Google地图图层。最后，我们设定地图的初始位置和缩放层级。
请注意，您需要替换程式码中的YOUR_API_KEY为实际的Google Maps API密钥。另外，请确保您有权使用Google Maps API，否则可能会违反Google的服务条款。
相关·内容
1回答
基于OpenLayers构建自定义库
javascript、openlayers
我正在尝试使用OpenLayers构建我的个人gis库，这是我第一次这样做。
通常，我使用以下代码构建一个简单的映射：
var map = new ol.Map({
target: 'map'
});
var view = new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
});
map.setView(view);
var osm = new ol.layer.Tile({
source: new ol.source.OSM()
});
map.addLayer(osm);
现
浏览 3提问于2020-10-18得票数 1
回答已采纳
1回答
如何将标记添加到Open Layer Map？
openlayers
我想要显示地图到我的网站使用OpenStreetMap使用库开放图层。当我想要添加标记时，我想添加一个标记，但该标记没有显示在地图上。 我已经在谷歌上搜索过了，我找到了一个代码，如下所示。有很多例子来添加标记，但它的谷歌地图占主导地位，我想使用开源地图 <!doctype html>
<html lang="en">
<head>
<link rel="stylesheet"
href="https://cdn.rawgit.com/openlayers/openlayers.githu
浏览 13提问于2019-04-22得票数 4
2回答
无法在OpenLayers中获得正确的圆半径
openlayers、openlayers-6
我在下面的jsfiddle中尝试创建一个半径为1600米的圆。我不认为我的投影是正确的，因为这个圆肯定小于1600米。在谷歌地图上测量，我认为它大约是1000米。我需要做什么来纠正这个please> 谢谢。 var centerLongitudeLatitude = ol.proj.fromLonLat([-1.733014, 51.982989]);
var layer = new ol.layer.Vector({
source: new ol.source.Vector({
projection: 'EPSG:4326',
features
浏览 144提问于2020-03-31得票数 0
回答已采纳
1回答
如何使用OpenLayers 4.6.4向OSM地图添加图标/标记
openlayers、openstreetmap、markers
我想知道是否有人能给我指出正确的方向。我正在尝试使用OpenLayers 4.6.4向OSM地图添加多个标记/图标。
下面的代码渲染地图时没有任何问题：
<script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
<script type='text/javascript'>
var map = new ol.Map({
target: 'mapdiv',
浏览 21提问于2018-02-21得票数 3
回答已采纳
1回答
OpenLayers -基于多个多边形设置中心和缩放
javascript、openlayers
我使用的是openlayers 6.5，我想要设置地图的中心，以适应绘制的所有多边形。
这就是我所拥有的：
/*** Set the map ***/
var map = new ol.Map({
target: map_element,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([
浏览 41提问于2021-02-23得票数 0
回答已采纳
2回答
在openlayers3 javascript中获取地图上的特性信息
javascript、openlayers、openlayers-3、geoserver、gwt-openlayers
在示例的帮助下，我正在试图获取地图上的功能信息，单击使用openlayers 3 javascript
var mmi = new ol.layer.Tile({
source: new ol.source.OSM()
});
var one = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://localhost:8080/geoserver/wms',
params: {'LAYERS':
浏览 4提问于2018-05-03得票数 1
1回答
OpenLayers中纬度和经度的动态变化
javascript、dom-events、openlayers、angular-openlayers、gwt-openlayers
我试图使用下面的代码在OpenLayers地图上指出我的地址：
var rome = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
});
rome.setStyle(new ol.style.Style({
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
color: '#8959A8',
crossOrigin: 'anony
浏览 9提问于2017-08-22得票数 0
回答已采纳
1回答
使用多个标记居中和缩小视图
openlayers-6
我已经创建了一个地图，其中添加了多个标记：
function add_map_point(lat, lon) {
let vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [new ol.Feature({
geometry: new ol.geom.Point(ol.proj.transform([parseFloat(lat), parseFloat(lon)], 'EPSG:4326', '
浏览 14提问于2021-06-11得票数 0
回答已采纳
1回答
通过地图缩放更改图标大小
openlayers、openlayers-5
我使用一个图标20x20PXL来显示在地图上，代码如下： 当我缩放地图时，图标看起来很小，如何通过地图缩放来更改图标大小？ <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.6.5/build/ol.js" type="text/javascript"></scrip
浏览 88提问于2019-07-01得票数 1
回答已采纳
1回答
Webpack Encore - OpenLayers :为什么没有正确地导出
symfony、webpack、gis、openlayers、webpack-encore
我试图在我的symfony应用程序中使用OpenLayers库。我用Webpack来管理我的资产。我已经使用npm下载了OpenLayers库。
当im试图在js文件中使用它时，只有第一个'ol‘类可用，而下面的类则不可用。在浏览器中，无法识别ol.layer.__Tile类并引发异常(未命名类型错误)。
// map.js
require('../css/map.css');
const ol = require('ol');
var map = new ol.Map({
target: 'map',
layers:
浏览 0提问于2018-04-23得票数 1
回答已采纳
1回答
OL3-google-map错误: olgm未定义
javascript、openlayers-3、ol3-google-maps
我想在我的项目中使用Google作为Openlayers。我试图将地图与以下内容集成：。但我连最简单的例子都找不到。映射不加载(空格)，在控制台中我得到"ReferenceError: olgm未定义“。这是我的代码：
<script>
...code...
var googleLayer = new olgm.layer.Google();
var center = [-7908084, 6177492];
var map = new ol.Map({
interactions: ol
浏览 9提问于2016-12-08得票数 1
回答已采纳
1回答
OpenLayers ZoomSlider未出现
javascript、openlayers
因此，我在这里使用OpenLayers创建了一个映射： var map;
var mapLat = 0;
var mapLng = 0;
var mapDefaultZoom = 14;
var view = new ol.View({
center: ol.proj.fromLonLat([mapLng, mapLat]),
zoom: mapDefaultZoom
});
var oldLayer;
function initMap() {
map = new ol.Map({
target: 'theMap',
l
浏览 22提问于2019-06-05得票数 1
1回答
仅在重新加载时正确显示Map组件。
reactjs、openlayers
我从React开始，我在开始层中有一个映射的这个组件，它只返回带映射的div。显然，当它从一开始就加载Map页面时，它工作得很好。但是，当您从站点的任何其他位置导航到此页面时，它就不会加载地图(如果您在此map页面上单击“重新加载”，它就会加载)。下面是映射组件的代码。
我尝试过类似的东西，但是它不能工作，因为库是不同的，而且还有很多问题。来自我构建代码的地方。
import React, {Component} from 'react'
var ol = require('openlayers')
require('openlayers/css/ol
浏览 0提问于2019-07-29得票数 0
回答已采纳
2回答
如何知道标签是否以Angular呈现？
angular、angular6、openlayers
当我想要使用Open Layers加载多个地图时，我在一个Angular应用程序中有以下代码：
<div *ngFof="let map of maps">
<map id="{{ 'map' + map.id }}" class="map"></map>
</div>
在我的组件中，当我试图通过id (目标)获取这个map时，似乎map标签已经准备好了，所以map没有显示。
ngOnInit() {
this.mapService.getMaps().subscri
浏览 16提问于2019-08-06得票数 0
回答已采纳
1回答
OpenLayers 3中未显示圆形图层
openlayers、openlayers-3
我正在尝试使用OpenLayers 3在OpenStreetMap上显示一些圆圈。地图显示正确，但是我看不到任何圆圈，也没有收到JavaScript错误。我使用了以下代码：
<div id="map" class="map"></div>
<script type="text/javascript">
var circle = new ol.geom.Circle({
center: [-2.59394, 51.45271],
radius
浏览 41提问于2016-07-26得票数 1
回答已采纳
1回答
OpenLayers图标没有出现
javascript、html、thymeleaf、openlayers、openstreetmap
我有一个基本的SpringBoot应用程序。使用Spring初始化器、JPA、嵌入式Tomcat、Thymeleaf模板引擎和包作为可执行的JAR文件。我有一个带有图标的OpenLayers 4库显示地图的Thymeleaf，但是图标在地图中的任何地方都没有显示。
<div id="Map" class="map"></div>
<div id="popup"></div>
<div></div>
<script src="https://openlayers.
浏览 2提问于2018-06-11得票数 1
回答已采纳
2回答
将地图标记添加到打开层6
javascript、openlayers、openlayers-6
我的问题很简单：，您如何在特定的经度和纬度添加标记？
通过开放层，我创建了一个带有标记的新地图。
我使用new ol.Feature添加了标记，但似乎，无论我将什么坐标设置为标记位置，都不会更改。
请任何人提供建议，为什么地图标记没有显示在正确的位置？
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point([53, -2]), //This marker will not move.
name: 'Somewhere',
});
const map = new ol.Map({
tar
浏览 5提问于2020-01-13得票数 4
回答已采纳
2回答
在添加新标记之前删除已添加的标记
javascript、openlayers、openstreetmap
我正在尝试使用openlayers开发具有标签位置功能的web应用程序。我想添加最多一个标记到地图时，它被点击。当用户第二次点击地图时，先前的标记将被删除。但是，在添加新的标记之前，我找不到合适的方法来删除标记。
<script type="text/javascript">
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source
浏览 0提问于2019-01-22得票数 0
1回答
如何将GeoServer上的Web地图服务叠加到Openlayers地图
openlayers、geoserver、wms
我正在尝试在本地主机GeoServer上覆盖WMS (网络地图服务)。但是，WMS层不会显示。如何解决这个问题？ <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/
浏览 81提问于2021-11-05得票数 0
2回答
OpenLayers中包含OSM / WMS /其他层的Azure地图
javascript、azure、openlayers、openstreetmap
我正在尝试添加一个天蓝色的地图层到我的第一层项目。我可以用我的蓝色地图键用制作一个基本的地图。但是，当我试图从Geoserver添加一个额外的层(如OSM或WMS层)时，它会在控制台中抛出一个错误："Uncaught : ol.source.OSM不是构造函数“。我有许多不同的图层类型(OSM，WMS，XYZ)，我想添加加入Azure，但我不能让任何这些工作，他们都抛出了类似的错误。
有什么想法吗?在Openlayers中，如何在Azure地图的旁边添加其他层？
相关代码片段：
<!-- Add reference to the Azure Maps OpenLayers
浏览 0提问于2021-11-22得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
