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(/[
]/g, "").split(' ');
                var coords = $(feature).find('coordinates');
                let coordCollection = [];
                for (let i = 0; i < coords.length; i++) {
                    let coordinate = $(coords[i]).text().trim().replace(/[
]/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;
                }
            });
        }