Cesium 學習小結（一）

1.加載3dtile數據（url是3dtile數據配置文件，proxy可能存在跨域所需要的代理） 

        //加載3dtiles
        function add3DTiles(url, proxy) {
            var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: new Cesium.Resource({
                    url: url,
                    proxy: new Cesium.DefaultProxy(proxy)
                })
            }));
            return tileset;
        }

        //定位到三維瓦片模型

        viewer.zoomTo(dytTiles);

2.3dtile單體化（二次開發方法，非原生）

viewer是 var viewer = new Cesium.Map("cesiumContainer")的初始化球體

dytTiles是上述加載完成的3dtile數據

data是單體化數據，遵循geojson格式

        //單體化3d tiles
        function dth_3dtiles(data) {
            tilesetMonomer_dyt = new Cesium.Cesium3DTilesetMonomer({
                viewer: viewer,
                tileset: dytTiles,
                moveColor: Cesium.Color.fromBytes(255, 50, 50, 122),//移動時的顏色，紅色
                selectedColor: Cesium.Color.fromBytes(50, 255, 50, 122),//選中的顏色，綠色
                source: { type: "geojson", data: data }
            });
            //選中事件，回調
            tilesetMonomer_dyt.seletedEvent.addEventListener(function (feature) {
                console.log(feature.id.description);
            }, tilesetMonomer_dyt);
        }

3.利用加載的3dtile數據定位

        //定位
        function location3DTiles(flag) {
            var tileset = null;
            if (flag == "dyt") {
                tileset = dytTiles;
            }
            viewer.camera.viewBoundingSphere(tileset.boundingSphere, new Cesium.HeadingPitchRange(0, -1, 0));
            viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        }

4.將xml解析並序列化為Object對象

    //將xml解析並序列化為Object對象
        function parserFeature(res) {
            var features = parserXml(res);
            var length = features.length;
            var featureCollection = [];
            for (var i = 0; i < length; i++) {
                var feature = features[i];
                var attribute = $(feature).children().children();
                var properties = parserAttribute(attribute);
                var type;
                try {
                    type = $(attribute[1]).children()[0].nodeName;
                }
                catch (e) {
                    attribute = $(feature).children();
                    properties = parserAttribute(attribute);
                    type = $(attribute[1]).children()[0].nodeName;
                }
                //var coords = $(feature).find('coordinates').text().trim().replace(/[\r\n]/g, "").split(' ');
                var coords = $(feature).find('coordinates');
                let coordCollection = [];
                for (let i = 0; i < coords.length; i++) {
                    let coordinate = $(coords[i]).text().trim().replace(/[\r\n]/g, "").split(' ');
                    var coordinates = [];
                    coordinate.forEach(function (c) {
                        if (c != '') {
                            var xy = c.split(',');
                            coordinates.push([Number(xy[0]), Number(xy[1])]);
                        }
                    });
                    coordCollection.push(coordinates);
                }
                //continue;
                //   type = titleCase(type);
                switch (type) {
                    case "POLYGON":
                        type = 'Polygon';
                        break;
                    case "MULTIPOLYGON":
                        type = 'MultiPolygon';
                        break;
                }
                featureCollection.push({
                    type: "Feature",
                    properties: properties,
                    geometry: {
                        type: type,
                        coordinates: coordCollection
                    }
                });
            }
            return featureCollection;
        }
        //大寫變小寫，首字符大寫
        function titleCase(str) {
            var array = str.toLowerCase().split(" ");
            for (var i = 0; i < array.length; i++) {
                array[i] = array[i][0].toUpperCase() + array[i].substring(1, array[i].length);
            }
            var string = array.join(" ");
            return string;
        }
        //地圖服務數據解析
        function parserXml(xml) {
            if (typeof xml == 'string') {
                var result = xml.replace(/gml:/g, '');
                var features = $(result).find('featureMember');
                return features;
            }
        }
        //屬性數據解析
        function parserAttribute(attribute) {
            var attri = {};
            var len = attribute.length;
            for (var i = 0; i < len; i++) {
                attri[attribute[i].tagName] = attribute[i].textContent;
            }
            return attri;
        }

 5.添加鼠標監聽事件（左鍵點擊事件）

        function LEFT_CLICK_EVENT() {
            var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                var pick = viewer.scene.pick(movement.position);
                if (Cesium.defined(pick)) {
                    if (pick.id) {
                    }
                    //將笛卡爾坐標轉化為經緯度坐標
                    var position = viewer.scene.pickPosition(movement.position);
                    var cartographic = Cesium.Cartographic.fromCartesian(position);
                    var longitude = Cesium.Math.toDegrees(cartographic.longitude);
                    var latitude = Cesium.Math.toDegrees(cartographic.latitude);
                    var height = cartographic.height;
                    console.log(longitude, latitude, height)
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }

6.添加鍵盤監聽事件

        //監聽鍵盤 上下左右鍵
        document.addEventListener('keydown', function (e) {
            switch (e.key) {
                case "ArrowUp":
                    geoWalkerCamera.setState(Cesium.GeoWalkerCamera.stateType.FORWARD);
                    break;
                case "ArrowDown":
                    geoWalkerCamera.setState(Cesium.GeoWalkerCamera.stateType.BACKWARD);
                    break;
                case "ArrowRight":
                    geoWalkerCamera.setState(Cesium.GeoWalkerCamera.stateType.RIGHTWARD);
                    break;
                case "ArrowLeft":
                    geoWalkerCamera.setState(Cesium.GeoWalkerCamera.stateType.LEFTWARD);
                    break;
            }
        });
        document.addEventListener('keyup', function (e) {
            geoWalkerCamera.setState(Cesium.GeoWalkerCamera.stateType.UNKNOWN);
        });

7.添加多個坐標點（帶圖片）

        var PinEntity = [{
            name: '火車站',
            height: 10,
            X: 116.45156863630663,
            Y: 39.83877132038353,
            ID: 'point1'
        }, {
            name: '1號檢票口',
            height: 20,
            X: 116.45176322518964,
            Y: 39.83796628645802,
            ID: 'point2'
        }, {
            name: '2號檢票口',
            height: 30,
            X: 116.45176382932064,
            Y: 39.83796605790282,
            ID: 'point3'
        }, {
            name: '進站口',
            height: 22.4,
            X: 116.45156325783579,
            Y: 39.83826111747644,
            ID: 'point4'
        }]
        function createPinEntity() {
            var url = Cesium.buildModuleUrl('location.png');
            var groceryPin = Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.GREEN, 48), function (canvas) {
                for (var i = 0; i < PinEntity.length; i++) {
                    var entity = PinEntity[i];
                    let target = viewer.entities.add({
                        id: entity.ID,
                        position: Cesium.Cartesian3.fromDegrees(entity.X, entity.Y, entity.height),
                        billboard: {
                            image: canvas.toDataURL(),
                            verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                        }
                    });
                    target.infomation = entity;
                }
            });
        }