xy-map 1.1.22 → 1.1.24

package/xy-map.umd.js

@@ -234,7 +234,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, ".snow[data-v-59d7e867]{position:absolu
 
 /***/ }),
 
-/***/ 9232:
+/***/ 2597:
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -248,7 +248,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".tools[data-v-018cd082]{position:absolute;left:0;top:0;margin:15px;background-color:hsla(0,0%,100%,.9);padding:14px;border-radius:5px}.tools .tools-bar[data-v-018cd082]{cursor:pointer}.right-fixed[data-v-018cd082]{position:absolute;right:0;top:0;margin:15px}", ""]);
+___CSS_LOADER_EXPORT___.push([module.id, ".tools[data-v-48ba5a0f]{position:absolute;left:0;top:0;margin:15px;background-color:hsla(0,0%,100%,.9);padding:14px;border-radius:5px}.tools .tools-bar[data-v-48ba5a0f]{cursor:pointer}.right-fixed[data-v-48ba5a0f]{position:absolute;right:0;top:0;margin:15px}", ""]);
 // Exports
 /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
 
@@ -23798,19 +23798,19 @@ var update = add("5928cba1", content, true, {"sourceMap":false,"shadowMode":fals
 
 /***/ }),
 
-/***/ 3994:
+/***/ 3901:
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 // style-loader: Adds some css to the DOM by adding a <style> tag
 
 // load the styles
-var content = __webpack_require__(9232);
+var content = __webpack_require__(2597);
 if(content.__esModule) content = content.default;
 if(typeof content === 'string') content = [[module.id, content, '']];
 if(content.locals) module.exports = content.locals;
 // add the styles to the DOM
 var add = (__webpack_require__(208)/* ["default"] */ .Z)
-var update = add("78e7192c", content, true, {"sourceMap":false,"shadowMode":false});
+var update = add("292bbaf9", content, true, {"sourceMap":false,"shadowMode":false});
 
 /***/ }),
 
@@ -51366,12 +51366,12 @@ this.manager.itemError(url);throw err;}delete loading[url];for(let i=0,il=callba
  *
  * Sub classes have to implement the parse() method which will be used in load().
  */class CompressedTextureLoader extends (/* unused pure expression or super */ null && (Loader)){constructor(manager){super(manager);}load(url,onLoad,onProgress,onError){const scope=this;const images=[];const texture=new CompressedTexture();const loader=new FileLoader(this.manager);loader.setPath(this.path);loader.setResponseType('arraybuffer');loader.setRequestHeader(this.requestHeader);loader.setWithCredentials(scope.withCredentials);let loaded=0;function loadTexture(i){loader.load(url[i],function(buffer){const texDatas=scope.parse(buffer,true);images[i]={width:texDatas.width,height:texDatas.height,format:texDatas.format,mipmaps:texDatas.mipmaps};loaded+=1;if(loaded===6){if(texDatas.mipmapCount===1)texture.minFilter=LinearFilter;texture.image=images;texture.format=texDatas.format;texture.needsUpdate=true;if(onLoad)onLoad(texture);}},onProgress,onError);}if(Array.isArray(url)){for(let i=0,il=url.length;i<il;++i){loadTexture(i);}}else{// compressed cubemap texture stored in a single DDS file
-loader.load(url,function(buffer){const texDatas=scope.parse(buffer,true);if(texDatas.isCubemap){const faces=texDatas.mipmaps.length/texDatas.mipmapCount;for(let f=0;f<faces;f++){images[f]={mipmaps:[]};for(let i=0;i<texDatas.mipmapCount;i++){images[f].mipmaps.push(texDatas.mipmaps[f*texDatas.mipmapCount+i]);images[f].format=texDatas.format;images[f].width=texDatas.width;images[f].height=texDatas.height;}}texture.image=images;}else{texture.image.width=texDatas.width;texture.image.height=texDatas.height;texture.mipmaps=texDatas.mipmaps;}if(texDatas.mipmapCount===1){texture.minFilter=LinearFilter;}texture.format=texDatas.format;texture.needsUpdate=true;if(onLoad)onLoad(texture);},onProgress,onError);}return texture;}}class ImageLoader extends (/* unused pure expression or super */ null && (Loader)){constructor(manager){super(manager);}load(url,onLoad,onProgress,onError){if(this.path!==undefined)url=this.path+url;url=this.manager.resolveURL(url);const scope=this;const cached=Cache.get(url);if(cached!==undefined){scope.manager.itemStart(url);setTimeout(function(){if(onLoad)onLoad(cached);scope.manager.itemEnd(url);},0);return cached;}const image=createElementNS('img');function onImageLoad(){removeEventListeners();Cache.add(url,this);if(onLoad)onLoad(this);scope.manager.itemEnd(url);}function onImageError(event){removeEventListeners();if(onError)onError(event);scope.manager.itemError(url);scope.manager.itemEnd(url);}function removeEventListeners(){image.removeEventListener('load',onImageLoad,false);image.removeEventListener('error',onImageError,false);}image.addEventListener('load',onImageLoad,false);image.addEventListener('error',onImageError,false);if(url.slice(0,5)!=='data:'){if(this.crossOrigin!==undefined)image.crossOrigin=this.crossOrigin;}scope.manager.itemStart(url);image.src=url;return image;}}class CubeTextureLoader extends (/* unused pure expression or super */ null && (Loader)){constructor(manager){super(manager);}load(urls,onLoad,onProgress,onError){const texture=new CubeTexture();const loader=new ImageLoader(this.manager);loader.setCrossOrigin(this.crossOrigin);loader.setPath(this.path);let loaded=0;function loadTexture(i){loader.load(urls[i],function(image){texture.images[i]=image;loaded++;if(loaded===6){texture.needsUpdate=true;if(onLoad)onLoad(texture);}},undefined,onError);}for(let i=0;i<urls.length;++i){loadTexture(i);}return texture;}}/**
+loader.load(url,function(buffer){const texDatas=scope.parse(buffer,true);if(texDatas.isCubemap){const faces=texDatas.mipmaps.length/texDatas.mipmapCount;for(let f=0;f<faces;f++){images[f]={mipmaps:[]};for(let i=0;i<texDatas.mipmapCount;i++){images[f].mipmaps.push(texDatas.mipmaps[f*texDatas.mipmapCount+i]);images[f].format=texDatas.format;images[f].width=texDatas.width;images[f].height=texDatas.height;}}texture.image=images;}else{texture.image.width=texDatas.width;texture.image.height=texDatas.height;texture.mipmaps=texDatas.mipmaps;}if(texDatas.mipmapCount===1){texture.minFilter=LinearFilter;}texture.format=texDatas.format;texture.needsUpdate=true;if(onLoad)onLoad(texture);},onProgress,onError);}return texture;}}class ImageLoader extends Loader{constructor(manager){super(manager);}load(url,onLoad,onProgress,onError){if(this.path!==undefined)url=this.path+url;url=this.manager.resolveURL(url);const scope=this;const cached=Cache.get(url);if(cached!==undefined){scope.manager.itemStart(url);setTimeout(function(){if(onLoad)onLoad(cached);scope.manager.itemEnd(url);},0);return cached;}const image=createElementNS('img');function onImageLoad(){removeEventListeners();Cache.add(url,this);if(onLoad)onLoad(this);scope.manager.itemEnd(url);}function onImageError(event){removeEventListeners();if(onError)onError(event);scope.manager.itemError(url);scope.manager.itemEnd(url);}function removeEventListeners(){image.removeEventListener('load',onImageLoad,false);image.removeEventListener('error',onImageError,false);}image.addEventListener('load',onImageLoad,false);image.addEventListener('error',onImageError,false);if(url.slice(0,5)!=='data:'){if(this.crossOrigin!==undefined)image.crossOrigin=this.crossOrigin;}scope.manager.itemStart(url);image.src=url;return image;}}class CubeTextureLoader extends (/* unused pure expression or super */ null && (Loader)){constructor(manager){super(manager);}load(urls,onLoad,onProgress,onError){const texture=new CubeTexture();const loader=new ImageLoader(this.manager);loader.setCrossOrigin(this.crossOrigin);loader.setPath(this.path);let loaded=0;function loadTexture(i){loader.load(urls[i],function(image){texture.images[i]=image;loaded++;if(loaded===6){texture.needsUpdate=true;if(onLoad)onLoad(texture);}},undefined,onError);}for(let i=0;i<urls.length;++i){loadTexture(i);}return texture;}}/**
  * Abstract Base class to load generic binary textures formats (rgbe, hdr, ...)
  *
  * Sub classes have to implement the parse() method which will be used in load().
  */class DataTextureLoader extends Loader{constructor(manager){super(manager);}load(url,onLoad,onProgress,onError){const scope=this;const texture=new DataTexture();const loader=new FileLoader(this.manager);loader.setResponseType('arraybuffer');loader.setRequestHeader(this.requestHeader);loader.setPath(this.path);loader.setWithCredentials(scope.withCredentials);loader.load(url,function(buffer){const texData=scope.parse(buffer);if(!texData)return;if(texData.image!==undefined){texture.image=texData.image;}else if(texData.data!==undefined){texture.image.width=texData.width;texture.image.height=texData.height;texture.image.data=texData.data;}texture.wrapS=texData.wrapS!==undefined?texData.wrapS:ClampToEdgeWrapping;texture.wrapT=texData.wrapT!==undefined?texData.wrapT:ClampToEdgeWrapping;texture.magFilter=texData.magFilter!==undefined?texData.magFilter:LinearFilter;texture.minFilter=texData.minFilter!==undefined?texData.minFilter:LinearFilter;texture.anisotropy=texData.anisotropy!==undefined?texData.anisotropy:1;if(texData.encoding!==undefined){texture.encoding=texData.encoding;}if(texData.flipY!==undefined){texture.flipY=texData.flipY;}if(texData.format!==undefined){texture.format=texData.format;}if(texData.type!==undefined){texture.type=texData.type;}if(texData.mipmaps!==undefined){texture.mipmaps=texData.mipmaps;texture.minFilter=LinearMipmapLinearFilter;// presumably...
-}if(texData.mipmapCount===1){texture.minFilter=LinearFilter;}if(texData.generateMipmaps!==undefined){texture.generateMipmaps=texData.generateMipmaps;}texture.needsUpdate=true;if(onLoad)onLoad(texture,texData);},onProgress,onError);return texture;}}class TextureLoader extends (/* unused pure expression or super */ null && (Loader)){constructor(manager){super(manager);}load(url,onLoad,onProgress,onError){const texture=new Texture();const loader=new ImageLoader(this.manager);loader.setCrossOrigin(this.crossOrigin);loader.setPath(this.path);loader.load(url,function(image){texture.image=image;texture.needsUpdate=true;if(onLoad!==undefined){onLoad(texture);}},onProgress,onError);return texture;}}class Light extends three_module_Object3D{constructor(color,intensity=1){super();this.isLight=true;this.type='Light';this.color=new Color(color);this.intensity=intensity;}dispose(){// Empty here in base class; some subclasses override.
+}if(texData.mipmapCount===1){texture.minFilter=LinearFilter;}if(texData.generateMipmaps!==undefined){texture.generateMipmaps=texData.generateMipmaps;}texture.needsUpdate=true;if(onLoad)onLoad(texture,texData);},onProgress,onError);return texture;}}class TextureLoader extends Loader{constructor(manager){super(manager);}load(url,onLoad,onProgress,onError){const texture=new Texture();const loader=new ImageLoader(this.manager);loader.setCrossOrigin(this.crossOrigin);loader.setPath(this.path);loader.load(url,function(image){texture.image=image;texture.needsUpdate=true;if(onLoad!==undefined){onLoad(texture);}},onProgress,onError);return texture;}}class Light extends three_module_Object3D{constructor(color,intensity=1){super();this.isLight=true;this.type='Light';this.color=new Color(color);this.intensity=intensity;}dispose(){// Empty here in base class; some subclasses override.
 }copy(source,recursive){super.copy(source,recursive);this.color.copy(source.color);this.intensity=source.intensity;return this;}toJSON(meta){const data=super.toJSON(meta);data.object.color=this.color.getHex();data.object.intensity=this.intensity;if(this.groundColor!==undefined)data.object.groundColor=this.groundColor.getHex();if(this.distance!==undefined)data.object.distance=this.distance;if(this.angle!==undefined)data.object.angle=this.angle;if(this.decay!==undefined)data.object.decay=this.decay;if(this.penumbra!==undefined)data.object.penumbra=this.penumbra;if(this.shadow!==undefined)data.object.shadow=this.shadow.toJSON();return data;}}class HemisphereLight extends (/* unused pure expression or super */ null && (Light)){constructor(skyColor,groundColor,intensity){super(skyColor,intensity);this.isHemisphereLight=true;this.type='HemisphereLight';this.position.copy(three_module_Object3D.DefaultUp);this.updateMatrix();this.groundColor=new Color(groundColor);}copy(source,recursive){super.copy(source,recursive);this.groundColor.copy(source.groundColor);return this;}}const _projScreenMatrix$1=/*@__PURE__*/new Matrix4();const _lightPositionWorld$1=/*@__PURE__*/new Vector3();const _lookTarget$1=/*@__PURE__*/new Vector3();class LightShadow{constructor(camera){this.camera=camera;this.bias=0;this.normalBias=0;this.radius=1;this.blurSamples=8;this.mapSize=new Vector2(512,512);this.map=null;this.mapPass=null;this.matrix=new Matrix4();this.autoUpdate=true;this.needsUpdate=false;this._frustum=new Frustum();this._frameExtents=new Vector2(1,1);this._viewportCount=1;this._viewports=[new Vector4(0,0,1,1)];}getViewportCount(){return this._viewportCount;}getFrustum(){return this._frustum;}updateMatrices(light){const shadowCamera=this.camera;const shadowMatrix=this.matrix;_lightPositionWorld$1.setFromMatrixPosition(light.matrixWorld);shadowCamera.position.copy(_lightPositionWorld$1);_lookTarget$1.setFromMatrixPosition(light.target.matrixWorld);shadowCamera.lookAt(_lookTarget$1);shadowCamera.updateMatrixWorld();_projScreenMatrix$1.multiplyMatrices(shadowCamera.projectionMatrix,shadowCamera.matrixWorldInverse);this._frustum.setFromProjectionMatrix(_projScreenMatrix$1);shadowMatrix.set(0.5,0.0,0.0,0.5,0.0,0.5,0.0,0.5,0.0,0.0,0.5,0.5,0.0,0.0,0.0,1.0);shadowMatrix.multiply(_projScreenMatrix$1);}getViewport(viewportIndex){return this._viewports[viewportIndex];}getFrameExtents(){return this._frameExtents;}dispose(){if(this.map){this.map.dispose();}if(this.mapPass){this.mapPass.dispose();}}copy(source){this.camera=source.camera.clone();this.bias=source.bias;this.radius=source.radius;this.mapSize.copy(source.mapSize);return this;}clone(){return new this.constructor().copy(this);}toJSON(){const object={};if(this.bias!==0)object.bias=this.bias;if(this.normalBias!==0)object.normalBias=this.normalBias;if(this.radius!==1)object.radius=this.radius;if(this.mapSize.x!==512||this.mapSize.y!==512)object.mapSize=this.mapSize.toArray();object.camera=this.camera.toJSON(false).object;delete object.camera.matrix;return object;}}class SpotLightShadow extends (/* unused pure expression or super */ null && (LightShadow)){constructor(){super(new PerspectiveCamera(50,1,0.5,500));this.isSpotLightShadow=true;this.focus=1;}updateMatrices(light){const camera=this.camera;const fov=RAD2DEG*2*light.angle*this.focus;const aspect=this.mapSize.width/this.mapSize.height;const far=light.distance||camera.far;if(fov!==camera.fov||aspect!==camera.aspect||far!==camera.far){camera.fov=fov;camera.aspect=aspect;camera.far=far;camera.updateProjectionMatrix();}super.updateMatrices(light);}copy(source){super.copy(source);this.focus=source.focus;return this;}}class SpotLight extends (/* unused pure expression or super */ null && (Light)){constructor(color,intensity,distance=0,angle=Math.PI/3,penumbra=0,decay=1){super(color,intensity);this.isSpotLight=true;this.type='SpotLight';this.position.copy(three_module_Object3D.DefaultUp);this.updateMatrix();this.target=new three_module_Object3D();this.distance=distance;this.angle=angle;this.penumbra=penumbra;this.decay=decay;// for physically correct lights, should be 2.
 this.map=null;this.shadow=new SpotLightShadow();}get power(){// compute the light's luminous power (in lumens) from its intensity (in candela)
 // by convention for a spotlight, luminous power (lm) = π * luminous intensity (cd)
@@ -54932,14 +54932,14 @@ const addLayerModel = (option, layerId = '') => {
           // camera = new THREE.Camera()
           // 场景
           scene = new Scene();
-          // scene.background = new THREE.Color('rgba(255,255,255, 0)')
-
-          // 辅助坐标轴
-          // if (gui) {
-          // 	let AxesHelper = new THREE.AxesHelper(100)
-          // 	AxesHelper.position.y = opt.translate[1]
-          // 	scene.add(AxesHelper)
-          // }
+          // scene.background = new THREE.Color(0xffffff)
+          const texture = new TextureLoader().load('/img/blue.jpg');
+          texture.mapping = EquirectangularRefractionMapping; // 带折射效果
+          texture.wrapS = texture.wrapT = RepeatWrapping;
+          console.log(texture);
+          scene.scale.set(100, 100, 100);
+          scene.background = texture;
+          scene.environment = texture;
 
           // 创建灯光
           if (opt.directionalLight && opt.directionalLight.length > 0) {
@@ -55066,7 +55066,24 @@ const addLayerModel = (option, layerId = '') => {
           // getIntersects() // 点击事件
         },
 
-        render: cameraUpdate
+        render: (gl, matrix) => {
+          const rotationX = new Matrix4().makeRotationAxis(new Vector3(1, 0, 0), modelTransform.rotateX);
+          const rotationY = new Matrix4().makeRotationAxis(new Vector3(0, 1, 0), modelTransform.rotateY);
+          const rotationZ = new Matrix4().makeRotationAxis(new Vector3(0, 0, 1), modelTransform.rotateZ);
+          const m = new Matrix4().fromArray(matrix);
+          const l = new Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ).scale(new Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
+          camera.projectionMatrix.elements = matrix;
+          camera.projectionMatrix = m.multiply(l);
+
+          // renderer.toneMapping = THREE.ACESFilmicToneMapping
+          // renderer.toneMappingExposure = 1.5
+
+          renderer.resetState();
+          renderer.render(scene, camera);
+          // composer.render()
+          labelRenderer.render(scene, camera);
+          map.triggerRepaint();
+        }
       };
       return customLayer;
       function loadHDR() {
@@ -55077,26 +55094,6 @@ const addLayerModel = (option, layerId = '') => {
         });
       }
 
-      // 渲染摄像机
-      function cameraUpdate(gl, matrix) {
-        const rotationX = new Matrix4().makeRotationAxis(new Vector3(1, 0, 0), modelTransform.rotateX);
-        const rotationY = new Matrix4().makeRotationAxis(new Vector3(0, 1, 0), modelTransform.rotateY);
-        const rotationZ = new Matrix4().makeRotationAxis(new Vector3(0, 0, 1), modelTransform.rotateZ);
-        const m = new Matrix4().fromArray(matrix);
-        const l = new Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ).scale(new Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
-        camera.projectionMatrix.elements = matrix;
-        camera.projectionMatrix = m.multiply(l);
-
-        // renderer.toneMapping = THREE.ACESFilmicToneMapping
-        // renderer.toneMappingExposure = 1.5
-
-        renderer.resetState();
-        renderer.render(scene, camera);
-        // composer.render()
-        labelRenderer.render(scene, camera);
-        map.triggerRepaint();
-      }
-
       // 点击事件
       function getIntersects() {
         const container = map.getCanvas();
@@ -55136,6 +55133,495 @@ const addLayerModel = (option, layerId = '') => {
     }
   });
 };
+;// CONCATENATED MODULE: ./node_modules/three/examples/jsm/objects/Water.js
+
+
+/**
+ * Work based on :
+ * https://github.com/Slayvin: Flat mirror for three.js
+ * https://home.adelphi.edu/~stemkoski/ : An implementation of water shader based on the flat mirror
+ * http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
+ */
+
+class Water extends Mesh {
+  constructor(geometry, options = {}) {
+    super(geometry);
+    this.isWater = true;
+    const scope = this;
+    const textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
+    const textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
+    const clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
+    const alpha = options.alpha !== undefined ? options.alpha : 1.0;
+    const time = options.time !== undefined ? options.time : 0.0;
+    const normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
+    const sunDirection = options.sunDirection !== undefined ? options.sunDirection : new Vector3(0.70707, 0.70707, 0.0);
+    const sunColor = new Color(options.sunColor !== undefined ? options.sunColor : 0xffffff);
+    const waterColor = new Color(options.waterColor !== undefined ? options.waterColor : 0x7F7F7F);
+    const eye = options.eye !== undefined ? options.eye : new Vector3(0, 0, 0);
+    const distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
+    const side = options.side !== undefined ? options.side : FrontSide;
+    const fog = options.fog !== undefined ? options.fog : false;
+
+    //
+
+    const mirrorPlane = new Plane();
+    const normal = new Vector3();
+    const mirrorWorldPosition = new Vector3();
+    const cameraWorldPosition = new Vector3();
+    const rotationMatrix = new Matrix4();
+    const lookAtPosition = new Vector3(0, 0, -1);
+    const clipPlane = new Vector4();
+    const view = new Vector3();
+    const target = new Vector3();
+    const q = new Vector4();
+    const textureMatrix = new Matrix4();
+    const mirrorCamera = new PerspectiveCamera();
+    const renderTarget = new WebGLRenderTarget(textureWidth, textureHeight);
+    const mirrorShader = {
+      uniforms: UniformsUtils.merge([UniformsLib.fog, UniformsLib.lights, {
+        'normalSampler': {
+          value: null
+        },
+        'mirrorSampler': {
+          value: null
+        },
+        'alpha': {
+          value: 1.0
+        },
+        'time': {
+          value: 0.0
+        },
+        'size': {
+          value: 1.0
+        },
+        'distortionScale': {
+          value: 20.0
+        },
+        'textureMatrix': {
+          value: new Matrix4()
+        },
+        'sunColor': {
+          value: new Color(0x7F7F7F)
+        },
+        'sunDirection': {
+          value: new Vector3(0.70707, 0.70707, 0)
+        },
+        'eye': {
+          value: new Vector3()
+        },
+        'waterColor': {
+          value: new Color(0x555555)
+        }
+      }]),
+      vertexShader: /* glsl */`
+				uniform mat4 textureMatrix;
+				uniform float time;
+
+				varying vec4 mirrorCoord;
+				varying vec4 worldPosition;
+
+				#include <common>
+				#include <fog_pars_vertex>
+				#include <shadowmap_pars_vertex>
+				#include <logdepthbuf_pars_vertex>
+
+				void main() {
+					mirrorCoord = modelMatrix * vec4( position, 1.0 );
+					worldPosition = mirrorCoord.xyzw;
+					mirrorCoord = textureMatrix * mirrorCoord;
+					vec4 mvPosition =  modelViewMatrix * vec4( position, 1.0 );
+					gl_Position = projectionMatrix * mvPosition;
+
+				#include <beginnormal_vertex>
+				#include <defaultnormal_vertex>
+				#include <logdepthbuf_vertex>
+				#include <fog_vertex>
+				#include <shadowmap_vertex>
+			}`,
+      fragmentShader: /* glsl */`
+				uniform sampler2D mirrorSampler;
+				uniform float alpha;
+				uniform float time;
+				uniform float size;
+				uniform float distortionScale;
+				uniform sampler2D normalSampler;
+				uniform vec3 sunColor;
+				uniform vec3 sunDirection;
+				uniform vec3 eye;
+				uniform vec3 waterColor;
+
+				varying vec4 mirrorCoord;
+				varying vec4 worldPosition;
+
+				vec4 getNoise( vec2 uv ) {
+					vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);
+					vec2 uv1 = uv / 107.0-vec2( time / -19.0, time / 31.0 );
+					vec2 uv2 = uv / vec2( 8907.0, 9803.0 ) + vec2( time / 101.0, time / 97.0 );
+					vec2 uv3 = uv / vec2( 1091.0, 1027.0 ) - vec2( time / 109.0, time / -113.0 );
+					vec4 noise = texture2D( normalSampler, uv0 ) +
+						texture2D( normalSampler, uv1 ) +
+						texture2D( normalSampler, uv2 ) +
+						texture2D( normalSampler, uv3 );
+					return noise * 0.5 - 1.0;
+				}
+
+				void sunLight( const vec3 surfaceNormal, const vec3 eyeDirection, float shiny, float spec, float diffuse, inout vec3 diffuseColor, inout vec3 specularColor ) {
+					vec3 reflection = normalize( reflect( -sunDirection, surfaceNormal ) );
+					float direction = max( 0.0, dot( eyeDirection, reflection ) );
+					specularColor += pow( direction, shiny ) * sunColor * spec;
+					diffuseColor += max( dot( sunDirection, surfaceNormal ), 0.0 ) * sunColor * diffuse;
+				}
+
+				#include <common>
+				#include <packing>
+				#include <bsdfs>
+				#include <fog_pars_fragment>
+				#include <logdepthbuf_pars_fragment>
+				#include <lights_pars_begin>
+				#include <shadowmap_pars_fragment>
+				#include <shadowmask_pars_fragment>
+
+				void main() {
+
+					#include <logdepthbuf_fragment>
+					vec4 noise = getNoise( worldPosition.xz * size );
+					vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );
+
+					vec3 diffuseLight = vec3(0.0);
+					vec3 specularLight = vec3(0.0);
+
+					vec3 worldToEye = eye-worldPosition.xyz;
+					vec3 eyeDirection = normalize( worldToEye );
+					sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );
+
+					float distance = length(worldToEye);
+
+					vec2 distortion = surfaceNormal.xz * ( 0.001 + 1.0 / distance ) * distortionScale;
+					vec3 reflectionSample = vec3( texture2D( mirrorSampler, mirrorCoord.xy / mirrorCoord.w + distortion ) );
+
+					float theta = max( dot( eyeDirection, surfaceNormal ), 0.0 );
+					float rf0 = 0.3;
+					float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );
+					vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;
+					vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);
+					vec3 outgoingLight = albedo;
+					gl_FragColor = vec4( outgoingLight, alpha );
+
+					#include <tonemapping_fragment>
+					#include <fog_fragment>
+				}`
+    };
+    const material = new ShaderMaterial({
+      fragmentShader: mirrorShader.fragmentShader,
+      vertexShader: mirrorShader.vertexShader,
+      uniforms: UniformsUtils.clone(mirrorShader.uniforms),
+      lights: true,
+      side: side,
+      fog: fog
+    });
+    material.uniforms['mirrorSampler'].value = renderTarget.texture;
+    material.uniforms['textureMatrix'].value = textureMatrix;
+    material.uniforms['alpha'].value = alpha;
+    material.uniforms['time'].value = time;
+    material.uniforms['normalSampler'].value = normalSampler;
+    material.uniforms['sunColor'].value = sunColor;
+    material.uniforms['waterColor'].value = waterColor;
+    material.uniforms['sunDirection'].value = sunDirection;
+    material.uniforms['distortionScale'].value = distortionScale;
+    material.uniforms['eye'].value = eye;
+    scope.material = material;
+    scope.onBeforeRender = function (renderer, scene, camera) {
+      mirrorWorldPosition.setFromMatrixPosition(scope.matrixWorld);
+      cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld);
+      rotationMatrix.extractRotation(scope.matrixWorld);
+      normal.set(0, 0, 1);
+      normal.applyMatrix4(rotationMatrix);
+      view.subVectors(mirrorWorldPosition, cameraWorldPosition);
+
+      // Avoid rendering when mirror is facing away
+
+      if (view.dot(normal) > 0) return;
+      view.reflect(normal).negate();
+      view.add(mirrorWorldPosition);
+      rotationMatrix.extractRotation(camera.matrixWorld);
+      lookAtPosition.set(0, 0, -1);
+      lookAtPosition.applyMatrix4(rotationMatrix);
+      lookAtPosition.add(cameraWorldPosition);
+      target.subVectors(mirrorWorldPosition, lookAtPosition);
+      target.reflect(normal).negate();
+      target.add(mirrorWorldPosition);
+      mirrorCamera.position.copy(view);
+      mirrorCamera.up.set(0, 1, 0);
+      mirrorCamera.up.applyMatrix4(rotationMatrix);
+      mirrorCamera.up.reflect(normal);
+      mirrorCamera.lookAt(target);
+      mirrorCamera.far = camera.far; // Used in WebGLBackground
+
+      mirrorCamera.updateMatrixWorld();
+      mirrorCamera.projectionMatrix.copy(camera.projectionMatrix);
+
+      // Update the texture matrix
+      textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0);
+      textureMatrix.multiply(mirrorCamera.projectionMatrix);
+      textureMatrix.multiply(mirrorCamera.matrixWorldInverse);
+
+      // Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
+      // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+      mirrorPlane.setFromNormalAndCoplanarPoint(normal, mirrorWorldPosition);
+      mirrorPlane.applyMatrix4(mirrorCamera.matrixWorldInverse);
+      clipPlane.set(mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant);
+      const projectionMatrix = mirrorCamera.projectionMatrix;
+      q.x = (Math.sign(clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0];
+      q.y = (Math.sign(clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5];
+      q.z = -1.0;
+      q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14];
+
+      // Calculate the scaled plane vector
+      clipPlane.multiplyScalar(2.0 / clipPlane.dot(q));
+
+      // Replacing the third row of the projection matrix
+      projectionMatrix.elements[2] = clipPlane.x;
+      projectionMatrix.elements[6] = clipPlane.y;
+      projectionMatrix.elements[10] = clipPlane.z + 1.0 - clipBias;
+      projectionMatrix.elements[14] = clipPlane.w;
+      eye.setFromMatrixPosition(camera.matrixWorld);
+
+      // Render
+
+      const currentRenderTarget = renderer.getRenderTarget();
+      const currentXrEnabled = renderer.xr.enabled;
+      const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
+      scope.visible = false;
+      renderer.xr.enabled = false; // Avoid camera modification and recursion
+      renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
+
+      renderer.setRenderTarget(renderTarget);
+      renderer.state.buffers.depth.setMask(true); // make sure the depth buffer is writable so it can be properly cleared, see #18897
+
+      if (renderer.autoClear === false) renderer.clear();
+      renderer.render(scene, mirrorCamera);
+      scope.visible = true;
+      renderer.xr.enabled = currentXrEnabled;
+      renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
+      renderer.setRenderTarget(currentRenderTarget);
+
+      // Restore viewport
+
+      const viewport = camera.viewport;
+      if (viewport !== undefined) {
+        renderer.state.viewport(viewport);
+      }
+    };
+  }
+}
+
+;// CONCATENATED MODULE: ./src/package/layers/water.js
+
+
+
+
+
+
+
+
+
+
+
+const water_defaultOptions = {
+  id: 'water',
+  position: [103.353557, 23.362395],
+  // 位置
+  hight: 0,
+  // 高度
+  size: [4000, 4000],
+  edit: false
+};
+
+/**
+ * 添加水面
+ */
+const addLayerWater = (option, layerId = '') => {
+  return new Promise(resolve => {
+    let {
+      map
+    } = package_map;
+    let opt = Object.assign({}, water_defaultOptions, option);
+    let camera = '';
+    let scene = '';
+    let group = '';
+    let renderer = '';
+    let customLayer = '';
+    let waterP = '';
+    // let waterTop = ''
+    let waterBottom = '';
+    if (hasLayer(opt.id)) {
+      removeLayer(opt.id);
+    }
+    addWater();
+    map.addLayer(customLayer, layerId);
+    resolve(group);
+    function addWater() {
+      const modelOrigin = opt.position; // 中心点
+      const modelAltitude = opt.height; // 高度
+      const modelRotate = [Math.PI / 2, 0, 0];
+      const modelAsMercatorCoordinate = mapbox_gl_default().MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude);
+      const modelTransform = {
+        translateX: modelAsMercatorCoordinate.x,
+        translateY: modelAsMercatorCoordinate.y,
+        translateZ: modelAsMercatorCoordinate.z,
+        rotateX: modelRotate[0],
+        rotateY: modelRotate[1],
+        rotateZ: modelRotate[2],
+        scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
+      };
+
+      // 根据CustomLayerInterface为三维模型配置自定义层
+      customLayer = {
+        id: opt.id,
+        type: 'custom',
+        renderingMode: '3d',
+        onAdd: (map, gl) => {
+          const container = map.getCanvas();
+
+          // 摄像机
+          camera = new PerspectiveCamera(50, container.clientWidth / container.clientHeight, 1, 5000);
+          // camera = new THREE.Camera()
+          // 场景
+          scene = new Scene();
+          group = new Group();
+          group.name = 'water';
+          scene.add(group);
+
+          // 水面
+          let geometry = getWaterGeometry(modelAsMercatorCoordinate, opt);
+          let bottomMat = new MeshBasicMaterial({
+            color: opt.color || 0x7597dc,
+            opacity: 0.7,
+            transparent: true
+          });
+          waterBottom = new Mesh(geometry, bottomMat);
+
+          // 动态水面
+          waterP = new Water(geometry, {
+            textureWidth: 64,
+            textureHeight: 64,
+            waterNormals: new TextureLoader().load('/img/waternormals.jpg', texture => {
+              texture.wrapS = texture.wrapT = RepeatWrapping;
+            }),
+            alpha: 0.3,
+            side: DoubleSide,
+            sunColor: 0xffffff,
+            waterColor: 0xffffff,
+            distortionScale: 3.7,
+            fog: scene.fog !== undefined
+          });
+          waterP.material.transparent = true;
+          scene.position.y = opt.hight;
+          group.add(waterP);
+          group.add(waterBottom);
+          group.rotation.x = -Math.PI / 2;
+
+          // loadBackground()
+
+          // 渲染器
+          renderer = new WebGLRenderer({
+            canvas: map.getCanvas(),
+            context: gl,
+            logarithmicDepthBuffer: true,
+            antialias: true
+          });
+          renderer.autoClear = false;
+          renderer.physicallyCorrectLights = true;
+          // renderer.outputEncoding = THREE.sRGBEncoding
+          renderer.setSize(container.clientWidth, container.clientHeight);
+
+          // 曝光度
+          // renderer.toneMapping = THREE.ACESFilmicToneMapping
+          // renderer.toneMappingExposure = 1
+
+          // 缩放比例调整
+          window.addEventListener('resize', () => {
+            renderer.setSize(container.clientWidth, container.clientHeight);
+            camera.aspect = container.clientWidth / container.clientHeight;
+            camera.updateProjectionMatrix();
+          });
+
+          // 天空
+          // let sky = new Sky()
+          // scene.add(sky)
+          // sky.scale.setScalar(10000000)
+
+          // const gui = opt.edit ? new dat.GUI() : null
+          // if (gui) {
+          // 	gui.add(group.position, 'y').step(0.1).name('淹没高度(米)')
+          // }
+
+          // RoomEnvironment
+          // const pmremGenerator = new THREE.PMREMGenerator(renderer)
+          // scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.001).texture
+        },
+
+        render: (gl, matrix) => {
+          const rotationX = new Matrix4().makeRotationAxis(new Vector3(1, 0, 0), modelTransform.rotateX);
+          const rotationY = new Matrix4().makeRotationAxis(new Vector3(0, 1, 0), modelTransform.rotateY);
+          const rotationZ = new Matrix4().makeRotationAxis(new Vector3(0, 0, 1), modelTransform.rotateZ);
+          const m = new Matrix4().fromArray(matrix);
+          const l = new Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ).scale(new Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
+          camera.projectionMatrix.elements = matrix;
+          camera.projectionMatrix = m.multiply(l);
+          renderer.resetState();
+          renderer.render(scene, camera);
+          map.triggerRepaint();
+
+          // 水面动画
+          waterP.material.uniforms['time'].value += 1.0 / 60.0;
+          // if (waterTop.material.map) {
+          // 	waterTop.material.map.offset.x += 0.0005
+          // }
+        }
+      };
+
+      return customLayer;
+
+      //获取水面轮廓
+      function getWaterGeometry(center, opt) {
+        if (opt.data) {
+          var points = [];
+          opt.data.features.forEach(geo => {
+            geo.geometry.coordinates.forEach(arr => {
+              arr.forEach(item => {
+                let mercatorCoordinate = mapbox_gl_default().MercatorCoordinate.fromLngLat(item, 0);
+                let units = mercatorCoordinate.meterInMercatorCoordinateUnits();
+                points.push(new Vector2((mercatorCoordinate.x - center.x) / units, -1 * (mercatorCoordinate.y - center.y) / units));
+              });
+            });
+          });
+          var shape = new Shape(points);
+          return new ShapeGeometry(shape);
+        } else {
+          return new PlaneGeometry(opt.size[0], opt.size[1]);
+        }
+      }
+
+      // 环境贴图
+      function loadBackground() {
+        // let sky = new Sky()
+        // let uniforms = sky.material.uniforms
+        // uniforms['turbidity'].value = 10
+        // uniforms['rayleigh'].value = 3
+        // uniforms['mieCoefficient'].value = 0.005
+        // uniforms['mieDirectionalG'].value = 0.7
+        // scene.add(sky)
+
+        new RGBELoader().setPath('/model/hdr/').load('hdr1.hdr', function (texture) {
+          texture.mapping = EquirectangularReflectionMapping;
+          scene.background = texture;
+          scene.environment = texture;
+        });
+      }
+    }
+  });
+};
 // EXTERNAL MODULE: ./src/package/style/hoverHtml.css
 var hoverHtml = __webpack_require__(544);
 ;// CONCATENATED MODULE: ./src/package/util/mapHoverHtml.js
@@ -58600,8 +59086,8 @@ var mapFullScreen_component = normalizeComponent(
 )
 
 /* harmony default export */ var mapFullScreen = (mapFullScreen_component.exports);
-;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/draw/index.vue?vue&type=template&id=018cd082&scoped=true&
-var drawvue_type_template_id_018cd082_scoped_true_render = function render() {
+;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-82.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/draw/index.vue?vue&type=template&id=48ba5a0f&scoped=true&
+var drawvue_type_template_id_48ba5a0f_scoped_true_render = function render() {
   var _vm = this,
     _c = _vm._self._c;
   return _c('div', [_c('div', {
@@ -58722,7 +59208,7 @@ var drawvue_type_template_id_018cd082_scoped_true_render = function render() {
     staticClass: "right-fixed"
   }, [_vm._t("right-fixed")], 2)]);
 };
-var drawvue_type_template_id_018cd082_scoped_true_staticRenderFns = [];
+var drawvue_type_template_id_48ba5a0f_scoped_true_staticRenderFns = [];
 
 // EXTERNAL MODULE: ./node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.js
 var mapbox_gl_draw = __webpack_require__(1512);
@@ -58868,7 +59354,7 @@ var mapStyle_component = normalizeComponent(
     showMapStyle: {
       // 修改地图风格
       type: Boolean,
-      default: true
+      default: false
     }
   },
   data() {
@@ -59031,9 +59517,9 @@ var mapStyle_component = normalizeComponent(
 });
 ;// CONCATENATED MODULE: ./src/package/draw/index.vue?vue&type=script&lang=js&
  /* harmony default export */ var package_drawvue_type_script_lang_js_ = (drawvue_type_script_lang_js_); 
-// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/draw/index.vue?vue&type=style&index=0&id=018cd082&prod&lang=scss&scoped=true&
-var drawvue_type_style_index_0_id_018cd082_prod_lang_scss_scoped_true_ = __webpack_require__(3994);
-;// CONCATENATED MODULE: ./src/package/draw/index.vue?vue&type=style&index=0&id=018cd082&prod&lang=scss&scoped=true&
+// EXTERNAL MODULE: ./node_modules/vue-style-loader/index.js??clonedRuleSet-64.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-64.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[2]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-64.use[3]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-64.use[4]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/draw/index.vue?vue&type=style&index=0&id=48ba5a0f&prod&lang=scss&scoped=true&
+var drawvue_type_style_index_0_id_48ba5a0f_prod_lang_scss_scoped_true_ = __webpack_require__(3901);
+;// CONCATENATED MODULE: ./src/package/draw/index.vue?vue&type=style&index=0&id=48ba5a0f&prod&lang=scss&scoped=true&
 
 ;// CONCATENATED MODULE: ./src/package/draw/index.vue
 
@@ -59046,11 +59532,11 @@ var drawvue_type_style_index_0_id_018cd082_prod_lang_scss_scoped_true_ = __webpa
 
 var draw_component = normalizeComponent(
   package_drawvue_type_script_lang_js_,
-  drawvue_type_template_id_018cd082_scoped_true_render,
-  drawvue_type_template_id_018cd082_scoped_true_staticRenderFns,
+  drawvue_type_template_id_48ba5a0f_scoped_true_render,
+  drawvue_type_template_id_48ba5a0f_scoped_true_staticRenderFns,
   false,
   null,
-  "018cd082",
+  "48ba5a0f",
   null
   
 )
@@ -59785,6 +60271,7 @@ var polygon_component = normalizeComponent(
 
 
 
+
 // 图层操作
 const mapLayers = {
   showLayerText: showLayerText,
@@ -59812,7 +60299,8 @@ const mapDraw = {
   addLayerPolygon: addLayerPolygon,
   addLayerCircle: addLayerCircle,
   addCircleAnimate: addCircleAnimate,
-  addLayerModel: addLayerModel
+  addLayerModel: addLayerModel,
+  addLayerWater: addLayerWater
 };
 
 // 地图工具