From 22fbd5d5efb33bfbbc10cb115ee5f9bff795cdac Mon Sep 17 00:00:00 2001 From: tengge1 <930372551@qq.com> Date: Mon, 25 Mar 2019 19:51:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9Globe=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ShadowEditor.Web/src/gis2/Globe.js | 293 ++++++++++----------- ShadowEditor.Web/src/gis2/ZeroGIS.js | 4 +- ShadowEditor.Web/src/gis2/build/gis2.js | 9 + ShadowEditor.Web/src/gis2/index.html | 72 ++--- ShadowEditor.Web/src/gis2/index.js | 109 +++----- ShadowEditor.Web/src/gis2/rollup.config.js | 12 + package.json | 3 +- 7 files changed, 230 insertions(+), 272 deletions(-) create mode 100644 ShadowEditor.Web/src/gis2/build/gis2.js create mode 100644 ShadowEditor.Web/src/gis2/rollup.config.js diff --git a/ShadowEditor.Web/src/gis2/Globe.js b/ShadowEditor.Web/src/gis2/Globe.js index b16e2e38..f8888795 100644 --- a/ShadowEditor.Web/src/gis2/Globe.js +++ b/ShadowEditor.Web/src/gis2/Globe.js @@ -1,11 +1,7 @@ /** * 地球 */ -ZeroGIS.Globe = function (canvas, args) { - if (!(canvas instanceof HTMLCanvasElement)) { - throw "invalid canvas: not HTMLCanvasElement"; - } - args = args || {}; +function Globe(canvas) { ZeroGIS.globe = this; this.MAX_LEVEL = 15; //最大的渲染级别15 this.CURRENT_LEVEL = -1; //当前渲染等级 @@ -18,166 +14,169 @@ ZeroGIS.Globe = function (canvas, args) { var vs_content = ZeroGIS.ShaderContent.SIMPLE_SHADER.VS_CONTENT; var fs_content = ZeroGIS.ShaderContent.SIMPLE_SHADER.FS_CONTENT; this.renderer = ZeroGIS.renderer = new ZeroGIS.WebGLRenderer(canvas, vs_content, fs_content); + this.scene = new ZeroGIS.Scene(); + var radio = canvas.width / canvas.height; this.camera = new ZeroGIS.PerspectiveCamera(30, radio, 1.0, 20000000.0); + this.renderer.bindScene(this.scene); this.renderer.bindCamera(this.camera); + this.setLevel(0); + this.renderer.setIfAutoRefresh(true); ZeroGIS.Event.initLayout(); }; -ZeroGIS.Globe.prototype = { - constructor: ZeroGIS.Globe, +Globe.prototype.setTiledLayer = function (tiledLayer) { + if (!(tiledLayer instanceof ZeroGIS.TiledLayer)) { + throw "invalid tiledLayer: not World.TiledLayer"; + } - setTiledLayer: function (tiledLayer) { - if (!(tiledLayer instanceof ZeroGIS.TiledLayer)) { - throw "invalid tiledLayer: not World.TiledLayer"; + clearTimeout(this.idTimeOut); + //在更换切片图层的类型时清空缓存的图片 + ZeroGIS.Image.clear(); + if (this.tiledLayer) { + var b = this.scene.remove(this.tiledLayer); + if (!b) { + console.error("this.scene.remove(this.tiledLayer)失败"); } + this.scene.tiledLayer = null; + } + this.tiledLayer = tiledLayer; + this.scene.add(this.tiledLayer); + //添加第0级的子图层 + var subLayer0 = new ZeroGIS.SubTiledLayer({ + level: 0 + }); + this.tiledLayer.add(subLayer0); - clearTimeout(this.idTimeOut); - //在更换切片图层的类型时清空缓存的图片 - ZeroGIS.Image.clear(); - if (this.tiledLayer) { - var b = this.scene.remove(this.tiledLayer); - if (!b) { - console.error("this.scene.remove(this.tiledLayer)失败"); - } - this.scene.tiledLayer = null; + //要对level为1的图层进行特殊处理，在创建level为1时就创建其中的全部的四个tile + var subLayer1 = new ZeroGIS.SubTiledLayer({ + level: 1 + }); + this.tiledLayer.add(subLayer1); + ZeroGIS.canvas.style.cursor = "wait"; + for (var m = 0; m <= 1; m++) { + for (var n = 0; n <= 1; n++) { + var args = { + level: 1, + row: m, + column: n, + url: "" + }; + args.url = this.tiledLayer.getImageUrl(args.level, args.row, args.column); + var tile = new ZeroGIS.Tile(args); + subLayer1.add(tile); } - this.tiledLayer = tiledLayer; - this.scene.add(this.tiledLayer); - //添加第0级的子图层 - var subLayer0 = new ZeroGIS.SubTiledLayer({ - level: 0 + } + ZeroGIS.canvas.style.cursor = "default"; + this.tick(); +}; + +Globe.prototype.setLevel = function (level) { + if (!ZeroGIS.Utils.isInteger(level)) { + throw "invalid level"; + } + if (level < 0) { + return; + } + level = level > this.MAX_LEVEL ? this.MAX_LEVEL : level; //超过最大的渲染级别就不渲染 + if (level != this.CURRENT_LEVEL) { + if (this.camera instanceof ZeroGIS.PerspectiveCamera) { + //要先执行camera.setLevel,然后再刷新 + this.camera.setLevel(level); + this.refresh(); + } + } +}; + +/** + * 返回当前的各种矩阵信息:视点矩阵、投影矩阵、两者乘积，以及前三者的逆矩阵 + * @returns {{View: null, _View: null, Proj: null, _Proj: null, ProjView: null, _View_Proj: null}} + * @private + */ +Globe.prototype._getMatrixInfo = function () { + var options = { + View: null, //视点矩阵 + _View: null, //视点矩阵的逆矩阵 + Proj: null, //投影矩阵 + _Proj: null, //投影矩阵的逆矩阵 + ProjView: null, //投影矩阵与视点矩阵的乘积 + _View_Proj: null //视点逆矩阵与投影逆矩阵的乘积 + }; + options.View = this.getViewMatrix(); + options._View = options.View.getInverseMatrix(); + options.Proj = this.projMatrix; + options._Proj = options.Proj.getInverseMatrix(); + options.ProjView = options.Proj.multiplyMatrix(options.View); + options._View_Proj = options.ProjView.getInverseMatrix(); + return options; +}; + +Globe.prototype.tick = function () { + var globe = ZeroGIS.globe; + if (globe) { + globe.refresh(); + this.idTimeOut = setTimeout(globe.tick, globe.REFRESH_INTERVAL); + } +}; + +Globe.prototype.refresh = function () { + if (!this.tiledLayer || !this.scene || !this.camera) { + return; + } + var level = this.CURRENT_LEVEL + 3; + this.tiledLayer.updateSubLayerCount(level); + var projView = this.camera.getProjViewMatrix(); + var options = { + projView: projView, + threshold: 1 + }; + options.threshold = Math.min(90 / this.camera.pitch, 1.5); + //最大级别的level所对应的可见TileGrids + var lastLevelTileGrids = this.camera.getVisibleTilesByLevel(level, options); + var levelsTileGrids = []; //level-2 + var parentTileGrids = lastLevelTileGrids; + var i; + for (i = level; i >= 2; i--) { + levelsTileGrids.push(parentTileGrids); //此行代码表示第i层级的可见切片 + parentTileGrids = ZeroGIS.Utils.map(parentTileGrids, function (item) { + return item.getParent(); }); - this.tiledLayer.add(subLayer0); + parentTileGrids = ZeroGIS.Utils.filterRepeatArray(parentTileGrids); + } + levelsTileGrids.reverse(); //2-level + for (i = 2; i <= level; i++) { + var subLevel = i; + var subLayer = this.tiledLayer.children[subLevel]; + subLayer.updateTiles(levelsTileGrids[0], true); + levelsTileGrids.splice(0, 1); + } + if (ZeroGIS.TERRAIN_ENABLED) { + this.requestElevationsAndCheckTerrain(); + } +}; - //要对level为1的图层进行特殊处理，在创建level为1时就创建其中的全部的四个tile - var subLayer1 = new ZeroGIS.SubTiledLayer({ - level: 1 - }); - this.tiledLayer.add(subLayer1); - ZeroGIS.canvas.style.cursor = "wait"; - for (var m = 0; m <= 1; m++) { - for (var n = 0; n <= 1; n++) { - var args = { - level: 1, - row: m, - column: n, - url: "" - }; - args.url = this.tiledLayer.getImageUrl(args.level, args.row, args.column); - var tile = new ZeroGIS.Tile(args); - subLayer1.add(tile); - } - } - ZeroGIS.canvas.style.cursor = "default"; - this.tick(); - }, +//请求更新高程数据，并检测Terrain +Globe.prototype.requestElevationsAndCheckTerrain = function () { + var level = this.tiledLayer.children.length - 1; + //当level>7时请求更新高程数据 + //请求的数据与第7级的切片大小相同 + //if(level > ZeroGIS.ELEVATION_LEVEL){ - setLevel: function (level) { - if (!ZeroGIS.Utils.isInteger(level)) { - throw "invalid level"; - } - if (level < 0) { - return; - } - level = level > this.MAX_LEVEL ? this.MAX_LEVEL : level; //超过最大的渲染级别就不渲染 - if (level != this.CURRENT_LEVEL) { - if (this.camera instanceof ZeroGIS.PerspectiveCamera) { - //要先执行camera.setLevel,然后再刷新 - this.camera.setLevel(level); - this.refresh(); - } - } - }, - - /** - * 返回当前的各种矩阵信息:视点矩阵、投影矩阵、两者乘积，以及前三者的逆矩阵 - * @returns {{View: null, _View: null, Proj: null, _Proj: null, ProjView: null, _View_Proj: null}} - * @private - */ - _getMatrixInfo: function () { - var options = { - View: null, //视点矩阵 - _View: null, //视点矩阵的逆矩阵 - Proj: null, //投影矩阵 - _Proj: null, //投影矩阵的逆矩阵 - ProjView: null, //投影矩阵与视点矩阵的乘积 - _View_Proj: null //视点逆矩阵与投影逆矩阵的乘积 - }; - options.View = this.getViewMatrix(); - options._View = options.View.getInverseMatrix(); - options.Proj = this.projMatrix; - options._Proj = options.Proj.getInverseMatrix(); - options.ProjView = options.Proj.multiplyMatrix(options.View); - options._View_Proj = options.ProjView.getInverseMatrix(); - return options; - }, - - tick: function () { - var globe = ZeroGIS.globe; - if (globe) { - globe.refresh(); - this.idTimeOut = setTimeout(globe.tick, globe.REFRESH_INTERVAL); - } - }, - - refresh: function () { - if (!this.tiledLayer || !this.scene || !this.camera) { - return; - } - var level = this.CURRENT_LEVEL + 3; - this.tiledLayer.updateSubLayerCount(level); - var projView = this.camera.getProjViewMatrix(); - var options = { - projView: projView, - threshold: 1 - }; - options.threshold = Math.min(90 / this.camera.pitch, 1.5); - //最大级别的level所对应的可见TileGrids - var lastLevelTileGrids = this.camera.getVisibleTilesByLevel(level, options); - var levelsTileGrids = []; //level-2 - var parentTileGrids = lastLevelTileGrids; - var i; - for (i = level; i >= 2; i--) { - levelsTileGrids.push(parentTileGrids); //此行代码表示第i层级的可见切片 - parentTileGrids = ZeroGIS.Utils.map(parentTileGrids, function (item) { - return item.getParent(); - }); - parentTileGrids = ZeroGIS.Utils.filterRepeatArray(parentTileGrids); - } - levelsTileGrids.reverse(); //2-level - for (i = 2; i <= level; i++) { - var subLevel = i; - var subLayer = this.tiledLayer.children[subLevel]; - subLayer.updateTiles(levelsTileGrids[0], true); - levelsTileGrids.splice(0, 1); - } - if (ZeroGIS.TERRAIN_ENABLED) { - this.requestElevationsAndCheckTerrain(); - } - }, - - //请求更新高程数据，并检测Terrain - requestElevationsAndCheckTerrain: function () { - var level = this.tiledLayer.children.length - 1; - //当level>7时请求更新高程数据 - //请求的数据与第7级的切片大小相同 - //if(level > ZeroGIS.ELEVATION_LEVEL){ - - //达到TERRAIN_LEVEL级别时考虑三维请求 - if (level >= ZeroGIS.TERRAIN_LEVEL) { - for (var i = ZeroGIS.ELEVATION_LEVEL + 1; i <= level; i++) { - var subLayer = this.tiledLayer.children[i]; - subLayer.requestElevations(); - //检查SubTiledLayer下的子图层是否符合转换成TerrainTile的条件，如果适合就自动以三维地形图显示 - if (i >= ZeroGIS.TERRAIN_LEVEL) { - subLayer.checkTerrain(); - } + //达到TERRAIN_LEVEL级别时考虑三维请求 + if (level >= ZeroGIS.TERRAIN_LEVEL) { + for (var i = ZeroGIS.ELEVATION_LEVEL + 1; i <= level; i++) { + var subLayer = this.tiledLayer.children[i]; + subLayer.requestElevations(); + //检查SubTiledLayer下的子图层是否符合转换成TerrainTile的条件，如果适合就自动以三维地形图显示 + if (i >= ZeroGIS.TERRAIN_LEVEL) { + subLayer.checkTerrain(); } } } }; + +export default GLobe; diff --git a/ShadowEditor.Web/src/gis2/ZeroGIS.js b/ShadowEditor.Web/src/gis2/ZeroGIS.js index 7996fec5..9f39edd4 100644 --- a/ShadowEditor.Web/src/gis2/ZeroGIS.js +++ b/ShadowEditor.Web/src/gis2/ZeroGIS.js @@ -15,4 +15,6 @@ var ZeroGIS = { TERRAIN_ENABLED: false, //是否启用三维地形 TERRAIN_PITCH: 80, //开始显示三维地形的pich proxy: "" -}; \ No newline at end of file +}; + +export default ZeroGIS; \ No newline at end of file diff --git a/ShadowEditor.Web/src/gis2/build/gis2.js b/ShadowEditor.Web/src/gis2/build/gis2.js new file mode 100644 index 00000000..284e3745 --- /dev/null +++ b/ShadowEditor.Web/src/gis2/build/gis2.js @@ -0,0 +1,9 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('ZeroGIS.js'), require('Enum.js'), require('Utils.js'), require('Vertice.js'), require('Vector.js'), require('Matrix.js'), require('Image.js'), require('Elevation.js'), require('Object3D/Object3D.js'), require('Object3D/ShaderContent.js'), require('Object3D/WebGLRenderer.js'), require('Object3D/Line.js'), require('Object3D/PerspectiveCamera.js'), require('Object3D/Object3DComponents.js'), require('Object3D/Scene.js'), require('Object3D/TextureMaterial.js'), require('Object3D/TileMaterial.js'), require('Object3D/Tile.js'), require('Object3D/TileGrid.js'), require('MathUtils.js'), require('Event.js'), require('Globe.js'), require('TiledLayer/TiledLayer.js'), require('TiledLayer/SubTiledLayer.js'), require('TiledLayer/GoogleTiledLayer.js'), require('TiledLayer/BingTiledLayer.js'), require('TiledLayer/OsmTiledLayer.js'), require('TiledLayer/SosoTiledLayer.js'), require('TiledLayer/TiandituTiledLayer.js'), require('TiledLayer/NokiaTiledLayer.js'), require('TiledLayer/ArcGISTiledLayer.js'), require('TiledLayer/AutonaviTiledLayer.js'), require('TiledLayer/BlendTiledLayer.js')) : + typeof define === 'function' && define.amd ? define(['ZeroGIS.js', 'Enum.js', 'Utils.js', 'Vertice.js', 'Vector.js', 'Matrix.js', 'Image.js', 'Elevation.js', 'Object3D/Object3D.js', 'Object3D/ShaderContent.js', 'Object3D/WebGLRenderer.js', 'Object3D/Line.js', 'Object3D/PerspectiveCamera.js', 'Object3D/Object3DComponents.js', 'Object3D/Scene.js', 'Object3D/TextureMaterial.js', 'Object3D/TileMaterial.js', 'Object3D/Tile.js', 'Object3D/TileGrid.js', 'MathUtils.js', 'Event.js', 'Globe.js', 'TiledLayer/TiledLayer.js', 'TiledLayer/SubTiledLayer.js', 'TiledLayer/GoogleTiledLayer.js', 'TiledLayer/BingTiledLayer.js', 'TiledLayer/OsmTiledLayer.js', 'TiledLayer/SosoTiledLayer.js', 'TiledLayer/TiandituTiledLayer.js', 'TiledLayer/NokiaTiledLayer.js', 'TiledLayer/ArcGISTiledLayer.js', 'TiledLayer/AutonaviTiledLayer.js', 'TiledLayer/BlendTiledLayer.js'], factory) : + (factory()); +}(this, (function () { 'use strict'; + + + +}))); diff --git a/ShadowEditor.Web/src/gis2/index.html b/ShadowEditor.Web/src/gis2/index.html index 4e4339d5..7ea1ed13 100644 --- a/ShadowEditor.Web/src/gis2/index.html +++ b/ShadowEditor.Web/src/gis2/index.html @@ -1,58 +1,36 @@ + ZeroGIS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - + + + \ No newline at end of file diff --git a/ShadowEditor.Web/src/gis2/index.js b/ShadowEditor.Web/src/gis2/index.js index a4f2d042..072d9c66 100644 --- a/ShadowEditor.Web/src/gis2/index.js +++ b/ShadowEditor.Web/src/gis2/index.js @@ -1,76 +1,33 @@ -// import 'ZeroGIS.js'; -// import 'Enum.js'; -// import 'Utils.js'; -// import 'Vertice.js'; -// import 'Vector.js'; -// import 'Matrix.js'; -// import 'Image.js'; -// import 'Elevation.js'; -// import 'Object3D/Object3D.js'; -// import 'Object3D/ShaderContent.js'; -// import 'Object3D/WebGLRenderer.js'; -// import 'Object3D/Line.js'; -// import 'Object3D/PerspectiveCamera.js'; -// import 'Object3D/Object3DComponents.js'; -// import 'Object3D/Scene.js'; -// import 'Object3D/TextureMaterial.js'; -// import 'Object3D/TileMaterial.js'; -// import 'Object3D/Tile.js'; -// import 'Object3D/TileGrid.js'; -// import 'MathUtils.js'; -// import 'Event.js'; -// import 'Globe.js'; -// import 'TiledLayer/TiledLayer.js'; -// import 'TiledLayer/SubTiledLayer.js'; -// import 'TiledLayer/GoogleTiledLayer.js'; -// import 'TiledLayer/BingTiledLayer.js'; -// import 'TiledLayer/OsmTiledLayer.js'; -// import 'TiledLayer/SosoTiledLayer.js'; -// import 'TiledLayer/TiandituTiledLayer.js'; -// import 'TiledLayer/NokiaTiledLayer.js'; -// import 'TiledLayer/ArcGISTiledLayer.js'; -// import 'TiledLayer/AutonaviTiledLayer.js'; -// import 'TiledLayer/BlendTiledLayer.js'; - -var globe; - -function start() { - var canvas = document.getElementById("container"); - globe = new ZeroGIS.Globe(canvas); - var selector = document.getElementById("mapSelector"); - selector.onchange = changeTiledLayer; - changeTiledLayer(); -} - -function changeTiledLayer() { - var mapSelector = document.getElementById("mapSelector"); - mapSelector.blur(); - var newTiledLayer = null; - var args = null; - var value = mapSelector.value; - switch (value) { - case "google": - newTiledLayer = new ZeroGIS.GoogleTiledLayer(); - break; - case "bing": - newTiledLayer = new ZeroGIS.BingTiledLayer(); - break; - case "osm": - newTiledLayer = new ZeroGIS.OsmTiledLayer(); - break; - case "soso": - newTiledLayer = new ZeroGIS.SosoTiledLayer(); - break; - case "tianditu": - newTiledLayer = new ZeroGIS.TiandituTiledLayer(); - break; - default: - break; - } - - if (newTiledLayer) { - globe.setTiledLayer(newTiledLayer); - } -} - -window.onload = start; \ No newline at end of file +import 'ZeroGIS.js'; +import 'Enum.js'; +import 'Utils.js'; +import 'Vertice.js'; +import 'Vector.js'; +import 'Matrix.js'; +import 'Image.js'; +import 'Elevation.js'; +import 'Object3D/Object3D.js'; +import 'Object3D/ShaderContent.js'; +import 'Object3D/WebGLRenderer.js'; +import 'Object3D/Line.js'; +import 'Object3D/PerspectiveCamera.js'; +import 'Object3D/Object3DComponents.js'; +import 'Object3D/Scene.js'; +import 'Object3D/TextureMaterial.js'; +import 'Object3D/TileMaterial.js'; +import 'Object3D/Tile.js'; +import 'Object3D/TileGrid.js'; +import 'MathUtils.js'; +import 'Event.js'; +import 'Globe.js'; +import 'TiledLayer/TiledLayer.js'; +import 'TiledLayer/SubTiledLayer.js'; +import 'TiledLayer/GoogleTiledLayer.js'; +import 'TiledLayer/BingTiledLayer.js'; +import 'TiledLayer/OsmTiledLayer.js'; +import 'TiledLayer/SosoTiledLayer.js'; +import 'TiledLayer/TiandituTiledLayer.js'; +import 'TiledLayer/NokiaTiledLayer.js'; +import 'TiledLayer/ArcGISTiledLayer.js'; +import 'TiledLayer/AutonaviTiledLayer.js'; +import 'TiledLayer/BlendTiledLayer.js'; \ No newline at end of file diff --git a/ShadowEditor.Web/src/gis2/rollup.config.js b/ShadowEditor.Web/src/gis2/rollup.config.js new file mode 100644 index 00000000..4d1fb189 --- /dev/null +++ b/ShadowEditor.Web/src/gis2/rollup.config.js @@ -0,0 +1,12 @@ +export default { + input: 'ShadowEditor.Web/src/gis2/index.js', + output: { + indent: '\t', + format: 'umd', + name: 'ZeroGIS', + file: 'ShadowEditor.Web/src/gis2/build/gis2.js' + }, + treeshake: true, + external: [], + plugins: [] +}; diff --git a/package.json b/package.json index 28bb95e7..02eb7506 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,8 @@ "build": "rollup -c ShadowEditor.Web/rollup.config.js", "build-docs": "gitbook build docs-dev", "test": "rollup -c ShadowEditor.Web/test/unit/rollup.config.js", - "clear": "npm prune" + "clear": "npm prune", + "earth": "rollup -c ShadowEditor.Web/src/gis2/rollup.config.js" }, "repository": { "type": "git",