OpenLayers3加载谷歌地图

最新推荐文章于 2022-09-06 08:00:00 发布
最新推荐文章于 2022-09-06 08:00:00 发布
阅读量2k 收藏 5
点赞数
分类专栏： OpenLayers 文章标签： OpenLayers 地图 JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gary_888/article/details/89914290
版权

HTML关键代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>水利信息在线分析服务系统</title>
    <link href="Libs/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="Styles/style.css" rel="stylesheet" type="text/css" />
    <!-- jQuery库 -->
    <script src="Libs/jquery-1.11.2.min.js" type="text/javascript"></script>
    <!--OL3库-->
	<!--<script src="Libs/ol/ol.js" type="text/javascript"></script>-->
    <script src="Libs/ol/ol-debug.js" type="text/javascript"></script>
    <link href="Libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <!--OL3扩展库-->
    <script src="Libs/ol/source/GoogleMapSource.js" type="text/javascript"></script>
    <script src="Libs/ol/layer/GoogleMapLayer.js" type="text/javascript"></script>
   <!-- 第三方插件库 统计图插件 -->
    <script src="Libs/FusionCharts.js" type="text/javascript"></script>
    <!-- 第三方插件库 -->
    <script src="Libs/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <script src="Libs/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script>
</head>
<body>
    <div class="backgroundDiv">
    </div>
    <!-- 地图底图切换列表 -->
    <select class="layerSwitcherDiv" id="layerSwitcherBtn" onchange="onlayerSwitcherBtn()">
        <option value="terrain">谷歌地形图</option>
        <option value="vector">谷歌矢量图</option>
        <option value="raster">谷歌遥感图</option>
        <option value="road">谷歌交通图</option>
    </select>
    <!-- 地图容器-->
    <div id="map">
        <!-- Popup -->
        <div id="popup" class="ol-popup" >
              <div id="popup-closer" class="ol-popup-closer"></div>
              <div id="popup-content">              
              </div>
        </div>
    </div>
    <!-- 系统功能库 -->
    <script src="Scripts/SLSysFun.js" type="text/javascript"></script>
</body>
</html>

SLSysFun.js

/************************************************************************/
/* 水利信息在线分析服务系统
*@author fmm 2015-06-09/  wjl 2015-10-10
/************************************************************************/
var map;            //地图容器
var labelType;      //当前显示哪一个div
var winHeight;      //屏幕当前高度
var winWidth;       //屏幕当前宽度

var popup; //弹出的Popup
var popupElement = $("#popup");
var popupContent = $("#popup-content");
var popupCloser = $("#popup-closer");

var preFeature = null;  //鼠标选中的前一要素

/*
*	页面初始化，在页面加载完成之后执行
*/
$(function () {
    /**
    * 添加关闭按钮的单击事件（隐藏popup）
    * @return {boolean} Don't follow the href.
    */
    popupCloser.bind("click", function () {
        popup.setPosition(undefined);  //未定义popup位置
        popupCloser.blur(); //失去焦点
        return false;
    });

    initMap();                  //初始化地图容器

    winWidth = $(window).width();
    winHeight = $(window).height();
});

/*
*	页面尺寸发生变化回调函数
*@author fmm 2015-07-17
*/
window.onresize = function () {
    winWidth = $(window).width();
    winHeight = $(window).height();
}

/*
*	地图容器初始化
*/
var googleLayer; //加载的Google图层
var projection = ol.proj.get('EPSG:3857');

function initMap() {
    //初始化Google图层
    googleLayer = new ol.layer.GoogleMapLayer({
        layerType: ol.source.GoogleLayerType.TERRAIN
    });
    //初始化地图容器
    map = new ol.Map({
        layers: [googleLayer],
        target: 'map', //地图容器div的ID
        view: new ol.View({
            projection: projection, //投影坐标系
            center: [12308196.042592192, 2719935.2144997073],
            minZoom: 2,
            zoom:6
        })
    });

    /**
    * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
    */
    map.on('pointermove', function (e) {
        var pixel = map.getEventPixel(e.originalEvent);
        var hit = map.hasFeatureAtPixel(pixel);
        map.getTargetElement().style.cursor = hit ? 'pointer' : '';
    });

    /**
    * 在地图容器中创建一个Overlay
    */
    popup = new ol.Overlay(/** @type {olx.OverlayOptions} */({
        element: popupElement,
        autoPan: true,
        positioning: 'bottom-center',
        stopEvent: false,
        autoPanAnimation: {
            duration: 250
        }
    }));
    map.addOverlay(popup);

    /**
    * 为map添加点击事件监听，渲染弹出popup
    */
    map.on('singleclick', function (evt) {
        var coordinate = evt.coordinate;
        //判断当前单击处是否有要素，捕获到要素时弹出popup
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
        if (feature) {
            popupContent.innerHTML = ''; //清空popup的内容容器
            var type = feature.get('type');
            if (type == "river" || type == "Rver") {
                showDetailsInfo(feature);  //为水情要素点添加popup的信息内容
            }
            else if (type == "sq") {
                showSsyqDetailInfo(feature); //为雨情要素点添加popup的信息内容
            }
            else if (type == "typhoon") {
                showTFDetailsInfo(feature);
            }
            else {
                return;
            }
        }
    });

    /**
    * 为map添加move事件监听，变更图标大小实现选中要素的动态效果
    */
    map.on('pointermove', function (evt) {
        var coordinate = evt.coordinate;
        //判断当前鼠标悬停位置处是否有要素，捕获到要素时设置图标样式
        var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
        if (feature) {
            var type = feature.get('type');
            if ((type == undefined) || (type == "tfMarker") || (type == "tfCircle")) {
                return;
            }
            if ((preFeature != null) && (preFeature !== feature)) { //如果当前选中要素与前一选中要素不同，恢复前一要素样式，放大当前要素图标
                var curImgURL = feature.get('imgURL');
                var preImgURL = preFeature.get('imgURL');
                feature.setStyle(createLabelStyle(feature, curImgURL, 1.2));
                preFeature.setStyle(createLabelStyle(preFeature, preImgURL, 0.8));
                preFeature = feature;
            }
            if (preFeature == null) { //如果前一选中要素为空，即当前选中要素为首次选中要素，放大当前要素图标
                var curImgURL = feature.get('imgURL');
                feature.setStyle(createLabelStyle(feature, curImgURL, 1.2));
                preFeature = feature;
            }
        }
        else {
            if (preFeature != null) { //如果鼠标移出前一要素，恢复要素图标样式
                var imgURL = preFeature.get('imgURL');
                preFeature.setStyle(createLabelStyle(preFeature, imgURL, 0.8));
                preFeature = null;
            }
        }
    });
}

/*
*	根据图层类型加载Google地图
*/
function loadGoogleMap(mapType) {
    switch (mapType) {
        case "terrain": //地形
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType: ol.source.GoogleLayerType.TERRAIN
            });
            break;
        case "vector": //矢量
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType: ol.source.GoogleLayerType.VEC
            });
            break;
        case "raster": //影像
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType: ol.source.GoogleLayerType.RASTER
            });
            break;
        case "road": //道路
            googleLayer = new ol.layer.GoogleMapLayer({
                layerType: ol.source.GoogleLayerType.ROAD
            });
        default:
    }
    map.addLayer(googleLayer); //添加Google地图图层  
}

/*
*	初始化图层切换控件
*@ahthor fmm 2015-07-10
*/
function onlayerSwitcherBtn() {
    var layerType = $("#layerSwitcherBtn option:selected").val();
    map.removeLayer(googleLayer); //移除Google图层
    loadGoogleMap(layerType); //根据图层类型重新加载Google图层
}

GoogleMapSource.js

goog.provide('ol.source.GoogleMapSource');
goog.provide('ol.source.GoogleType');
goog.require('ol.source.TileImage');


ol.source.GoogleLayerType = {
    VEC: 'vector',            //Google矢量数据
    RASTER: 'raster',         //Google影像数据
    ROAD: 'road',             //Google道路数据
    TERRAIN: 'terrain'       //Google地形数据
};
/**
* @classdesc
* @constructor
* @param {options} options Google地图参数.
* @api
*/
ol.source.GoogleMapSource = function (options) {

    this.ip = goog.isDef(options.ip) ? options.ip : null;

    this.port = goog.isDef(options.port) ? options.port : null;

    //图层类型，默认为矢量图
    this.layerType = goog.isDef(options.layerType) ? options.layerType : ol.source.GoogleLayerType.VEC,
    /**
    * @public
    * @type {number}
    * 最大分辨率
    */
    this.maxResolution = null;
    //根据投影获取地图范围
    var tileProjection = goog.isDef(options.projection) ? options.projection : null;
    //瓦片范围
    this.tileExtent = [-20037508.3427892, -20037508.3427892, 20037508.3427892, 20037508.3427892];
    if (tileProjection != null) {
        this.tileExtent = tileProjection.getExtent();
    }

    //设置地图范围
    this.extent = goog.isDef(options.extent) ? options.extent : this.tileExtent;

    /**
    * @public
    * @type {Array.<number>}
    * 地图的原点，可由外部指定,默认左下角
    */
    this.origin = goog.isDef(options.origin) ? options.origin : ol.extent.getCorner(this.extent, ol.extent.Corner.TOP_LEFT);
    /**
    * @public
    * @type {number}
    * 瓦片地图总级数
    */
    this.maxZoom = goog.isDef(options.maxZoom) ? (options.maxZoom <= 24 ? options.maxZoom : 24) : 24;

    /**
    * @public
    * @type {number}
    * 地图图片大小
    */
    this.tileSize = goog.isDef(options.tileSize) ? options.tileSize : 256;
    //分辨率数组，根据传入的分辨率或范围计算得到
    this.resolutions = this.getResolutions();

    this.baseURL = goog.isDef(options.baseURL) ? options.baseURL :this.getBaseURL();
    /**
    * @private
    * @type {Array.<number>}
    * 创建网格(内部调用)
    */
    this.tileGrid = new ol.tilegrid.TileGrid({
        origin: this.origin, //数组类型，如[0,0],
        resolutions: this.resolutions, //分辨率
        tileSize: this.tileSize //瓦片图片大小
    });

    goog.base(this, {
        attributions: options.attributions,
        extent: this.extent,
        tileExtent: this.tileExtent,
        ip: this.ip,
        port: this.port,
        layerType: this.layerType,
        logo: options.logo,
        opaque: options.opaque,
        projection: options.projection,
        state: goog.isDef(options.state) ?
        /** @type {ol.source.State} */(options.state) : undefined,
        tileGrid: this.tileGrid,
        tilePixelRatio: options.tilePixelRatio,
        crossOrigin: goog.isDef(options.crossOrigin) ? options.crossOrigin : null  //"anonymous"为跨域调用,
    });

    this.tileUrlFunction = goog.isDef(options.tileUrlFunction) ?
          options.tileUrlFunction :
          this.tileUrlFunctionExtend;

};
goog.inherits(ol.source.GoogleMapSource, ol.source.TileImage);

/**
* 创建基地址
*/
ol.source.GoogleMapSource.prototype.getBaseURL = function () {
    var url_base = "";
    switch (this.layerType) {
        case ol.source.GoogleLayerType.VEC:
            url_base = "http://mt" + Math.round(Math.random() * 3) + ".google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&s=Galile";
            break;
        case ol.source.GoogleLayerType.RASTER:
            url_base = "http://mt" + Math.round(Math.random() * 3) + ".google.cn/vt?lyrs=s@173&hl=zh-Hans-CN&gl=CN&token=63145";
            break;
        case ol.source.GoogleLayerType.ROAD:
            url_base = "http://mt" + Math.round(Math.random() * 3) + ".google.cn/vt/imgtp=png32&lyrs=h@248000000,highlight:0x342eaef8dd85f26f:0x39c2c9ac6c582210@1%7Cstyle:maps&hl=zh-CN&gl=CN&src=app&s=Galileo";
            break;
        case ol.source.GoogleLayerType.TERRAIN:
           // url_base = "http://mt" + Math.round(Math.random() * 3) + ".google.cn/vt/lyrs=t@132,r@248000000&hl=zh-CN&src=app&s=Galileo";
            url_base = "http://mt" + Math.round(Math.random() * 3) + ".google.cn/vt/lyrs=t@132,r@249000000&hl=zh-CN&src=app&s=Galileo";
//            url_base = "http://mt" + Math.round(Math.random() * 3) + ".google.cn/vt?lyrs=t&scale=1";
            break;
    }
    return url_base;
}
/**
* 创建分辨率数组
*/
ol.source.GoogleMapSource.prototype.getResolutions = function () {
    if (this.maxResolution == null) {
        var width = ol.extent.getWidth(this.tileExtent);
        var height = ol.extent.getHeight(this.tileExtent);
        this.maxResolution = (width <= height ? height : width) / (this.tileSize);
    }
    var opt_resolutions = new Array(this.maxZoom);
    for (z = 0; z < this.maxZoom; ++z) {
        opt_resolutions[z] = this.maxResolution / Math.pow(2, z);
    }
    return opt_resolutions;
};


/**
* 拼接url取图地址
* @param {Array.<number>} tileCoord 数据格式包含级数、行号、列号.
* @param {string} pixelRatio 像素比率
* @param {ol.proj.Projection} projection 投影
*/
ol.source.GoogleMapSource.prototype.tileUrlFunctionExtend = function (tileCoord, pixelRatio, projection) {
    //判断返回的当前级数的行号和列号是否包含在整个地图范围内
    if (this.tileGrid != null) {
        var tileRange = this.tileGrid.getTileRangeForExtentAndZ(this.extent, tileCoord[0], tileRange);
        if (!tileRange.contains(tileCoord)) {
            return;
        }
    }
    var urlTemplate = "";
    switch (this.layerType) {
        case ol.source.GoogleLayerType.VEC:
        case ol.source.GoogleLayerType.RASTER:
        case ol.source.GoogleLayerType.ROAD:
        case ol.source.GoogleLayerType.TERRAIN:
            urlTemplate = this.baseURL + "&x=" + '{x}' + "&y=" + '{y}' + "&z=" + '{z}';
            break;
    }
    var z = tileCoord[0];
    var x = tileCoord[1];
    var y = -(tileCoord[2] + 1);
    //var y = Math.pow(2, z) - 1 - tileCoord[2];

    return new goog.Uri(urlTemplate.replace('{x}', x.toString()).replace('{y}', y.toString()).replace('{z}', z.toString()));
};

GoogleMapLayer.js

goog.provide('ol.layer.GoogleMapLayer');
goog.require('ol.layer.Tile');
goog.require('ol.source.GoogleMapSource');


/**
* @constructor
* @extends {ol.layer.Tile}
* @fires ol.render.Event
* @param opt_options: Layer options.
* @opt_options: extent(图层范围)，origin(瓦片原点)默认情况下都不需要赋值，则默认取图层范围的左下角
* @opt_options: layerType(图层类型)，默认情况下为"vector"
* @api stable
*/
ol.layer.GoogleMapLayer = function (opt_options) {
    var options = goog.isDef(opt_options) ? opt_options : {};
    goog.base(this,  /** @type {olx.layer.LayerOptions} */(options));

    var source = goog.isDef(options.source) ? options.source : null;

    if (source == null) {
        source = new ol.source.GoogleMapSource(options);
    }
    this.setSource(source);
};
goog.inherits(ol.layer.GoogleMapLayer, ol.layer.Tile);

实现效果：
在这里插入图片描述
具体实现代码在上面已经贴出来了，如果要完整Demo可以下载。
[https://download.csdn.net/download/gary_888/11163360]

干到60岁退休的码农
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openlayers之加载谷歌地图
weixin_30265171的博客
02-07 453
之前项目中一直使用高德地图作为底图，但高德地图影像图只限于城市地区，所以决定替换为谷歌地图。其实一直以为谷歌地图不能访问，不知道有没有像我一样懒的小伙伴…… 加载谷歌地图的地址总结如下： 谷歌交通地图地址：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!...
Openlayers中Google地图的加载
weixin_30325793的博客
03-25 210
概述：本文讲述如何在Openlayers中加载Google的切片。效果：矢量图影像图实现：在实现的时候，参考了mygisforum的文章http://blog.csdn.net/mygisforum/article/details/7582449的内容，同时结合gwc的gridset，实现了google切片在Openlayers2中的调用与展示。1、扩展的GoogleLayer代码如下：Ope...
Openlayers学习之调用Geoserver发布的地图服务(一)
热门推荐
c17854254215的博客
06-01 1万+
目录 一、openlayers引用 首先引用js文件，在官网下载类库的压缩包，解压缩在项目目录下。在html文件中引用。 <link rel="stylesheet" href="../plugins/openlayers4/css/ol.css" type="text/css"> <script src="../plugins/openlayers4/build/ol.js"></script> 二、创建地图容器 创建dom对象作为地图容器，以承载地图。 &
关于Google浏览器使用layer弹出层video标签播放视屏无法全屏播放问题
weixin_34210740的博客
07-28 532
关于Google浏览器使用layer弹出层video标签播放视屏无法全屏播放，而IE9+及Firefox浏览器都是正常全屏播放的， 处理方法即在弹窗时清除layer层中的layer-anim样式属性： layer.open({ type: 2, title: false, shadeClose: true, area: ['500px', '550px'], cont...
如何使用Openlayers 3加载谷歌离线地图
我的博客
03-02 9408
使用Openlayers 3 加载谷歌离线地图，将下载的谷歌离线地图使用合适的WEB服务器发进行发布，使用ol.source.XYZ来调用地图服务。 //定义一个地图调用函数 var BaseMapLayer = function(options) { var mapExtent = [179.9257
openlayers调用google离线图实例
wangyingda415的专栏
06-15 4268
pageEncoding="utf-8"%>      测试使用xyz var map, layer; var proj = new OpenLayers.Projection("EPSG:4326"); var mapproj = new OpenLayers.Projection("EPSG:900913"); function init(
openlayers5加载谷歌地图.zip
06-19
在本案例中，我们讨论的是如何利用OpenLayers 5来加载谷歌地图。对于初学者来说，这是一个很好的起点，因为OpenLayers提供了丰富的API和强大的功能。 首先，我们要了解OpenLayers 5的基本概念。OpenLayers 5的核心...
openlayers加载瓦片地图并手动标记坐标点
最新发布
04-29
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
openlayers3 调用离线谷歌切片地图 示例
08-25
openlayers3 调用离线谷歌切片地图 示例
openlayers3添加各种地图资源
06-21
在WebGIS开发中，OpenLayers 3 是一个强大的开源JavaScript库，用于在网页上创建交互式的...提供的代码示例展示了如何加载百度地图、天地图、高德地图和Google地图，这些资源对于WebGIS开发者来说是非常实用的参考。
126：vue+openlayers 加载谷歌地图（另一种URL方式）
大剑师兰特的GIS世界
09-06 472
本示例的目的是介绍演示如何在vue+openlayers中添加谷歌地图。***本专栏内容目录详情。
使用openlayers加载OSM街道图，谷歌影像图以及天地图地形图
10-07 8001
一，安装ol cnpm i ol -S 二，在components文件夹下面新建olmap.vue <template> <div id="map"></div> </template> <script> import 'ol/ol.css' import {Map,View} from 'ol' import Til...
完整版openlayer的例子及中文注释（完整中文版）
weixin_30765505的博客
12-21 365
//@sourceURL=PersonLocation.jsvar window_temp = { onbeforeunload: null, DEBUG_MODE: false, MAPLIST: null, MAPLIST_CACHE: {}, MAP: null, MAP_LAYERS: null, LAYER: ['basic', 'ar...
Openlayers之加载谷歌地图
SmileCoffin的博客
06-05 1万+
1、谷歌地图瓦片构成 我们用浏览器打开谷歌地图，然后按下F12键，查看网络资源中的地图瓦片，可以发现瓦片URL中变化的部分为1i、2i和3i后面的数字，经过分析可以知道1i后面的应该是瓦片的级别，2i后面的应该是瓦片的行号，所以最终得到其通用URL为：http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i
OpenLayers Layer删除Feature
Gary Leong
11-22 9193
var copyLayer = VectorLayer[i]; copyLayer.getSource().removeFeature(feature); map.removeLayer(VectorLayer[i]); delete (VectorLayer[i]); VectorLayer[i] = copyLayer; map.addLayer(VectorLayer[i]); map.up...
openLayers不能加载什么地图
06-03
OpenLayers并不限制加载特定的地图，它可以加载各种地图源，包括但不限于OpenStreetMap、Google Maps、Bing Maps、Mapbox等。但是，某些地图源可能需要在使用前获取API密钥或者进行其他设置。如果您遇到了加载地图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值