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页面中，然后服务器环境打开即可调试
钻研不易，转载请注明出处。。。。。。