xy-map 1.0.21 → 1.0.23

package/src/layers/scene.js

@@ -0,0 +1,314 @@
+import mapSdk from '../map'
+import * as THREE from 'three'
+import * as dat from 'dat.gui'
+
+import {
+	EffectComposer
+} from 'three/examples/jsm/postprocessing/EffectComposer'
+import {
+	RenderPass
+} from 'three/examples/jsm/postprocessing/RenderPass'
+import {
+	Sky
+} from 'three/examples/jsm/objects/Sky'
+// import {
+// 	RoomEnvironment
+// } from 'three/examples/jsm/environments/RoomEnvironment'
+// import { // 环境贴图
+// 	RGBELoader
+// } from 'three/examples/jsm/loaders/RGBELoader'
+
+import mapBoxGl from 'mapbox-gl'
+
+import {
+	hasLayer,
+	removeLayer
+} from './index'
+
+const defaultOptions = {
+	id: '3dModel',
+	path: '/img/30.gltf',
+	position: [103.353557, 23.362395], // 位置
+	directionalLight: [{
+		color: 0xfffcce,
+		intensity: 1,
+		position: [-4100, 3000, -1800],
+		shadow: {},
+	}],
+	ambientLight: {
+		color: 0xFFFFFF,
+		intensity: 0.2,
+	},
+	sky: {
+		size: 1000000,
+		box: [1, 1, 0]
+	},
+	shadow: false,
+	edit: false,
+}
+
+/**
+ * 添加场景
+ */
+export const addLayerScene = (option, layerId = '') => {
+	return new Promise((resolve) => {
+		let {
+			map
+		} = mapSdk
+
+		let opt = Object.assign({}, defaultOptions, option)
+		let id = opt.id
+
+		let camera = ''
+		let scene = ''
+		let renderer = ''
+		let customLayer = ''
+		let sun = opt.sky && opt.sky.box ? new THREE.Vector3(opt.sky.box[0], opt.sky.box[1], opt.sky.box[2]) : new THREE.Vector3(1, 1, 0)
+
+
+		if (hasLayer(id)) {
+			removeLayer(id)
+		}
+		addModel(id)
+		map.addLayer(customLayer, layerId)
+
+		resolve({
+			scene,
+			sun
+		})
+
+		function addModel() {
+			const modelOrigin = opt.position // 中心点
+			const modelAltitude = 0 // 高度
+			const modelRotate = [Math.PI / 2, 0, 0]
+
+			const modelAsMercatorCoordinate = mapBoxGl.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 gui = opt.edit ? new dat.GUI() : null
+					const container = map.getCanvas()
+
+					// 摄像机
+					camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 1, 5000)
+					// camera = new THREE.Camera()
+					// 场景
+					scene = new THREE.Scene()
+
+					// 辅助坐标轴
+					// if (gui) {
+					// 	let AxesHelper = new THREE.AxesHelper(100)
+					// 	AxesHelper.position.y = opt.translate[1]
+					// 	scene.add(AxesHelper)
+					// }
+
+					// 创建灯光
+					if (opt.directionalLight && opt.directionalLight.length > 0) {
+						opt.directionalLight.forEach((item, index) => {
+							let position = {
+								x: item.position[0],
+								y: item.position[1],
+								z: item.position[2],
+							}
+							const directionalLight = new THREE.DirectionalLight(item.color, item.intensity)
+							directionalLight.position.set(position.x, position.y, position.z)
+							directionalLight.width = 1
+							directionalLight.height = 1
+							// directionalLight.distance = 0
+							// directionalLight.decay = 0 // 衰减强度
+							// directionalLight.exponent = 0 // 衰减速度
+							// directionalLight.angle = 0 // 光源角度
+							directionalLight.castShadow = true
+
+							// 开启编辑模式
+							if (gui) {
+								const lightGui = gui.addFolder('灯光' + (index + 1))
+								lightGui.addColor(item, 'color').name('颜色').onChange(val => directionalLight.color = new THREE.Color(val))
+								lightGui.add(item, 'intensity').min(0).step(0.1).name('强度').onChange(val => directionalLight.intensity = val)
+								lightGui.add(position, 'x').step(100).name('x').onChange(val => directionalLight.position.x = val)
+								lightGui.add(position, 'y').step(100).name('y').onChange(val => directionalLight.position.y = val)
+								lightGui.add(position, 'z').step(100).name('z').onChange(val => directionalLight.position.z = val)
+								lightGui.open()
+
+								let pointLightHelper = new THREE.DirectionalLightHelper(directionalLight, 1000)
+								scene.add(pointLightHelper)
+							}
+
+							// 开启阴影
+							let shadow = Object.assign({
+								size: 2000,
+								near: 1,
+								far: 8000,
+								clarity: 14, // 阴影清晰度 0-20
+								bias: -0.0005
+							}, item.shadow)
+							if (shadow) {
+								directionalLight.castShadow = true
+								const d = shadow.size || 1000 //阴影范围
+								directionalLight.shadow.camera.left = -d
+								directionalLight.shadow.camera.right = d
+								directionalLight.shadow.camera.top = d
+								directionalLight.shadow.camera.bottom = -d
+								directionalLight.shadow.camera.near = shadow.near || 1
+								directionalLight.shadow.camera.far = shadow.far || 8000
+								directionalLight.shadow.mapSize.width = 2 ** shadow.clarity // 定义阴影贴图的宽度和高度,必须为2的整数此幂
+								directionalLight.shadow.mapSize.height = 2 ** shadow.clarity // 较高的值会以计算时间为代价提供更好的阴影质量
+								directionalLight.shadow.bias = shadow.bias || -0.05 //解决条纹阴影的出现
+							}
+							scene.add(directionalLight)
+						})
+					}
+
+					// 环境光
+					if (opt.ambientLight) {
+						let item = {
+							color: opt.ambientLight.color,
+							intensity: opt.ambientLight.intensity
+						}
+						let ambientLight = new THREE.AmbientLight(item.color, item.intensity)
+						if (gui) {
+							const lightGui = gui.addFolder('环境光')
+							lightGui.addColor(item, 'color').name('颜色').onChange(val => ambientLight.color = new THREE.Color(val))
+							lightGui.add(item, 'intensity').min(0).step(0.1).name('强度').onChange(val => ambientLight.intensity = val)
+							lightGui.open()
+						}
+						scene.add(ambientLight)
+					}
+
+					// 创建天空
+					if (opt.sky) {
+						let sky = new Sky()
+						sky.scale.setScalar(opt.sky.size || 1000000)
+						let uniforms = sky.material.uniforms
+						uniforms['sunPosition'].value.copy(sun)
+						scene.add(sky)
+					}
+
+					// 渲染器
+					renderer = new THREE.WebGLRenderer({
+						canvas: map.getCanvas(),
+						context: gl,
+						antialias: true,
+						// logarithmicDepthBuffer: true
+					})
+
+					// 创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
+					let composer = new EffectComposer(renderer)
+					composer.setSize(container.clientWidth, container.clientHeight)
+
+					let renderPass = new RenderPass(scene, camera)
+					composer.addPass(renderPass)
+
+					// 处理阴影
+					if (opt.shadow) {
+						renderer.shadowMap.enabled = true
+						renderer.shadowMap.type = THREE.PCFSoftShadowMap
+					}
+					renderer.autoClear = false
+					renderer.outputEncoding = THREE.sRGBEncoding
+					renderer.setSize(container.clientWidth, container.clientHeight)
+
+					// RoomEnvironment
+					// const pmremGenerator = new THREE.PMREMGenerator(renderer)
+					// scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.001).texture
+
+					// 缩放比例调整
+					// window.addEventListener('resize', () => {
+					// 	renderer.setSize(container.clientWidth, container.clientHeight)
+					// 	camera.aspect = container.clientWidth / container.clientHeight
+					// 	camera.updateProjectionMatrix()
+					// })
+
+					// getIntersects() // 点击事件
+				},
+				render: cameraUpdate
+			}
+
+			return customLayer
+
+			// 渲染摄像机
+			function cameraUpdate(gl, matrix) {
+				const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX)
+				const rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY)
+				const rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ)
+
+				const m = new THREE.Matrix4().fromArray(matrix)
+				const l = new THREE.Matrix4().makeTranslation(
+						modelTransform.translateX,
+						modelTransform.translateY,
+						modelTransform.translateZ
+					).scale(new THREE.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.resetState()
+				renderer.render(scene, camera)
+				map.triggerRepaint()
+			}
+
+			// 点击事件
+			function getIntersects() {
+				const container = map.getCanvas()
+
+				container.addEventListener('click', (event) => {
+					event.preventDefault()
+
+					// 声明 raycaster 和 mouse 变量
+					let raycaster = new THREE.Raycaster()
+					let mouse = new THREE.Vector2()
+
+					// 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
+					mouse.x = (event.layerX / container.clientWidth) * 2 - 1
+					mouse.y = -(event.layerY / container.clientHeight) * 2 + 1
+
+					//通过鼠标点击的位置(二维坐标)和当前相机的矩阵计算出射线位置
+					raycaster.setFromCamera(mouse, camera)
+
+					// 获取与射线相交的对象数组，其中的元素按照距离排序，越近的越靠前
+					let meshArr = []
+					findMesh(scene.children)
+					let intersects = raycaster.intersectObjects(meshArr, true)
+
+					// 获取所有mesh
+					function findMesh(list) {
+						list.forEach(item => {
+							if (item.children.length > 0) {
+								findMesh(item.children)
+							} else {
+								meshArr.push(item)
+							}
+						})
+					}
+					console.log(intersects)
+					return intersects
+				})
+			}
+		}
+	})
+}

package/src/layers/water.js

@@ -0,0 +1,239 @@
+import mapSdk from '../map'
+import * as THREE from 'three'
+import * as dat from 'dat.gui'
+
+import {
+	EffectComposer
+} from 'three/examples/jsm/postprocessing/EffectComposer'
+import {
+	RenderPass
+} from 'three/examples/jsm/postprocessing/RenderPass'
+import {
+	Water
+} from 'three/examples/jsm/objects/Water'
+import {
+	Sky
+} from 'three/examples/jsm/objects/Sky'
+import {
+	RoomEnvironment
+} from 'three/examples/jsm/environments/RoomEnvironment'
+import {
+	RGBELoader
+} from 'three/examples/jsm/loaders/RGBELoader'
+
+import mapBoxGl from 'mapbox-gl'
+
+import {
+	hasLayer,
+	removeLayer
+} from './index'
+
+const defaultOptions = {
+	id: 'water',
+	position: [103.353557, 23.362395], // 位置
+	hight: 0, // 高度
+	directionalLight: [{
+		color: 0xfffcce,
+		intensity: 1,
+		position: [-4100, 3000, -1800],
+		shadow: {},
+	}],
+	ambientLight: {
+		color: 0xFFFFFF,
+		intensity: 1,
+	},
+	shadow: false,
+	edit: false,
+}
+
+/**
+ * 添加水面
+ */
+export const addLayerWater = (option, layerId = '') => {
+	return new Promise((resolve) => {
+		let {
+			map
+		} = mapSdk
+
+		let opt = Object.assign({}, defaultOptions, option)
+		let id = opt.id
+
+		let camera = ''
+		let scene = ''
+		let renderer = ''
+		let customLayer = ''
+		let waterP = ''
+
+		if (hasLayer(id)) {
+			removeLayer(id)
+		}
+		addWater(id)
+		map.addLayer(customLayer, layerId)
+
+		resolve(scene)
+
+		function addWater() {
+			const modelOrigin = opt.position // 中心点
+			const modelAltitude = 0 // 高度
+			const modelRotate = [Math.PI / 2, 0, 0]
+
+			const modelAsMercatorCoordinate = mapBoxGl.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 gui = opt.edit ? new dat.GUI() : null
+					const container = map.getCanvas()
+
+					// 摄像机
+					camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 1, 5000)
+					// camera = new THREE.Camera()
+					// 场景
+					scene = new THREE.Scene()
+
+					// let ambientLight = new THREE.AmbientLight(opt.ambientLight.color, opt.ambientLight.intensity)
+					// scene.add(ambientLight)
+
+					// const directionalLight = new THREE.DirectionalLight(opt.ambientLight.color, opt.ambientLight.intensity)
+					// directionalLight.position.set(-4100, 3000, -1800)
+					// let pointLightHelper = new THREE.DirectionalLightHelper(directionalLight, 1000)
+					// scene.add(pointLightHelper)
+
+
+					// 水面
+					let geometry = new THREE.PlaneBufferGeometry(200, 200, 1)
+					// let geometry = new THREE.PlaneGeometry(200, 200)
+					// let sun = new THREE.Vector3(0, 1, 0)
+					waterP = new Water(geometry, {
+						textureWidth: 512,
+						textureHeight: 512,
+						waterNormals: new THREE.TextureLoader().load(
+							'/img/waternormals.jpg',
+							function (texture) {
+								texture.wrapS = texture.wrapT = THREE.RepeatWrapping
+							}
+						),
+						alpha: 1,
+						side: THREE.DoubleSide,
+						// sunDirection: directionalLight.position.clone().normalize(),
+						// sunDirection: sun,
+						sunColor: 0xffffff,
+						waterColor: 0x001e0f,
+						distortionScale: 3.7,
+						fog: scene.fog !== undefined
+					})
+
+					// waterP.rotation.x = -Math.PI / 2
+					waterP.rotation.x = Math.PI * 0.5
+					scene.position.y = opt.hight
+					scene.add(waterP)
+
+					// 创建天空
+					// const r = 100
+					// const tiankong = new THREE.SphereBufferGeometry(r, r, r)
+					// tiankong.scale(-r, r, r) // 球面反转，由外表面改成内表面贴图
+					// const material = new THREE.MeshBasicMaterial({
+					// 	map: new THREE.TextureLoader().load('/img/blue.jpg') // 上面的全景图片
+					// })
+
+					// let sky = new THREE.Mesh(tiankong, material)
+					// sky.position.y = 100
+					// let sky = new Sky()
+					// scene.add(sky)
+					// scene.background = new THREE.Color(0x3399ff)
+					loadBackground()
+
+					// 渲染器
+					renderer = new THREE.WebGLRenderer({
+						canvas: map.getCanvas(),
+						context: gl,
+						logarithmicDepthBuffer: true,
+						antialias: true
+					})
+
+
+
+					renderer.autoClear = false
+					renderer.outputEncoding = THREE.sRGBEncoding
+					renderer.setSize(container.clientWidth, container.clientHeight)
+
+
+
+					// RoomEnvironment
+					// const pmremGenerator = new THREE.PMREMGenerator(renderer)
+					// scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.001).texture
+				},
+				render: cameraUpdate
+			}
+
+			return customLayer
+
+			// 渲染摄像机
+			function cameraUpdate(gl, matrix) {
+				const rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX)
+				const rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY)
+				const rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ)
+
+				const m = new THREE.Matrix4().fromArray(matrix)
+				const l = new THREE.Matrix4().makeTranslation(
+						modelTransform.translateX,
+						modelTransform.translateY,
+						modelTransform.translateZ
+					).scale(new THREE.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 += 2.0 / 60.0
+			}
+
+			// 环境贴图
+			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('/img/hdr/').load(
+					'quarry_01_1k.hdr',
+					function (texture) {
+						texture.mapping = THREE.EquirectangularReflectionMapping
+						scene.background = texture
+						scene.environment = texture
+
+					}
+				)
+			}
+		}
+	})
+}

package/src/map.js

@@ -11,7 +11,20 @@ var defaultOptions = {
   projection: 'globe',
   fog: true, // 雾
   style: 'mapbox://styles/mapbox-map-design/ckhqrf2tz0dt119ny6azh975y',
-  defaultLanguage: 'zh'
+  defaultLanguage: 'zh',
+  // preserveDrawingBuffer: true, // 允许地图导出为图片
+  // sprite: 'mapbox://sprites/mapbox/bright-v8', //不受地图旋转缩放影响的图标等，类似精灵漂浮在空中，当有 layer 使用了 background-pattern、fill-pattern、line-pattern、fill-extrusion-pattern、icon-image 等属性时，sprite 必填。
+  // transition: { //全局的过渡动画属性
+  //   duration: 300, // 过渡的持续时间（可选，单位：毫秒，默认值为 300）
+  //   delay: 0 // 延迟多久开始过渡（可选，单位：毫秒，默认值为 0）
+  // },
+  light: {
+    anchor: 'viewport', // 锚点，指定作用的目标（可选，可选值 map、viewport，默认值为 viewport）
+    position: [1.15, 210, 30], // 位置（可选，默认值为 [1.15,210,30]）
+    color: 'white', // 颜色（可选，默认值为 #ffffff）
+    intensity: 0.5 // 强度（可选，取值范围为 0 ~ 1，默认值为 0.5）
+  },
+  // glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf'
   // style: 'mapbox://styles/mapbox/streets-v9',
 
 }
@@ -19,12 +32,15 @@ var defaultOptions = {
 import mapBoxGl from 'mapbox-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
 import './style/map.css'
+import {
+  Message
+} from 'element-ui'
 
 var popup = null
 
 class mapSdk {
   constructor() {
-    this.accessToken = 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2t4NzAxZzdvMDZ5MTJ2azN0NzBqZGt0bCJ9.cRDXTquac05DVKJ5wc854w'
+    this.accessToken = 'pk.eyJ1IjoiaGo0NjI3NzEzOTYiLCJhIjoiY2w5YzNjOTZvMDF6NDNwb2d6YmJkYWRpMCJ9.-fW-OChGB1oY2DCMO_c8sg'
     this.options = defaultOptions // 初始参数
     this.map = null
   }
@@ -38,6 +54,13 @@ class mapSdk {
     this.options = Object.assign({}, defaultOptions, options)
 
     const map = this.map = new mapBoxGl.Map(this.options)
+    console.log(map)
+
+    // 监听报错
+    map.on('error', (e) => {
+      console.log(e)
+      Message.error('地图资源加载失败\n' + e.error.message)
+    })
 
     return new Promise((resolve, reject) => {
       map.on('load', () => {
@@ -130,11 +153,11 @@ class mapSdk {
         'id': 'sky',
         'type': 'sky',
         'paint': {
-          'sky-type': 'atmosphere',
+          'sky-type': 'atmosphere', // gradient / atmosphere
           'sky-atmosphere-sun': [0.0, 0.0],
-          'sky-atmosphere-sun-intensity': 15
+          'sky-atmosphere-sun-intensity': 30
         }
-      })
+      }, 'background')
 
       // 白天
       map.setFog({