Toggle navigation
Edit Code :
重置
複製程式碼
檢視成果 >>
<!--程式碼範例--> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>WMTS服務套疊</title> <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script> <script type="text/javascript"> var pMap = null; var WMTSLayer = null; var WMTSLayers = new Array(); function InitWnd() { var pOMap = document.getElementById("OMap"); pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3857); } /* 中研院WMTS服務: http://gis.sinica.edu.tw/tileserver/wmts 說明頁: http://gis.sinica.edu.tw/tileserver/ 1956-臺灣土地利用及林型圖 : 1956_Landuse 1944-美軍地形圖-1:50,000 : AM50K_1944 1945-美軍繪製臺灣城市地圖 : AMCityPlan_1945 1905-日治臺灣圖-1:100,000 : JM100K_1905 1904-日治臺灣堡圖(明治版)-1:20,000 : JM20K_1904 1921-日治臺灣堡圖(大正版)-1:20,000 : JM20K_1921 1921-日治地形圖-1:25,000 : JM25K_1921 1924-日治臺灣全圖(第三版)-1:300,000 : JM300K_1924 1939-日治臺灣全圖(第五版)-1:300,000 : JM300K_1939 1899-日治臺灣全圖-1:400,000 : JM400K_1899 1916-日治蕃地地形圖-1:50,000 : JM50K_1916 1920-日治地形圖(總督府土木局)-1:50,000 : JM50K_1920 1924-日治地形圖(陸地測量部)-1:50,000 : JM50K_1924 1987-臺灣地形圖-1:100,000 : TM100K_1987 1989-臺灣經建1版地形圖-1:25,000 : TM25K_1989 1993-臺灣經建2版地形圖-1:25,000 : TM25K_1993 2001-臺灣經建3版地形圖-1:25,000 : TM25K_2001 2003-臺灣經建4版地形圖-1:25,000 : TM25K_2003 1956-臺灣地形圖-1:50,000 : TM50K_1956 1990-臺灣經建1版地形圖-1:50,000 : TM50K_1990 1996-臺灣經建2版地形圖-1:50,000 : TM50K_1996 2002-臺灣經建3版地形圖-1:50,000 : TM50K_2002 */ function WMTS() { var Bounds = pMap.getBounds(); var src = "http://gis.sinica.edu.tw/tileserver/wmts"; var info = { matrixSet: 'GoogleMapsCompatible', //MatrixSet設定, 必要參數, 可進WMTS的Capabilities去看所需圖層使用的MatrixSet layer: 'JM20K_1921', //Layer Name, 必要參數 format: "image/jpeg", style: "default" }; var req = { wmtsVisible: true, //zIndex: 50, opacity: 0.65 }; WMTSLayer = new TGOS.TGWmtsLayer(src, pMap, info, req); WMTSLayers.push(WMTSLayer); } function ClearWMTS(){ if (WMTSLayers.length > 0) { for(var i = 0; i < WMTSLayers.length; i++) { WMTSLayers[i].removeWmtsLayer(); //當圖面上存在WMS圖層時, 將該圖層移除 } } else { alert('圖面上不存在WMS圖層'); } } </script> </head> <body style="margin:5px" onload="InitWnd();"> <div id="OMap" style="position:absolute; top:5px; left:5px; width:640px; height:560px; border:1px solid #000000;"></div> <div style="position:absolute;top:570px; left:5px;"> <input type="button" value="加入WMTS疊加層" onclick="WMTS();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/> <input type="button" value="清除WMTS疊加層" onclick="ClearWMTS();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/> </div> </html>
<!--程式碼範例--> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>WMTS服務套疊</title> <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script> <script type="text/javascript"> var pMap = null; var WMTSLayer = null; var WMTSLayers = new Array(); function InitWnd() { var pOMap = document.getElementById("OMap"); pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3857); } /* 中研院WMTS服務: http://gis.sinica.edu.tw/tileserver/wmts 說明頁: http://gis.sinica.edu.tw/tileserver/ 1956-臺灣土地利用及林型圖 : 1956_Landuse 1944-美軍地形圖-1:50,000 : AM50K_1944 1945-美軍繪製臺灣城市地圖 : AMCityPlan_1945 1905-日治臺灣圖-1:100,000 : JM100K_1905 1904-日治臺灣堡圖(明治版)-1:20,000 : JM20K_1904 1921-日治臺灣堡圖(大正版)-1:20,000 : JM20K_1921 1921-日治地形圖-1:25,000 : JM25K_1921 1924-日治臺灣全圖(第三版)-1:300,000 : JM300K_1924 1939-日治臺灣全圖(第五版)-1:300,000 : JM300K_1939 1899-日治臺灣全圖-1:400,000 : JM400K_1899 1916-日治蕃地地形圖-1:50,000 : JM50K_1916 1920-日治地形圖(總督府土木局)-1:50,000 : JM50K_1920 1924-日治地形圖(陸地測量部)-1:50,000 : JM50K_1924 1987-臺灣地形圖-1:100,000 : TM100K_1987 1989-臺灣經建1版地形圖-1:25,000 : TM25K_1989 1993-臺灣經建2版地形圖-1:25,000 : TM25K_1993 2001-臺灣經建3版地形圖-1:25,000 : TM25K_2001 2003-臺灣經建4版地形圖-1:25,000 : TM25K_2003 1956-臺灣地形圖-1:50,000 : TM50K_1956 1990-臺灣經建1版地形圖-1:50,000 : TM50K_1990 1996-臺灣經建2版地形圖-1:50,000 : TM50K_1996 2002-臺灣經建3版地形圖-1:50,000 : TM50K_2002 */ function WMTS() { var Bounds = pMap.getBounds(); var src = "http://gis.sinica.edu.tw/tileserver/wmts"; var info = { matrixSet: 'GoogleMapsCompatible', //MatrixSet設定, 必要參數, 可進WMTS的Capabilities去看所需圖層使用的MatrixSet layer: 'JM20K_1921', //Layer Name, 必要參數 format: "image/jpeg", style: "default" }; var req = { wmtsVisible: true, //zIndex: 50, opacity: 0.65 }; WMTSLayer = new TGOS.TGWmtsLayer(src, pMap, info, req); WMTSLayers.push(WMTSLayer); } function ClearWMTS(){ if (WMTSLayers.length > 0) { for(var i = 0; i < WMTSLayers.length; i++) { WMTSLayers[i].removeWmtsLayer(); //當圖面上存在WMS圖層時, 將該圖層移除 } } else { alert('圖面上不存在WMS圖層'); } } </script> </head> <body style="margin:5px" onload="InitWnd();"> <div id="OMap" style="position:absolute; top:5px; left:5px; width:640px; height:560px; border:1px solid #000000;"></div> <div style="position:absolute;top:570px; left:5px;"> <input type="button" value="加入WMTS疊加層" onclick="WMTS();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/> <input type="button" value="清除WMTS疊加層" onclick="ClearWMTS();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/> </div> </html>
<!--程式碼範例--> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>WMTS服務套疊</title> <script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script> <script type="text/javascript"> var pMap = null; var WMTSLayer = null; var WMTSLayers = new Array(); function InitWnd() { var pOMap = document.getElementById("OMap"); pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3857); } /* 中研院WMTS服務: http://gis.sinica.edu.tw/tileserver/wmts 說明頁: http://gis.sinica.edu.tw/tileserver/ 1956-臺灣土地利用及林型圖 : 1956_Landuse 1944-美軍地形圖-1:50,000 : AM50K_1944 1945-美軍繪製臺灣城市地圖 : AMCityPlan_1945 1905-日治臺灣圖-1:100,000 : JM100K_1905 1904-日治臺灣堡圖(明治版)-1:20,000 : JM20K_1904 1921-日治臺灣堡圖(大正版)-1:20,000 : JM20K_1921 1921-日治地形圖-1:25,000 : JM25K_1921 1924-日治臺灣全圖(第三版)-1:300,000 : JM300K_1924 1939-日治臺灣全圖(第五版)-1:300,000 : JM300K_1939 1899-日治臺灣全圖-1:400,000 : JM400K_1899 1916-日治蕃地地形圖-1:50,000 : JM50K_1916 1920-日治地形圖(總督府土木局)-1:50,000 : JM50K_1920 1924-日治地形圖(陸地測量部)-1:50,000 : JM50K_1924 1987-臺灣地形圖-1:100,000 : TM100K_1987 1989-臺灣經建1版地形圖-1:25,000 : TM25K_1989 1993-臺灣經建2版地形圖-1:25,000 : TM25K_1993 2001-臺灣經建3版地形圖-1:25,000 : TM25K_2001 2003-臺灣經建4版地形圖-1:25,000 : TM25K_2003 1956-臺灣地形圖-1:50,000 : TM50K_1956 1990-臺灣經建1版地形圖-1:50,000 : TM50K_1990 1996-臺灣經建2版地形圖-1:50,000 : TM50K_1996 2002-臺灣經建3版地形圖-1:50,000 : TM50K_2002 */ function WMTS() { var Bounds = pMap.getBounds(); var src = "http://gis.sinica.edu.tw/tileserver/wmts"; var info = { matrixSet: 'GoogleMapsCompatible', //MatrixSet設定, 必要參數, 可進WMTS的Capabilities去看所需圖層使用的MatrixSet layer: 'JM20K_1921', //Layer Name, 必要參數 format: "image/jpeg", style: "default" }; var req = { wmtsVisible: true, //zIndex: 50, opacity: 0.65 }; WMTSLayer = new TGOS.TGWmtsLayer(src, pMap, info, req); WMTSLayers.push(WMTSLayer); } function ClearWMTS(){ if (WMTSLayers.length > 0) { for(var i = 0; i < WMTSLayers.length; i++) { WMTSLayers[i].removeWmtsLayer(); //當圖面上存在WMS圖層時, 將該圖層移除 } } else { alert('圖面上不存在WMS圖層'); } } </script> </head> <body style="margin:5px" onload="InitWnd();"> <div id="OMap" style="position:absolute; top:5px; left:5px; width:640px; height:560px; border:1px solid #000000;"></div> <div style="position:absolute;top:570px; left:5px;"> <input type="button" value="加入WMTS疊加層" onclick="WMTS();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/> <input type="button" value="清除WMTS疊加層" onclick="ClearWMTS();"style="height:30px;font-size:16px;font-family:Microsoft JhengHei"/> </div> </html>
展示雛型