使用supermap for JavaScript调用天地图服务

通过使用supermap for JavaScript可以简单调用天地图ogc服务
<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <title>天地图图层</title>
        <style type="text/css">
            body{
                margin: 0;
                overflow: hidden;
                background: #fff;
            }
            #map{
                position: relative;
                height: 100%;
                border:1px solid #3473b7;
            }
        </style>
<script src="http://api.map.baidu.com/api?v=2.0&ak=mbe4YwNSht6HyfqhmagsbLHp"></script>  
        <script src='libs/SuperMap.Include.js'></script>
        <script type="text/javascript">
            var map, layer,marker,map1,
            url1 = "http://t0.tianditu.com/vec_c/wmts",
url2 = "http://t0.tianditu.com/cva_c/wmts";
            function init(){
                map = new SuperMap.Map("map",{allOverlays:true,controls: [
                    new SuperMap.Control.ScaleLine(),
                    new SuperMap.Control.Zoom(),
                    new SuperMap.Control.Navigation({
                        dragPanOptions: {
                            enableKinetic: true
                        }
                    })]
                });


                //wmts或许所需要的matrixID信息
                var matrixIds = [];
                for (var i=0; i<22; ++i) {
                    matrixIds[i] = {identifier:i};
                };
                //当前图层的分辨率数组信息,和matrixIds一样，需要用户从wmts服务获取并明确设置,resolutions数组和matrixIds数组长度相同
                var resolutions = [1.40625,
            0.703125,
0.3515625,
0.17578125,
0.087890625,
0.0439453125,
0.02197265625,
0.010986328125,
0.0054931640625,
0.002746582031250001658728184138270372,
0.001373291015625000829364092069135186,
0.0006866455078124989180747465151294470,
0.0003433227539062494590373732575647235,
0.0001716613769531250288401465326699910,
0.00008583068847656251442007326633499548,
0.00004291534423828140687076658511131235,
0.00002145767211914064357109131177813033,
0.00001072883605957030681947266069468370,
0.000005364418029785168375809325541723313,
0.000002682209014892578201475464693109072,
0.000001341104507446289100737732346554536];
                //新建图层
                layer1 = new SuperMap.Layer.WMTS({name: "vec",
                    url: url1,
                    layer: "vec",
                    style: "default",
                    matrixSet: "c",
                    format: "tiles",
                    resolutions:resolutions,
                    matrixIds:matrixIds,
                    opacity: 1,
                    requestEncoding:"KVP"});

layer2 = new SuperMap.Layer.WMTS({name: "cva",
                    url: url2,
                    layer: "cva",
                    style: "default",
                    matrixSet: "c",
                    format: "tiles",
                    resolutions:resolutions,
                    matrixIds:matrixIds,
                    opacity: 1,
                    requestEncoding:"KVP"});
                var markerlayer = new SuperMap.Layer.Markers("markerLayer");
                //图层添加并显示指定级别
                map.addLayers([layer1,layer2,markerlayer]);
                map.setCenter(new SuperMap.LonLat(108.4, 22.8), 12);

//添加数据
var cx = document.getElementById("cx");
                   cx.addEventListener("click", function() {
   var x = document.getElementById("x").value; 
var y = document.getElementById("y").value; 
                    markerlayer.removeMarker(marker);
                    var size = new SuperMap.Size(44,33);
                    var offset = new SuperMap.Pixel(-(size.w/2), -size.h);
                    var icon = new SuperMap.Icon('theme/images/marker.png', size, offset);
                    marker =new SuperMap.Marker(new SuperMap.LonLat(x,y),icon) ;
                    markerlayer.addMarker(marker);
                });
            }
        </script>
    </head>
    <body οnlοad="init()">
     x:<input type="text"  id="x"/>
 y:<input type="text"  id="y"/>
     <input type="button"  value="查询" id="cx"/>
         <div id="map"></div>

    </body>
</html>
使用supermap for JavaScript调用天地图服务

猜你喜欢
