<%@ page language="java" contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fastboot" prefix="fb"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<fb:ui src="base/main2">
    <fb:property name="title"></fb:property>
    <fb:script type="text/javascript" src='${base}/static/cesium/Cesium.js'></fb:script>
    <fb:script type="text/javascript" src='http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js'></fb:script>
    <fb:script type="text/javascript" src='http://api.tianditu.gov.cn/api?v=4.0&tk=e95115c454a663cd052d96019fd83840'></fb:script>
    <fb:css href="${base}/static/cesium/Widgets/widgets.css"></fb:css>
    <fb:script type="text/javascript">
        <script>

            layui.use([ 'tool', 'form', 'table'], function() {
                var token = 'e95115c454a663cd052d96019fd83840';
                // 服务域名
                var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
                // 服务负载子域
                var subdomains=['0','1','2','3','4','5','6','7'];

                // cesium 初始化
                var viewer = new Cesium.Map('cesiumContainer', {
                    animation: false,
                    vrButton: false, // VR模式
                    sceneModePicker: false,
                    baseLayerPicker: false,
                    shouldAnimate: true,
                    selectionIndicator:true,
                    infoBox:true,
                    homeButton: true
                });

                // 叠加影像服务
                var imgMap = new Cesium.UrlTemplateImageryProvider({
                    url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
                    subdomains: subdomains,
                    tilingScheme : new Cesium.WebMercatorTilingScheme(),
                    maximumLevel : 18
                });
                viewer.imageryLayers.addImageryProvider(imgMap);


                // 叠加地形服务
                var terrainUrls = new Array();

                for (var i = 0; i < subdomains.length; i++){
                    var url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token;
                    terrainUrls.push(url);
                }

                var provider = new Cesium.GeoTerrainProvider({
                    urls: terrainUrls
                });

                viewer.terrainProvider = provider;

                // 将三维球定位到中国
                viewer.camera.flyTo({
                    destination: Cesium.Cartesian3.fromDegrees(113.0978, 23.6697, 350000),
                    orientation: {
                        heading :  Cesium.Math.toRadians(348.4202942851978),
                        pitch : Cesium.Math.toRadians(-89.74026687972041),
                        roll : Cesium.Math.toRadians(0)
                    },
                    complete:function callback() {
                        // 定位完成之后的回调函数
                    }
                });

                // 叠加三维地名服务
                var wtfs = new Cesium.GeoWTFS({
                    viewer,
                    subdomains:subdomains,
                    metadata:{
                        boundBox: {
                            minX: -180,
                            minY: -90,
                            maxX: 180,
                            maxY: 90
                        },
                        minLevel: 1,
                        maxLevel: 20
                    },
                    aotuCollide: true, //是否开启避让
                    collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
                    serverFirstStyle: true, //服务端样式优先
                    labelGraphics: {
                        font:"28px sans-serif",
                        fontSize: 28,
                        fillColor:Cesium.Color.WHITE,
                        scale: 0.5,
                        outlineColor:Cesium.Color.BLACK,
                        outlineWidth: 5,
                        style:Cesium.LabelStyle.FILL_AND_OUTLINE,
                        showBackground:false,
                        backgroundColor:Cesium.Color.RED,
                        backgroundPadding:new Cesium.Cartesian2(10, 10),
                        horizontalOrigin:Cesium.HorizontalOrigin.MIDDLE,
                        verticalOrigin:Cesium.VerticalOrigin.TOP,
                        eyeOffset:Cesium.Cartesian3.ZERO,
                        pixelOffset:new Cesium.Cartesian2(0, 8)
                    },
                    billboardGraphics: {
                        horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin:Cesium.VerticalOrigin.CENTER,
                        eyeOffset:Cesium.Cartesian3.ZERO,
                        pixelOffset:Cesium.Cartesian2.ZERO,
                        alignedAxis:Cesium.Cartesian3.ZERO,
                        color:Cesium.Color.WHITE,
                        rotation:0,
                        scale:1,
                        width:18,
                        height:18
                    }
                });

                //三维地名服务，使用wtfs服务
                wtfs.getTileUrl = function(){
                    return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token;
                }

                wtfs.initTDT([{"x":6,"y":1,"level":2,"boundBox":{"minX":90,"minY":0,"maxX":135,"maxY":45}},{"x":7,"y":1,"level":2,"boundBox":{"minX":135,"minY":0,"maxX":180,"maxY":45}},{"x":6,"y":0,"level":2,"boundBox":{"minX":90,"minY":45,"maxX":135,"maxY":90}},{"x":7,"y":0,"level":2,"boundBox":{"minX":135,"minY":45,"maxX":180,"maxY":90}},{"x":5,"y":1,"level":2,"boundBox":{"minX":45,"minY":0,"maxX":90,"maxY":45}},{"x":4,"y":1,"level":2,"boundBox":{"minX":0,"minY":0,"maxX":45,"maxY":45}},{"x":5,"y":0,"level":2,"boundBox":{"minX":45,"minY":45,"maxX":90,"maxY":90}},{"x":4,"y":0,"level":2,"boundBox":{"minX":0,"minY":45,"maxX":45,"maxY":90}},{"x":6,"y":2,"level":2,"boundBox":{"minX":90,"minY":-45,"maxX":135,"maxY":0}},{"x":6,"y":3,"level":2,"boundBox":{"minX":90,"minY":-90,"maxX":135,"maxY":-45}},{"x":7,"y":2,"level":2,"boundBox":{"minX":135,"minY":-45,"maxX":180,"maxY":0}},{"x":5,"y":2,"level":2,"boundBox":{"minX":45,"minY":-45,"maxX":90,"maxY":0}},{"x":4,"y":2,"level":2,"boundBox":{"minX":0,"minY":-45,"maxX":45,"maxY":0}},{"x":3,"y":1,"level":2,"boundBox":{"minX":-45,"minY":0,"maxX":0,"maxY":45}},{"x":3,"y":0,"level":2,"boundBox":{"minX":-45,"minY":45,"maxX":0,"maxY":90}},{"x":2,"y":0,"level":2,"boundBox":{"minX":-90,"minY":45,"maxX":-45,"maxY":90}},{"x":0,"y":1,"level":2,"boundBox":{"minX":-180,"minY":0,"maxX":-135,"maxY":45}},{"x":1,"y":0,"level":2,"boundBox":{"minX":-135,"minY":45,"maxX":-90,"maxY":90}},{"x":0,"y":0,"level":2,"boundBox":{"minX":-180,"minY":45,"maxX":-135,"maxY":90}}]);


                // 叠加广东地块服务
                var gridsetName = 'EPSG:3857';
                var gridNames = [];
                for(let i=0;i<=30;i++){
                    gridNames.push(i)
                }
                var iboMap = new Cesium.WebMapTileServiceImageryProvider({
                    url : '${geoserver}/gwc/service/wmts/rest/wuhan:gdcityland30/{style}/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}?format=image/png',
                    layer:'wuhan:gdcityland30',
                    format: "image/png",
                    style:'',
                    maximumLevel: gridNames.length,
                    tileMatrixSetID:gridsetName,
                    tileMatrixLabels:gridNames,
                    tilingScheme:new Cesium.WebMercatorTilingScheme()
                });
                viewer.imageryLayers.addImageryProvider(iboMap);


            })
        </script>
    </fb:script>
    <fb:layout>
        <style>
            html, body, #cesiumContainer {
                width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
            }
        </style>
        <div id="cesiumContainer"></div>
    </fb:layout>
</fb:ui>



