ol3之测试项目

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页面中，然后服务器环境打开即可调试

 

 

 

 

 

钻研不易，转载请注明出处。。。。。。

 

posted @ 2021-07-14 11:31  莫小龙  阅读(108)  评论(0)  编辑  收藏  举报