openlayers疊加天地圖經緯度投影瓦片

阿新 • • 發佈：2019-01-19

openlayers版本 Release 2.12

之前寫了一篇openlayers疊加天地圖魔卡託瓦片的文章，發現有朋友不知道怎麼疊加經緯度（WGS84）投影的瓦片，今天在原來的基礎上做了一些修改，發上來大家看看，標點、標線、標面的大家參考吧

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

		<title>openlayers 載入天地圖地圖</title>
		<script type="text/javascript" src="OpenLayers.js"></script>
	</head>

	<body>
	<input type="button" value="標點" onclick="addMarker()">
		<input type="button" value="標線" onclick="addLine()">
		<input type="button" value="標面" onclick="addPolygon()">
		<input type="button" value="清除" onclick="clearFeature()">點選地圖可獲取滑鼠點選位置螢幕座標及經緯度
		<div id="map" style="width:1024px;height:600px;"></div>

		<script type="text/javascript">
			get_my_url = function(bounds) {
				var res = this.map.getResolution();
				var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
				var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
				var z = this.map.getZoom();
				var path = "DataServer?T="+this.type+"&x="+x+"&y="+y+"&l="+z;
				var url = this.url;
				if (url instanceof Array) {
					url = this.selectUrl(path, url);
				}
				return url + path;
			}
			
			var imgGroup = [
				new OpenLayers.Layer.TMS(
					 "影像地圖1-18級",
					 [
						  "http://t0.tianditu.com/"
					 ],
					 {
						type : "img_c",
						getURL : get_my_url,
						isBaseLayer : true,
						minResolution:0.00034332275390625,
						maxResolution:1.40625,
						wrapDateLine : true,
						displayOutsideMaxExtent : true,
						buffer : 1
					 }
				)
				
			];

			
			var map = new OpenLayers.Map("map", {});
			map.addLayers(vectorGroup);
			var pointLayer = new OpenLayers.Layer.Markers("markers");//例項化的Layer.Vector物件，用來畫點（Point）。當然，如果可以根據你的業務需要，把點、線、面都畫在一個Layer.Vector物件上面。
			var lineLayer = new OpenLayers.Layer.Vector("Line Layer");//例項化的Layer.Vector物件，用來線（Line）當然。如果可以根據你的業務需要，把點、線、面都畫在一個Layer.Vector物件上面。
            var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");//例項化的Layer.Vector物件，用來多邊形（Polygon）。當然，如果可以根據你的業務需要，把點、線、面都畫在一個Layer.Vector物件上面。
			map.addLayers([lineLayer,polygonLayer,pointLayer]);
			

			//定位中心點
			center = new OpenLayers.LonLat(114.034428, 22.535805);
			//center.transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
			zoom = 5;
			map.setCenter(center, zoom);

			map.addControl(new OpenLayers.Control.Navigation({
				dragPanOptions: {
					enableKinetic: true,
					documentDrag: true
				},
				zoomBoxEnabled: true,
				zoomWheelEnabled: true,
				zoomBoxKeyMask: OpenLayers.Handler.MOD_SHIFT
			}));
			map.events.register('click',  map,  function (e) {
				 // 顯示地圖螢幕座標
				var str = "[Screen]:" + e.xy.x + "," + e.xy.y+"\n";
				// 螢幕座標向地圖座標的轉換
				var lonlat = map.getLonLatFromViewPortPx(e.xy);
				str += "[Map]:" + lonlat.lat + "," + lonlat.lon;
				alert(str);
			});

			function addMarker(){
				//建立Marker 位置
				var pos = new OpenLayers.LonLat(114.034428, 22.535805);
				//建立Marker物件
				var marker = new OpenLayers.Marker ( pos );
				//註冊滑鼠事件
				marker.events.register( 'mousedown',  marker, popup);
				//新增marker到marker layer
				pointLayer.addMarker(marker);
			}
			function popup(e){
				 // 顯示地圖螢幕座標
				alert(0);
			}
			function addLine(){
				var style_green = { 
				strokeColor: "red", 
				strokeWidth: 5, 
				strokeDashstyle: "dashdot", 
				pointRadius: 6, 
				pointerEvents: "visiblePainted" 
				};  
				var pointList = []; 
				
				newPoint = new OpenLayers.Geometry.Point(114.034428, 22.535805); 
				pointList.push(newPoint); 
				newPoint = new OpenLayers.Geometry.Point(114.044428, 22.535805);
				pointList.push(newPoint); 
				newPoint = new OpenLayers.Geometry.Point(114.044428, 22.537805); 
				pointList.push(newPoint); 
				newPoint = new OpenLayers.Geometry.Point(114.034428, 22.537805); 
				pointList.push(newPoint); 
				
				lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green); 
				lineLayer.addFeatures([lineFeature]); 
				
			}
			function addPolygon(){
				var style_green = { 
				strokeColor: "red", 
				strokeWidth: 5, 
				strokeDashstyle: "dashdot", 
				pointRadius: 6, 
				pointerEvents: "visiblePainted" 
				};  
				var pointList = []; 
				
				newPoint = new OpenLayers.Geometry.Point(114.034428, 22.535805); 
				pointList.push(newPoint); 
				newPoint = new OpenLayers.Geometry.Point(114.044428, 22.535805);
				pointList.push(newPoint); 
				newPoint = new OpenLayers.Geometry.Point(114.044428, 22.537805); 
				pointList.push(newPoint); 
				newPoint = new OpenLayers.Geometry.Point(114.034428, 22.537805); 
				pointList.push(newPoint); 
				
				//lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green); 
				//lineLayer.addFeatures([lineFeature]); 
				var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
				var polygon = new OpenLayers.Geometry.Polygon([linearRing]);
				var style_polygon = {
					strokeWidth: 2,
					strokeOpacity: 0.8,
					fillOpacity: 0.8
				};
				polygonFeature = new OpenLayers.Feature.Vector(polygon,null,style_polygon);
				
				polygonLayer.addFeatures([polygonFeature]); 
				
			}
			function clearFeature(){
				pointLayer.clearMarkers();
				lineLayer.removeAllFeatures();
				polygonLayer.removeAllFeatures();
			}
			
		</script>
		
	</body>
</html>

openlayers疊加天地圖經緯度投影瓦片

openlayers版本 Release 2.12 之前寫了一篇openlayers疊加天地圖魔卡託瓦片的文章，發現有朋友不知道怎麼疊加經緯度（WGS84）投影的瓦片，今天在原來的基礎上做了一些修改，發上來大家看看，標點、標線、標面的大家參考吧<!DOCTYPE h

使用OpenLayers疊加天地圖

var olMap = { mapCenter:null, changeBaseLayer : function() { $(".changeBaseLayer").bind('click',function(e){ var lyrName = '天地圖向量'; var lyrVec =

Cesium三維球上邊疊加天地圖瓦片

< script > var viewer = new Cesium.Viewer( 'cesiumContainer', { &nb

OpenLayers載入天地圖

openlayer 是基於JavaScript的webGIS庫，通過openlayer可以很容易的呼叫地圖，並做相應的操作。在head中載入openlayer的js檔案： <link rel="stylesheet" href="https://openlayers.org/e

openlayers3.0疊加天地圖底圖及註記後再疊加geoserverWMS服務

OpenLayers + 天地圖向量地圖 + 天地圖向量註記 + Geoserver WMS服務 1：程式碼 <!DOCTYPE html > < html lang= "en" >

用openlayers顯示天地圖切片資源

openlayers的官網上，有一個Quick Start，裡面的例子向我們展示了怎麼去顯示一個簡單的地圖（切片底圖），原始碼如下： <!doctype html> <html lang="en"> <head> <li

使用Openlayers呼叫天地圖線上服務資料

國家測繪局2010年10月21日正式釋出中國公眾版國家地理資訊公共服務平臺“天地圖”，作為中國境內資料資源最全的地理資訊服務網站，“天地圖”將為公眾提供權威、可信、統一的地理資訊資源。 “天地圖”公開開放了地圖資料服務介面，第三方使用者可以直接通過網際網路獲取地圖資料，無

GIS初學者，最新OpenLayers WMTS 天地圖，OpenLayers載入天地圖、呼叫天地圖WMTS示例、tianditu、EPSG:3857、EPSG:4326

2018最新OpenLayers天地圖載入可行方案，天地圖WMTS呼叫，OpenLayers 天地圖 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知識，對我這些外行人來說比較吃力，用OpenLayers載入天地圖也遇到了小打擊

openlayers載入天地圖WMTS服務

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <li

天地圖、百度、高德、騰訊、Leaflet、openlayers地圖圖片疊加層切片生成工具使用指南

切片工具下載： 32位、64位下載 (2018年10月6日，修改了預設輸出檔名與模板呼叫語句不一致，導致看不到覆蓋圖片的問題。謝謝網友“@希望，指尖上的溫柔”。各位有問題，請及時@我) 一個百度16級源圖例子，包含psd檔案、p

Openlayers離線載入天地圖

com def servlet 名稱 efault sqlite stub 好的 resultset 概述：經過一個春節的休整，今天最終開始了！任何時候。都不要忘記學習。學習是一輩子的事情！今天，我來說說怎樣實現天地圖的離線以及Openlayers載入離線數據實現天地圖

ArcGIS API for JavaScript3.x 學習筆記[3] 加載底圖（一）【天地圖（經緯度版）】

矢量地圖說明 tiled spa 過程相同服務器列表 text 服務 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5

使用osmdroid載入谷歌、高德、天地圖等瓦片地圖

研究了一星期多的Osmdroid，深感這個開源的android地圖包強大，因為使用其他瓦片涉及智慧財產權，請大家謹慎使用，本文只做研究測試。新建GoogleTileSource類繼承org.osmdroid.tileprovider.tilesource.T

開源GIS（三）——openlayers地圖基本框架與天地圖載入

目錄一、引言四、總結一、引言換工作中間耽誤了好長時間沒有更過blog了，現在終於有時間搞開源webgis了，先從openlayer下手，後面打算在研究geoserver、postgis、geotool等技術和OGC中WMS、WF

OpenLayers 3 載入WMTS天地圖

設定空間參考座標系使用哪個座標系取決於載入的地圖服務，如果座標系與地圖服務的不同，則可能出現無法載入地圖的問題 var projection = ol.proj.get('EPSG:4326'

使用openlayers 3 線上載入天地圖及GeoServer釋出的地圖

之前試了openlayers2載入天地圖，不過公司已經棄用2，所以使用openlayers3來載入天地圖衛星圖和標註圖層，今天又學習了GeoServer釋出地圖，一併用openlayers測試加載出來，順便實現了7種地圖控制元件。下面直接貼程式碼：<!

OpenLayers 3 之載入天地圖

要使用 OpenLayers 3 載入天地圖，首先要弄清楚天地圖釋出的原理，以及遵循的釋出規範，上一篇中我們提到了使用 OpenLayers 3 載入百度地圖，我們提到一般網路地圖為了加快訪問速度，都採用快取切片地圖的方式，天地圖也不例外，而且原理

ArcGIS Web API 接入天地圖瓦片

接入天地圖的瓦片完全類似google的瓦片服務，但是空間參考不一致，想疊加其他的資料的話需要注意空間參考的設定，以上三篇部落格的目的為簡單的技術研究，如果想將這些內容用於商業用途，大家還是要聯絡廠家啊！ publicclasstianditu :TiledMapServic

openlayers解析吉奧天地圖wfs服務

天地圖官方網站提供的二次開發文件和例子過於簡單，很多關鍵資訊沒有給予說明，例如給出了WFS服務介面，卻沒有提供詳細的開發文件。不過這並不影響我們的使用，因為OGC WFS規範包含元資料查詢命令，通過傳送getCapabilities請求，我們可以得知伺服器提供哪些WFS服務。獲取WFS伺服器元資

天地圖離線瓦片的打包與釋出（GeoServer）

想在GeoServer中直接釋出鬆散型的瓦片是不支援的，需要使用GeoServer的mbtiles擴充套件。先將瓦片儲存到SQLite資料庫中，再將資料庫釋出，中間進行了一個轉折。實現思路： 1.將已有的天地圖瓦片存入SQLite資料庫並取名字尾為mbti

openlayers疊加天地圖經緯度投影瓦片

相關推薦