arcgis 4.x 实现日光UI控制组件

官方示例链接 :https://developers.arcgis.com/javascript/latest/sample-code/widgets-daylight/index.html

1.首先要找到例子中的关键类 

 

 

  

        const daylightWidget = new Daylight({
          view: view,
          // plays the animation twice as fast than the default one
          playSpeedMultiplier: 2,
          // disable the timezone selection button
          visibleElements: {
            timezone: false
          }
        });
　　　　 view.ui.add(daylightWidget, "top-right");

创建类的实例对象情况  需要的参数只有一个视图参数

实例化对象类型貌似是一个dom

然后通过ui.add的方式加入到地图的工具层

随便提一句

view.ui.remove(daylightWidget);

这样可以移除dom 

适合用于工具栏的切换显示隐藏的功能

 

 

然后我们来了解一下 dayLight 类

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Daylight.html

 

const daylight = new Daylight({
  view: view,
  dateOrSeason: "", // 'season' || 'date' 是季节选择器还是日期
  timeSliderSteps: 60, // 每次拖动的时间间隔 60分钟 
  playSpeedMultiplier: 2, //动画速度
  visibleElements: {    // 控制隐藏显示
    timezone: false,          
    datePicker: false,
    playButtons: false,
    shadowsToggle: false
  }
});

 

OK 应该需要的都用到了。。

对了  还有view开启光影的配置

        const view = new SceneView({
          map: map,
          container: "viewDiv",
          environment: {
            atmosphere: {
              // creates a realistic view of the atmosphere
              quality: "high"
            },
            lighting: {
              // gets the current date at the user's location
              // and converts it to the local date in Brest, France
              date: new Date(),
              directShadowsEnabled: false
            }
          },
        });

上面的lighting 里面的配置就是光影配置 

date是时间

directShadowsEnabled是 是否显示建筑物阴影

view.environment.lighting.directShadowsEnabled = true;
view.environment.lighting.date = new Date();

这样定义开启阴影也是可以滴

 

取消阴影就把这个属性置空就OK了

 

OK 完结撒花