cesiumDemo/Apps/CesiumViewer/CesiumViewer.js

window.CESIUM_BASE_URL = '../../Source/';

// import {
//     Cartesian3,
//     createWorldTerrain,
//     defined,
//     formatError,
//     Math as CesiumMath,
//     objectToQuery,
//     queryToObject,
//     CzmlDataSource,
//     GeoJsonDataSource,
//     KmlDataSource,
//     TileMapServiceImageryProvider,
//     Viewer,
//     viewerCesiumInspectorMixin,
//     viewerDragDropMixin,
//     UrlTemplateImageryProvider,
//     WebMapTileServiceImageryProvider,
//     GeographicTilingScheme
// } from '../../Source/Cesium.js';
import * as Cesium from '../../Source/Cesium.js';
import{drawRectangle} from './rectangle.js'
window.Cesium = Cesium
var defined = Cesium.defined
var formatError = Cesium.formatError
var CesiumMath = Cesium.Math
var objectToQuery = Cesium.objectToQuery
var queryToObject = Cesium.queryToObject
var TileMapServiceImageryProvider = Cesium.TileMapServiceImageryProvider
var Viewer = Cesium.Viewer
var viewerCesiumInspectorMixin = Cesium.viewerCesiumInspectorMixin
var viewerDragDropMixin = Cesium.viewerDragDropMixin
var UrlTemplateImageryProvider = Cesium.UrlTemplateImageryProvider
var WebMapTileServiceImageryProvider = Cesium.WebMapTileServiceImageryProvider
var GeographicTilingScheme = Cesium.GeographicTilingScheme

// 创建热力图
function createHeatMap(max, data) {
    // 创建元素
    var heatDoc = document.createElement("div");
    heatDoc.setAttribute("style", "width:1000px;height:1000px;margin: 0px;display: none;");
    document.body.appendChild(heatDoc);
    // 创建热力图对象
    var heatmap = h337.create({
        container: heatDoc,
        radius: 20,
        maxOpacity: .5,
        minOpacity: 0,
        blur: .75,
        gradient: {
            '0.9': 'red',
            '0.8': 'orange',
            '0.7': 'yellow',
            '0.5': 'blue',
            '0.3': 'green',
        },
    });
    // 添加数据
    heatmap.setData({
        max: max,
        data: data
    });
    return heatmap;
}

// 创建正方形 绑定热力图 
function createRectangle(viewer, coordinate, heatMap) {
    viewer.entities.add({
        name: 'Rotating rectangle with rotating texture coordinate',
        show: true,
        rectangle: {
            coordinates:new Cesium.Rectangle(coordinate[0], coordinate[1], coordinate[2], coordinate[3]),  //Cesium.Rectangle.fromDegrees(coordinate[0], coordinate[1], coordinate[2], coordinate[3]),
            material: heatMap._renderer.canvas // 核心语句，填充热力图
        }
    });
}


// 生成len个随机数据
function getData(len) {
    //构建一些随机数据点
    var points = [];
    var max = 0;
    var width = 1000;
    var height = 1000;
    while (len--) {
        var val = Math.floor(Math.random() * 500);
        max = Math.max(max, val);
        var point = {
            x: Math.floor(Math.random() * width),
            y: Math.floor(Math.random() * height),
            value: val
        };
        points.push(point);
    }
    return {
        max: max,
        data: points
    }
}

function main() {
    /*
     Options parsed from query string:
       source=url          The URL of a CZML/GeoJSON/KML data source to load at startup.
                           Automatic data type detection uses file extension.
       sourceType=czml/geojson/kml
                           Override data type detection for source.
       flyTo=false         Don't automatically fly to the loaded source.
       tmsImageryUrl=url   Automatically use a TMS imagery provider.
       lookAt=id           The ID of the entity to track at startup.
       stats=true          Enable the FPS performance display.
       inspector=true      Enable the inspector widget.
       debug=true          Full WebGL error reporting at substantial performance cost.
       theme=lighter       Use the dark-text-on-light-background theme.
       scene3DOnly=true    Enable 3D only mode.
       view=longitude,latitude,[height,heading,pitch,roll]
                           Automatically set a camera view. Values in degrees and meters.
                           [height,heading,pitch,roll] default is looking straight down, [300,0,-90,0]
       saveCamera=false    Don't automatically update the camera view in the URL when it changes.
     */
    var endUserOptions = queryToObject(window.location.search.substring(1));

    var imageryProvider;
    if (defined(endUserOptions.tmsImageryUrl)) {
        imageryProvider = new TileMapServiceImageryProvider({
            url: endUserOptions.tmsImageryUrl
        });
    }

    var loadingIndicator = document.getElementById('loadingIndicator');
    var viewer;
    try {
        // var hasBaseLayerPicker = !defined(imageryProvider);
        // viewer = new Viewer('cesiumContainer', {
        //     imageryProvider : imageryProvider,
        //     baseLayerPicker : hasBaseLayerPicker,
        //     scene3DOnly : endUserOptions.scene3DOnly,
        //     requestRenderMode : true
        // });

        // if (hasBaseLayerPicker) {
        //     var viewModel = viewer.baseLayerPicker.viewModel;
        //     viewModel.selectedTerrain = viewModel.terrainProviderViewModels[1];
        // } else {
        //     viewer.terrainProvider = createWorldTerrain({
        //         requestWaterMask: true,
        //         requestVertexNormals: true
        //     });
        // }

        var Google = new UrlTemplateImageryProvider({
            url: "http://mt3.google.cn/vt/lyrs=y@110&hl=zh-CN&gl=cn&src=app&x={x}&y={y}&z={z}&s=Ga",
        })

        var TianDiTu = new WebMapTileServiceImageryProvider({
            url: "http://{s}.tianditu.gov.cn/img_c/wmts?tk=4bbbafdfeca49cb6fb5efb1a40164445&service=wmts&request=GetTile&version=1.0.0" +
                "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
                "&style=default&format=tiles",
            layer: "tdtImg_c",
            style: "default",
            format: "tiles",
            tileMatrixSetID: "c",
            subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
            tilingScheme: new GeographicTilingScheme(),
            tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
            maximumLevel: 50,
            show: false
        })

        TianDiTu = new WebMapTileServiceImageryProvider({
            url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=4bbbafdfeca49cb6fb5efb1a40164445',
            layer: 'img',
            style: 'default',
            tileMatrixSetID: 'w',
            format: 'tiles',
            maximumLevel: 18
        });

        var PBF = createMVTWithStyle(Cesium, ol, createMapboxStreetsV6Style, {
            //url: '/static/poi/{z}/{x}/{y}.pbf',
            url: 'http://localhost:8080/wts/poi/{z}/{x}/{y}',
            //url:"https://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/{z}/{x}/{y}.vector.pbf?access_token={k}",
            key: "pk.eyJ1IjoibXV5YW8xOTg3IiwiYSI6ImNpcm9ueHd6cjAwNzZoa20xazY1aWlubjIifQ.5tLtC5j1rh8Eqjlyrq3OaA"

        });


        viewer = window.viewer = new Viewer('cesiumContainer', {
            resolutionScale: 1,
            terrainProviderViewModels: [],
            animation: false, //动画控制不显示     
            baseLayerPicker: false,
            fullscreenButton: false, //全屏按钮,默认显示true
            geocoder: false, //地名查找,默认true
            timeline: false, //时间线,默认true
            vrButton: false, //双屏模式,默认不显示false
            homeButton: true, //主页按钮，默认true
            infoBox: false, //点击要素之后显示的信息,默认true
            selectionIndicator: false, //选中元素显示,默认true
            sceneModePicker: false, //是否显示投影方式控件
            navigationHelpButton: true, //是否显示帮助信息控件
            maximumRenderTimeChange: Infinity,
            requestRenderMode: true,
            imageryProvider: Google,
        });

        viewer.scene.debugShowFramesPerSecond = true;
        viewer.scene.screenSpaceCameraController.enableTranslate = false;
        viewer.scene.screenSpaceCameraController.enableTilt = false;
        viewer.scene.screenSpaceCameraController.enableLook = false;
        viewer.scene.screenSpaceCameraController.enableCollisionDetection = false;

        //var imageryLayers = viewer.imageryLayers;
        //imageryLayers.addImageryProvider(PBF);


        viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(113.07242100, 22.58652789, 1000.0),
            orientation: {
                heading: 5.205384767667713,
                pitch: -1.0220630084744524,
                roll: 6.27919703978724
            }
        })

        // 第一个热力图
        // var coordinate1 = [1.9733857532084744,  0.39425835263667813,  1.9733970408057608,  0.39426568435545245];
        // var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data);
        // createRectangle(viewer, coordinate1, heatMap1);

        // 第二个热力图
        // var coordinate2 = [-109.0, 30.0, -80.0, 41.0];
        // var heatMap2 = createHeatMap(getData(3000).max, getData(3000).data);
        // createRectangle(viewer, coordinate2, heatMap2);

        // // 第三个热力图
        // var coordinate3 = [-109.0, 41.0, -80.0, 50.0];
        // var heatMap3 = createHeatMap(getData(5000).max, getData(5000).data);
        // createRectangle(viewer, coordinate3, heatMap3);


        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    
        drawRectangle(Cesium,viewer,handler,function(coords){
            console.log(coords)
            var heatMap1 = createHeatMap(getData(1000).max, getData(1000).data);
            createRectangle(viewer, [coords.west,coords.south,coords.east,coords.north], heatMap1);
        })


    } catch (exception) {
        loadingIndicator.style.display = 'none';
        var message = formatError(exception);
        console.error(message);
        if (!document.querySelector('.cesium-widget-errorPanel')) {
            window.alert(message); //eslint-disable-line no-alert
        }
        return;
    }

    viewer.extend(viewerDragDropMixin);
    if (endUserOptions.inspector) {
        viewer.extend(viewerCesiumInspectorMixin);
    }

    var showLoadError = function (name, error) {
        var title = 'An error occurred while loading the file: ' + name;
        var message = 'An error occurred while loading the file, which may indicate that it is invalid.  A detailed error report is below:';
        viewer.cesiumWidget.showErrorPanel(title, message, error);
    };

    viewer.dropError.addEventListener(function (viewerArg, name, error) {
        showLoadError(name, error);
    });

    var scene = viewer.scene;
    var context = scene.context;
    if (endUserOptions.debug) {
        context.validateShaderProgram = true;
        context.validateFramebuffer = true;
        context.logShaderCompilation = true;
        context.throwOnWebGLError = true;
    }

    // var view = endUserOptions.view;
    // var source = endUserOptions.source;
    // if (defined(source)) {
    //     var sourceType = endUserOptions.sourceType;
    //     if (!defined(sourceType)) {
    //         // autodetect using file extension if not specified
    //         if (/\.czml$/i.test(source)) {
    //             sourceType = 'czml';
    //         } else if (/\.geojson$/i.test(source) || /\.json$/i.test(source) || /\.topojson$/i.test(source)) {
    //             sourceType = 'geojson';
    //         } else if (/\.kml$/i.test(source) || /\.kmz$/i.test(source)) {
    //             sourceType = 'kml';
    //         }
    //     }

    //     var loadPromise;
    //     if (sourceType === 'czml') {
    //         loadPromise = CzmlDataSource.load(source);
    //     } else if (sourceType === 'geojson') {
    //         loadPromise = GeoJsonDataSource.load(source);
    //     } else if (sourceType === 'kml') {
    //         loadPromise = KmlDataSource.load(source, {
    //             camera: scene.camera,
    //             canvas: scene.canvas
    //         });
    //     } else {
    //         showLoadError(source, 'Unknown format.');
    //     }

    //     if (defined(loadPromise)) {
    //         viewer.dataSources.add(loadPromise).then(function (dataSource) {
    //             var lookAt = endUserOptions.lookAt;
    //             if (defined(lookAt)) {
    //                 var entity = dataSource.entities.getById(lookAt);
    //                 if (defined(entity)) {
    //                     viewer.trackedEntity = entity;
    //                 } else {
    //                     var error = 'No entity with id "' + lookAt + '" exists in the provided data source.';
    //                     showLoadError(source, error);
    //                 }
    //             } else if (!defined(view) && endUserOptions.flyTo !== 'false') {
    //                 viewer.flyTo(dataSource);
    //             }
    //         }).otherwise(function (error) {
    //             showLoadError(source, error);
    //         });
    //     }
    // }

    if (endUserOptions.stats) {
        scene.debugShowFramesPerSecond = true;
    }

    var theme = endUserOptions.theme;
    if (defined(theme)) {
        if (endUserOptions.theme === 'lighter') {
            document.body.classList.add('cesium-lighter');
            viewer.animation.applyThemeChanges();
        } else {
            var error = 'Unknown theme: ' + theme;
            viewer.cesiumWidget.showErrorPanel(error, '');
        }
    }

    // if (defined(view)) {
    //     var splitQuery = view.split(/[ ,]+/);
    //     if (splitQuery.length > 1) {
    //         var longitude = !isNaN(+splitQuery[0]) ? +splitQuery[0] : 0.0;
    //         var latitude = !isNaN(+splitQuery[1]) ? +splitQuery[1] : 0.0;
    //         var height = ((splitQuery.length > 2) && (!isNaN(+splitQuery[2]))) ? +splitQuery[2] : 300.0;
    //         var heading = ((splitQuery.length > 3) && (!isNaN(+splitQuery[3]))) ? CesiumMath.toRadians(+splitQuery[3]) : undefined;
    //         var pitch = ((splitQuery.length > 4) && (!isNaN(+splitQuery[4]))) ? CesiumMath.toRadians(+splitQuery[4]) : undefined;
    //         var roll = ((splitQuery.length > 5) && (!isNaN(+splitQuery[5]))) ? CesiumMath.toRadians(+splitQuery[5]) : undefined;

    //         viewer.camera.setView({
    //             destination: Cartesian3.fromDegrees(longitude, latitude, height),
    //             orientation: {
    //                 heading: heading,
    //                 pitch: pitch,
    //                 roll: roll
    //             }
    //         });
    //     }
    // }

    var camera = viewer.camera;

    function saveCamera() {
        var position = camera.positionCartographic;
        var hpr = '';
        if (defined(camera.heading)) {
            hpr = ',' + CesiumMath.toDegrees(camera.heading) + ',' + CesiumMath.toDegrees(camera.pitch) + ',' + CesiumMath.toDegrees(camera.roll);
        }
        endUserOptions.view = CesiumMath.toDegrees(position.longitude) + ',' + CesiumMath.toDegrees(position.latitude) + ',' + position.height + hpr;
        history.replaceState(undefined, '', '?' + objectToQuery(endUserOptions));
    }

    var timeout;
    if (endUserOptions.saveCamera !== 'false') {
        camera.changed.addEventListener(function () {
            window.clearTimeout(timeout);
            timeout = window.setTimeout(saveCamera, 1000);
        });
    }

    loadingIndicator.style.display = 'none';
}

main();