|
@@ -0,0 +1,395 @@
|
|
|
+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();
|