HTML关键代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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 -06-09/ wjl -10-10/************************************************************************/var map; //地图容器var labelType;//当前显示哪一个divvar winHeight;//屏幕当前高度var winWidth; //屏幕当前宽度var popup; //弹出的Popupvar 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 -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 -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 = [-7508.3427892, -7508.3427892, 7508.3427892, 7508.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) + "./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) + "./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) + "./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) + "./vt/lyrs=t@132,r@248000000&hl=zh-CN&src=app&s=Galileo";url_base = "http://mt" + Math.round(Math.random() * 3) + "./vt/lyrs=t@132,r@249000000&hl=zh-CN&src=app&s=Galileo";// url_base = "http://mt" + Math.round(Math.random() * 3) + "./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可以下载。
[/download/gary_888/11163360]
