一、坐标系

地理坐标系

cesium中的几种坐标系

链接: Cesium中的几种坐标和相互转换

viewer.flyTo

代码封装

在这里插入图片描述
代码封装的完整方法，如下：

const renderLayer = (model, filterKey) => {
    // 关闭overlay
    closePopup();
    dispatch({
      type: 'cesiumLayers/setState',
      payload: { clickInfo: undefined, hoverInfo: undefined },
    });
    // 移除全部图层 便于添加新图层
    removeAllLayer(filterKey);
    const endLayerKey = filterKey[filterKey.length - 1];
    const endLayerOpt = MajorLayers.AllLayer[endLayerKey];
    /**
     * 1.basicMap为真
     */
    if (basicMap) {
      for (let i = 0; i < filterKey.length; i += 1) {
        const key = filterKey[i];
        const layerOpt = MajorLayers.AllLayer[key];
        if (layerOpt && layerOpt.hassublayers && layerOpt.sublayers) {
          addLayers(layerOpt.sublayers);
        } else {
          addLayers([key]);
        }
      }
      if (basicMap && endLayerOpt) {
        basicMap.fitTo(endLayerOpt.center, endLayerOpt.zoom);
      }
    }
    /**
     * 1.viewer为真
     */
    if (viewer) {
      for (let i = 0; i < filterKey.length; i += 1) {
        let key = filterKey[i];
        const layerOpt = MajorLayers.AllLayer[key];
        if (layerOpt && layerOpt.hassublayers && layerOpt.sublayers) {
          key = layerOpt.sublayers;
        } else {
          key = [key];
        }
        key.map((child) => {
          if (
            layers[child]?.type === 'ImageryLayer' &&
            !viewer.imageryLayers.contains(layers[child].data)
          ) {
            viewer.imageryLayers.add(layers[child].data);
          } else if (
            layers[child]?.type === 'GeoJsonDataSource' &&
            !viewer.dataSources.contains(layers[child].data)
          ) {
            viewer.dataSources.add(layers[child].data);
            const entities = layers[child].data.entities.values;
            enumRenderStyle(child, entities);
          } else if (layers[child]?.type === 'Entity') {
            const entityList = layers[child].data;
            entityList.map((listItem) => {
              if (!viewer.entities.contains(listItem)) {
                viewer.entities.add(listItem);
              }
            });
          }
        });
      }
      // 按照 坐标 移动位置
      if (endLayerOpt) {
        const range = Math.floor(3000000 / (endLayerOpt.zoom / 5)) || 3000000;
        viewer.camera.flyTo({
          destination: Cartesian3.fromDegrees(
            endLayerOpt.center.lng,
            endLayerOpt.center.lat,
            range,
          ), // 设置位置
          orientation: {
            heading: CesiumMath.toRadians(0),
            pitch: CesiumMath.toRadians(-90), // 倾斜角度
          },
        });
      }
    }
  };

二、网页通讯模块

PWA与ServiceWorker」构建渐进式Web 应用
链接: PWA与ServiceWorker
1.1主线程与工作线程
通常所讲的Service Worker指的是Service Worker线程。浏览器中执行的JavaScript文件是运行在一个单一的线程上，称之为主线程。而Service Worker是一种独立于浏览器主线程的工作线程，它与当前浏览器主线程是完全隔离的，且有自己独立的执行上下文。
1.2 PWA重要技术
ServiceWorker能提供一种良好的统筹机制对资源缓存和网络请求进行缓存和处理，是
PWA实现离线访问，稳定访问，静态资源缓存的一项重要技术。

PWA

在这里插入图片描述

ServiceWorker

H5提供了一个Service Worker API，能够进行Service Worker线程的注册、注销等工作，在该实例中，通过navigator. serviceWorker . register()方法，就能够注册一个Service Worker,在当前的浏览器主线程的基础上新起一一个Service Worker线程。
在这里插入图片描述