xy-map 1.0.60 → 1.1.2

package/src/layers/circleAnimate.js

@@ -1,147 +0,0 @@
-import mapSdk from '../map'
-import * as turf from '@turf/turf'
-
-import {
-  hasSource,
-  setSource,
-  hasLayer,
-} from './index'
-import {
-  addLayerText
-} from './Text'
-import {
-  mapClick
-} from '../util/mapEvent'
-
-const defaultOptions = {
-  id: '',
-  data: [],
-  text: {
-    show: true,
-    layout: {},
-    paint: {}
-  },
-  style: {
-    layout: {},
-    paint: {},
-  },
-  hover: null,
-  click: null,
-}
-
-/**
- * 添加圆图层
- */
-export const addCircleAnimate = (option, layerId) => {
-  let {
-    map
-  } = mapSdk
-
-  let opt = Object.assign({}, defaultOptions, option)
-  let id = opt.id
-  if (hasLayer(id)) {
-    setSource(id, opt.data)
-    return
-  }
-
-  let layout = opt.style ? opt.style.layout : {}
-  let layoutOpt = Object.assign({
-    'visibility': 'visible',
-  }, layout)
-
-  let paint = opt.style ? opt.style.paint : {}
-  let paintOpt = Object.assign({
-    'circle-opacity': 0.5, // 圆点的不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
-    'circle-radius': 50, // 圆点的半径（可选，值 >= 0，默认值为 5，单位：像素）
-    'circle-color': '#000000', // 圆点的颜色（可选，默认值为 #000000）
-    'circle-blur': 0, // 圆点的虚化（可选，默认值为 0。当值为 1 时，表示把圆虚化到只有圆心是不透明的）
-    'circle-translate': [0, 0], // 圆点的平移（可选，通过平移 [x, y] 达到一定的偏移量。默认值为 [0, 0]，单位：像素。）
-    'circle-translate-anchor': 'map', // 圆点的平移锚点，即相对的参考物（可选，可选值为 map、viewport，默认为 map）
-    'circle-pitch-scale': 'map', // 地图倾斜时圆点的缩放（可选，可选值为 map、viewport，默认为 map。值为 viewport 时，圆点不会缩放）
-    'circle-pitch-alignment': 'map', // 地图倾斜时圆点的对齐方式（可选，可选值为 map、viewport，默认为 map）
-    'circle-stroke-width': 0, // 圆点的描边宽度（可选，值 >= 0，默认值为 0，单位：像素）
-    'circle-stroke-color': '#000000', // 圆点的描边颜色（可选，默认值为 #000000）
-    'circle-stroke-opacity': 1 // 圆点的描边不透明度（可选，取值范围为 0 ~ 1，默认值为 1）
-  }, paint)
-
-  if (!hasSource(id)) {
-    map.addSource(opt.id, {
-      type: 'geojson',
-      data: opt.data,
-      cluster: false,
-      clusterMaxZoom: 16,
-      clusterRadius: 500,
-    })
-  }
-
-  map.addLayer({
-    id: id,
-    type: 'circle',
-    metadata: { // 元数据（可选，用于为 layer 附加任意的属性。为避免冲突，建议添加前缀，如 mapbox:）
-      'mapbox:name': 'test'
-    },
-    source: id,
-    layout: layoutOpt,
-    paint: paintOpt,
-    ...opt.other
-  }, layerId)
-
-  // 高亮样式
-  if (opt.high) {
-    let highPaint = opt.high.paint ? opt.high.paint : {
-      'circle-color': '#ff0'
-    }
-    let highPaintOpt = Object.assign({
-      ...paintOpt
-    }, highPaint)
-
-    map.addLayer({
-      id: id + '-high',
-      type: 'circle',
-      source: id,
-      layout: layoutOpt,
-      paint: highPaintOpt,
-      filter: ['==', ['boolean', ['get', 'high']], true]
-    }, layerId)
-  }
-
-  if (opt.click) {
-    mapClick(opt.id, opt.click)
-  }
-
-  // 添加文本图层
-  if (opt.text && opt.text.show) {
-    addLayerText('point', opt)
-  }
-
-  // 添加扩散动画
-  let radius = 0
-  let framesPerSecond = 15
-  let time = opt.animate.time || 1000
-  let maxRadius = opt.animate.radius || 200
-  let opacity = 1
-
-  if (opt.animate) {
-    animateMarker()
-  }
-
-  function animateMarker() {
-    setTimeout(() => {
-      requestAnimationFrame(animateMarker)
-
-      radius += (maxRadius - radius) / framesPerSecond
-      opacity -= (.9 / framesPerSecond)
-
-      map.setPaintProperty(id, 'circle-radius', radius)
-      map.setPaintProperty(id, 'circle-opacity', opacity < 0 ? 0 : opacity)
-
-      if (opacity <= 0) {
-        radius = 0
-        setTimeout(() => {
-          opacity = 1
-        }, 200)
-      }
-
-    }, time / framesPerSecond)
-  }
-}

package/src/layers/index.js

@@ -1,128 +0,0 @@
-// import mapBoxGl from 'mapbox-gl'
-import mapSdk from '../map'
-
-// 更新数据
-export const setSource = (id, data) => {
-  let {
-    map
-  } = mapSdk
-  let hasSource = map.getSource(id)
-  if (hasSource) {
-    map.getSource(id).setData(data)
-  }
-}
-// 判断图层是否存在
-export const hasLayer = (id) => {
-  let {
-    map
-  } = mapSdk
-
-  return map.getLayer(id)
-}
-
-// 判断数据是否存在
-export const hasSource = (id) => {
-  let {
-    map
-  } = mapSdk
-
-  return map.getSource(id)
-}
-
-// 删除图层
-export const removeLayer = (id) => {
-  let {
-    map
-  } = mapSdk
-  map.removeLayer(id)
-  let arr = getLayerAll()
-  let layers = arr.filter(item => item.id.includes(id + '-'))
-  layers.forEach(item => {
-    if (hasLayer(item.id)) {
-      map.removeLayer(item.id)
-    }
-  })
-}
-
-/**
- * 获取所有图层
- */
-export const getLayerAll = () => {
-  let {
-    map
-  } = mapSdk
-
-  let data = map.getStyle().layers
-  // console.log(data)
-  return data
-}
-
-// 显示隐藏图层
-export const showLayer = (id, show = false) => {
-  let {
-    map
-  } = mapSdk
-  show = show ? 'visible' : 'none'
-  map.setLayoutProperty(id, 'visibility', show)
-  let arr = getLayerAll()
-  let layers = arr.filter(item => item.id.includes(id + '-'))
-  layers.forEach(item => {
-    if (hasLayer(item.id)) {
-      map.setLayoutProperty(item.id, 'visibility', show)
-    }
-  })
-}
-
-// 显隐文字
-export const showLayerText = (show, id = '') => {
-  let {
-    map
-  } = mapSdk
-
-  if (id) {
-    setPaint(id, 'text-opacity', show ? 1 : 0)
-  } else {
-    let textLayer = map.getStyle().layers
-    textLayer.forEach(layer => {
-      if (layer.type === 'symbol') {
-        setPaint(layer.id, 'text-opacity', show ? 1 : 0)
-      }
-    })
-  }
-}
-
-// 修改Layout
-export const setLayout = (id, key, value) => {
-  let {
-    map
-  } = mapSdk
-
-  map.setLayoutProperty(id, key, value)
-}
-
-// 修改Paint
-export const setPaint = (id, key, value) => {
-  let {
-    map
-  } = mapSdk
-
-  map.setPaintProperty(id, key, value)
-}
-
-// 修改Filter
-export const setFilter = (key, filter) => {
-  let {
-    map
-  } = mapSdk
-
-  map.setFilter(key, filter)
-}
-
-// 设置高亮
-export const setHigh = (id, filter) => {
-  let {
-    map
-  } = mapSdk
-
-  map.setFilter(id + '-high', filter)
-}

package/src/layers/model copy.js

@@ -1,314 +0,0 @@
-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 addLayerModel = (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
-				})
-			}
-		}
-	})
-}