首页帮我写一个openlayers加载天地图底图服务的html代码

帮我写一个openlayers加载天地图底图服务的html代码

时间: 2024-03-11 17:38:15 浏览: 16

好的，以下是代码： <!DOCTYPE html> <html> <head> <title>OpenLayers with TianDiTu Map</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css"> <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> <style> #map { width: 100%; height: 500px; } </style> </head> <body> <div id="map"></div> <script> var view = new ol.View({ center: ol.proj.fromLonLat([116.39, 39.9]), zoom: 13 }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=YOUR_TIAN_DITU_KEY', crossOrigin: 'anonymous', attributions: [ new ol.Attribution({ html: 'Map data © <a href="http://www.tianditu.gov.cn" target="_blank">Tianditu</a>' }) ] }) }) ], view: view }); </script> </body> </html> 请把 YOUR_TIAN_DITU_KEY 替换成你自己的天地图应用密钥，否则该代码不能正常工作。