ol3之測試專案
阿新 • • 發佈：2021-07-14
ol3之測試專案
程式碼：
<!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="http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/libs/ol/ol.css"rel="stylesheet" type="text/css" /> <script src="http://develop.smaryun.com:81/API/JS/OL3InterfaceDemo/libs/ol/ol.js" type="text/javascript"></script> <style type="text/css"> #mapCon { width: 100%; height: 95%; position: absolute; } </style> </head> <body> <div id="mapCon"> </div> <script type="text/javascript"> var TiandiMap_vec = new ol.layer.Tile({ title: "天地圖向量圖層", source: new ol.source.XYZ({ url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=b0c2d623f9344504010dff3b0e3c3b81", wrapX: false }) }); var Tianditu_cva = new ol.layer.Tile({ title: "天地圖向量註記圖層", source: new ol.source.XYZ({ url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=b0c2d623f9344504010dff3b0e3c3b81", wrapX: false }) }); //例項化Map物件載入地圖 var map = new ol.Map({ //地圖容器div的ID target: 'mapCon', controls: ol.control.defaults({ /** @type {olx.control.AttributionOptions} */ attributionOptions: ({ collapsible: true }) }), //地圖容器中載入的圖層 layers: [TiandiMap_vec,Tianditu_cva], //地圖檢視設定 view: new ol.View({ //地圖初始中心點 center: [118.866,39.7], //地圖初始顯示級別 zoom: 15, projection: "EPSG:4326", visibility: true, }) }); </script> </body> </html>
將程式碼複製到一個html頁面中，然後伺服器環境開啟即可除錯
鑽研不易，轉載請註明出處。。。。。。