OpenLayers3加载谷歌地图

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的IDview: 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;//判断当前单击处是否有要素，捕获到要素时弹出popupvar 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]

OpenLayers3加载谷歌地图相关推荐

Openlayers3 加载百度地图，天地图
2019独角兽企业重金招聘Python工程师标准>>> openlayers3 加载百度地图: var projection = ol.proj.get("EPSG:385 ...
python下载谷歌地图瓦片_openLayers TMS加载谷歌地图瓦片
openLayers TMS中加载谷歌瓦片经纬坐标(LonLat) 和投影坐标系的转换 /** openLayer根据TMS加载谷歌地图瓦片 (1)先去下载加载谷歌地图瓦片,这样的软件有(水经注 ...
使用Python加载谷歌地图并可视化
使用Python加载谷歌地图并可视化 1.库 - pyqt5- pandas- gmplot 首先放个结果图(本文使用的是gmplot,该库使用的是谷歌地图,地图仅供小型开发玩一下而已,大家可以使用百 ...
在线加载谷歌地图—lyrs类型解析
在线加载谷歌地图-lyrs类型解析最近在用openlayers加载在线谷歌地图的时候总结了一下lyrs之后地图类型解析 m 标准路线图 r 某种改变的路线图(路线不明显) s 影像层(卫星图) y ...
ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
Openlayers之加载谷歌地图
1.谷歌地图瓦片构成我们用浏览器打开谷歌地图,然后按下F12键,查看网络资源中的地图瓦片,可以发现瓦片URL中变化的部分为1i.2i和3i后面的数字,经过分析可以知道1i后面的应该是瓦片的级别,2i ...
openlayers加载谷歌地图（在线demo）
最近发现可以直接访问谷歌地图了(不用梯子,不用翻墙,直接访问谷歌地图,关键是使用了gac-geo.googlecnapps.cn ),用openlayers随手写了一个,方便自己使用,感兴趣的可以访问 ...
OpenLayers3加载百度地图
BaiduMapSource.js /*** 加载百度地图* @returns {ol.layer.Tile}*/ function loadBaiduMap() {//数据源信息var attrib ...
QGIS加载谷歌地图（google map）方法
目录第一步第二步将Google提供的网络地图,包括地图和卫星影像等,作为图层加载到QGIS中,有时可辅助地学分析.QGIS已经提供了OpenStreetMap,在 "XYZ Tiles ...

OpenLayers3加载谷歌地图

OpenLayers3加载谷歌地图相关推荐

最新文章

热门文章