(정품)cesium-동적선 그리기(반짝임 해결)의 진격 연구 강좌

문서 목록

원인과 결과

효과도 선행

동적 선 그리기

사고방식

코드 및 효과도

동적선 연속 그리기

사고방식

코드 및 효과도

결론

원인과 결과

최근 프로젝트에서 벽체를 그려야 하고cesium이 제공하는 많은entity를 테스트한 결과 모두 무늬를 붙이는 단계에서 죽은 것을 발견했다.마지막으로 wall 실체를 사용하여 벽체를 그리는 데 타협했습니다.그 동안 무늬 스티커 효과, 고도 가리기, 동적 그리기 회선 반짝임 등 문제를 해결했고 동적 선 그리기 반짝임이 비교적 전형적임을 감안하여 (점, 선, 면, 상자 등 모든 실체의 동적 변화 문제와 무늬 스티커 문제를 해결한 것과 같다) 여기에 기록하여 참고하도록 하겠습니다.

효과도 선행

1 동적 스트라이프 깜박임 효과 2 연속 스트라이프 그리기 반짝임 3 텍스처 벽

동적 선 그리기

사고의 방향

마우스 클릭 시 선 엔티티 생성 – > 마우스 이동식, 제어선 좌표

코드 및 효과도

var line = undefined; //     
        var linearr = []; //      
        //        
        handler.setInputAction(function (event) {
            //           
            var pick = viewer.camera.getPickRay(event.position);
            var cartesian = scene.globe.pick(pick, viewer.scene);
            //         
            if (cartesian) {
                
                //        
                if (!line) {
                    linearr.push(cartesian)
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                              return linearr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        //        
        handler.setInputAction(function (event) {
          var pick = viewer.camera.getPickRay(event.endPosition);
          var cartesian = scene.globe.pick(pick, viewer.scene);
          if (cartesian) {
            if(line){
              //           ,linearr         ,      ,        
              linearr[1]=cartesian;               
            }
          }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

동적 선 연속 그리기

사고의 방향

우리는 이미 선이 마우스를 따라 움직일 때의 효과를 완성했다. 다음에 우리는 추론 추론을 진행해야 한다. 1: 마우스를 눌렀을 때 선로 그리기 추론을 할 수 있다. 2: 선로가 마우스를 따라 연속적으로 창설된다.

코드 및 효과도

상기 두 가지 조건에 대한 추론에 대해 다음과 같은 코드를 붙인다. (1) 먼저 추론 2 코드를 붙인다.

 var line = undefined; //     
        var linearr = []; //      
        //        
        handler.setInputAction(function (event) {
            //           
            var pick = viewer.camera.getPickRay(event.position);
            var cartesian = scene.globe.pick(pick, viewer.scene);
            //         
            if (cartesian) {
                
                //        
                if (!line) {
                    linearr.push(cartesian)
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                              return linearr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        //        
        handler.setInputAction(function (event) {
          var pick = viewer.camera.getPickRay(event.endPosition);
          var cartesian = scene.globe.pick(pick, viewer.scene);
          if (cartesian) {
            if(line){
              //           ,linearr         ,      ,        
              linearr[linearr.length]=cartesian;               
            }
          }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

(2) 추론 1 검증 코드:

var line = undefined; //     
        var linearr = []; //      
        //        
        handler.setInputAction(function (event) {
            //           
            var pick = viewer.camera.getPickRay(event.position);
            var cartesian = scene.globe.pick(pick, viewer.scene);
            //         
            if (cartesian) {
                linearr.push(cartesian)
                //        
                if (!line) {                   
                    line = viewer.entities.add({
                        polyline: {
                            positions:new Cesium.CallbackProperty(function () {         
                              return linearr;
                            }, false),
                            width: 3,
                            material: Cesium.Color.RED,
                            clampToGround: true,
                        }
                    })
                }
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        //        
        handler.setInputAction(function (event) {
          var pick = viewer.camera.getPickRay(event.endPosition);
          var cartesian = scene.globe.pick(pick, viewer.scene);
          if (cartesian) {
            if(line){
              debugger;
              //           ,linearr         ,      ,        
              linearr[linearr.length-1]=cartesian;      
              console.log(linearr) ;        
            }
          }
        },Cesium.ScreenSpaceEventType.MOUSE_MOVE);

결론

스티커 부분은 현재cesium가 잘하지 못하기 때문에 우리 스스로 업무 논리를 통해 조직해야 한다