cesium-study
/
74.动态修改-未测试.html

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <title>Hello World!</title>
    <script src="Build/Cesium/Cesium.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        @import url(Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="cesiumContainer"></div>
    <div id='tool' style="float:left;position:absolute;left:10px;top:10px;"></div>
    <script src='./js/baiduMap.js'> </script>
    <script src='./js/CreateTestBtn.js'> </script>
    <script>


        var imageryProvider = new BaiduImageryProvider({
            url: "http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z}&styles=pl&scaler=1&p=1",
        });
        //加载高德/百度影像地图，UrlTemplateImageryProvider该接口是加载谷歌地图服务的接口
        var imageryProvider1 = new Cesium.UrlTemplateImageryProvider({
            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
            layer: "tdtVecBasicLayer",
            style: "default",
            format: "image/png",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false
        });

        viewer = new Cesium.Viewer("cesiumContainer", {
            imageryProvider: imageryProvider
        });

        //////////////////////
        //取消双击事件
        viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
        //设置默认地图源
        viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[6];
        //设置homebutton的位置
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
            Cesium.Rectangle.fromDegrees(110.15, 34.54, 110.25, 34.56);//Rectangle(west, south, east, north)
        //设置初始位置
        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 3000000)
        });
        var positionWord = [];
        positionWord.push(Cesium.Cartesian3.fromDegrees(110.20, 34.55, 0));
        positionWord.push(Cesium.Cartesian3.fromDegrees(115.20, 34.55, 0));
        positionWord.push(Cesium.Cartesian3.fromDegrees(115.20, 39.55, 0));
        var pr = new changeLinePrimitive({ positions: positionWord })
        console.log(pr)
        viewer.scene.primitives.add(pr);

        var editFlag = false
        var moveFlag = false//当点击的点是bill时，开始变动primitive
        var billEntity = []//记录添加的折点entity
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        var dragId = -1
        handler.setInputAction(function (movement) {
            var pick = viewer.scene.pick(movement.position);
            console.log(pick)
            if (pick) {
                //pick的是bill-有leaf_down来处理逻辑，否则，添加mark
                if (pick.id != null && pick.id.name == "bill") {

                }
                else {
                    editFlag = true
                    var pos = pick.primitive.geometryInstances.geometry._positions
                    removeMarkEntity(billEntity)
                    billEntity = []
                    addMark(pos)
                    dragId = -1
                }
            }
            //没有选中任何实体
            else {
                removeMarkEntity(billEntity)
                initeventParams()
            }


        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        handler.setInputAction(function (movement) {

            if (moveFlag && dragId != -1) {
                let ray = viewer.camera.getPickRay(movement.endPosition);
                let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
                pr.positions[dragId] = cartesian
                let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                let longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(3);
                let latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(3);
                billEntity[dragId].position = new Cesium.CallbackProperty(function () {
                    return Cesium.Cartesian3.fromDegrees(longitudeString, latitudeString, 0);
                }, false);//防止闪烁，在移动的过程)
            }

        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        function initeventParams() {
            dragId = -1
            billEntity = []
            editFlag = false
            moveFlag = false
            viewer.scene.screenSpaceCameraController.enableRotate = true;//恢复相机状态

        }
        handler.setInputAction(function (movement) {
            var pick = viewer.scene.pick(movement.position);
            if (pick) {
                //pick的是bill
                if (pick.id != null && pick.id.name == "bill") {
                    console.log("相机锁定")
                    dragId = pick.id.id.split("-")[1]
                    moveFlag = true
                    viewer.scene.screenSpaceCameraController.enableRotate = false;//锁定相机
                }
            }

        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
        //左键弹起，仅仅标志拖动结束，但仍可能继续编辑
        handler.setInputAction(
            function (movement) {
                moveFlag = false
            }, Cesium.ScreenSpaceEventType.LEFT_UP);

        function addMark(positions) {
            var bill = {
                show: true,
                pixelOffset: new Cesium.Cartesian2(0, 0),
                eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                verticalOrigin: Cesium.VerticalOrigin.CENTER,
                scale: 2.0,
                image: "./sampledata/images/dragIcon.png",
                color: new Cesium.Color(1.0, 1.0, 1.0, 1.0)
            }
            var entity
            positions.map((v, index) => {
                console.log(index)
                var cartesian3 = new Cesium.Cartesian3(v.x, v.y, v.z);
                var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3);

                var lat = Cesium.Math.toDegrees(cartographic.latitude);
                var lng = Cesium.Math.toDegrees(cartographic.longitude);
                var height = Cesium.Math.toDegrees(cartographic.height);

                entity = viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(lng, lat, height),
                    billboard: bill,
                    name: "bill",
                    id: "bill-" + index
                })
                billEntity.push(entity)


            })

        }
        function removeMarkEntity(entities) {
            entities.map(v => {
                viewer.entities.remove(v)
            })
        }

    </script>
</body>

</html>