gisthreemap
Version:
基于webGL的三维api
203 lines (189 loc) • 7.43 kB
JavaScript
const popbg = require('../../assets/images/popbg1.png').default || require('../../assets/images/popbg1.png')
/**
* 事件类
*/
import Popup from './Popup'
class MapEvent {
constructor(viewer, mapEventOption) {
// options
this.openEntityEventMap = mapEventOption.openEntityEventMap || false
this.pipeEventMap = mapEventOption.pipeEventMap || false
console.log('进入事件构造函数')
// 事件添加
this.viewer = viewer
this.handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
// 初始化弹窗
this.popup = new Popup(this.viewer)
this.addEntityEventMap()
// 模型变色
this.clickMouseModel()
this.moveMouseGetCoordinate()
}
/**
* 注册事件
* @param {*} type
* LEFT_DOWN Number 表示鼠标左键按下事件。
LEFT_UP Number 代表鼠标左键按下事件。
LEFT_CLICK Number 表示鼠标左键单击事件。
LEFT_DOUBLE_CLICK Number 表示鼠标左键双击事件。
RIGHT_DOWN Number 表示鼠标左键按下事件。
RIGHT_UP Number 代表鼠标右键单击事件。
RIGHT_CLICK Number 代表鼠标右键单击事件。
MIDDLE_DOWN Number 表示鼠标中键按下事件。
MIDDLE_UP Number 代表鼠标中键按下事件。
MIDDLE_CLICK Number 代表鼠标中键事件。
MOUSE_MOVE Number 表示鼠标移动事件。
WHEEL Number 代表鼠标滚轮事件。
PINCH_START Number 表示触摸屏上的两指事件的开始。
PINCH_END Number 表示触摸屏上两指事件的结束。
PINCH_MOVE Number 表示触摸表面上两个手指事件的变化。
* @param {*} callback
*/
registerterMapEvent(type, callback) {
this.handler.setInputAction(callback, Cesium['ScreenSpaceEventType'][type])
}
/**
* 新增preRender事件
* @param {} callback
*/
addPreRenerEvent(callback) {
const removeHandler = this.viewer.scene.preRender.addEventListener(callback)
return removeHandler
}
removePreRenerEvent(handler) {
// return this.viewer.scene.preRender.removeEventListener(handler)
handler.call()
}
/**
* 注销事件
* @param {} type
*/
removeMapEvent(type) {
this.handler.removeInputAction(Cesium['ScreenSpaceEventType'][type])
}
addEntityEventMap() {
this.registerterMapEvent('LEFT_CLICK', (evt) => {
if (!this.openEntityEventMap) {
return
}
// 将屏幕坐标转换为世界坐标-笛卡尔空间直角坐标系（Cartesian3）--世界坐标
const cartesian3 = this.viewer.camera.pickEllipsoid(evt.position, this.viewer.scene.globe.ellipsoid)
// console.log(cartesian3,'cartesian3cartesian3')
// 将笛卡尔坐标转换为地理坐标
const cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
// 将弧度转为度的十进制表示，保留5位小数
const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5)
const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5)
// 获取地图上的实体(entity)坐标
const pick = this.viewer.scene.pick(evt.position)
// 移除弹窗
if (document.querySelector('#popup')) {
this.popup.close()
}
// 如果pick不是undefined，那么就是点到点位了
if (pick && pick.id) {
if (pick.id._id.includes('Equpoint')) {
// 移动视角
var heading = Cesium.Math.toRadians(0)
var pitch = Cesium.Math.toRadians(-45.0)
// let heading = this.viewer.scene.camera.heading
// let pitch = this.viewer.scene.camera.pitch
let position = this.viewer.scene.camera.positionCartographic
// 镜头距点位距离
var range = position.height
// 飞行定位到点位,默认飞行3秒
// this.CommonflyTo(pick, { offset: new Cesium.HeadingPitchRange(heading, pitch, range), duration: 1 })
this.viewer.flyTo(pick.id, { offset: new Cesium.HeadingPitchRange(heading, pitch, range), duration: 2 }).then(item => {
this.popup.open({
title: pick.id._name,
content: pick.id._content,
position: pick.id.position._value,
style: {
popup_style: pick.id.popup_style || `background:url(${popbg});background-size: 100% 100%;z-index:10;
background-repeat: no-repeat;color:#3EBFE1; width: 360px;
padding: 10px;
box-sizing: border-box;` ,
popup_classname: pick.id._id
}
})
})
// 中心定位到点位的位置
// this.flyToFun(lon, lat, 500)
}
}
})
}
// 点位点击开关
checkEntityEventMap(type) {
this.openEntityEventMap = type
}
// 鼠标移入获取经纬度
moveMouseGetCoordinate(callback) {
this.registerterMapEvent('MOUSE_MOVE', (evt) => {
//捕获椭球体，将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标，返回球体表面的点
const cartesian3 = this.viewer.camera.pickEllipsoid(evt.endPosition, this.viewer.scene.globe.ellipsoid)
if (cartesian3) {
//将笛卡尔三维坐标转为地图坐标（弧度）
const cartographic = this.viewer.scene.globe.ellipsoid.cartesianToCartographic(cartesian3)
//将地图坐标（弧度）转为十进制的度数
const latitude = Number(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6))
const longitude = Number(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6))
const height = Number((this.viewer.camera.positionCartographic.height / 1000).toFixed(2))
// console.log({
// longitude,
// latitude,
// height,
// ...cartesian3
// })
if (callback) {
callback({
longitude,
latitude,
height,
...cartesian3
})
}
}
// callback(evt)
})
}
// 鼠标点击模型变色
clickMouseModel() {
// Shade selected model with highlight.
const fragmentShaderSource = `
uniform sampler2D colorTexture;
varying vec2 v_textureCoordinates;
uniform vec4 highlight;
void main() {
vec4 color = texture2D(colorTexture, v_textureCoordinates);
if (czm_selected()) {
vec3 highlighted = highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb;
gl_FragColor = vec4(highlighted, 1.0);
} else {
gl_FragColor = color;
}
}
`;
const stage = this.viewer.scene.postProcessStages.add(
new Cesium.PostProcessStage({
fragmentShader: fragmentShaderSource,
uniforms: {
highlight: function () {
// return new Cesium.Color(1.0, 0.0, 0.0, 0.5);
return new Cesium.Color(1.0, 1.0, 1.0, 0.7);
},
},
})
);
stage.selected = [];
this.registerterMapEvent('MOUSE_MOVE', (movement) => {
const pickedObject = this.viewer.scene.pick(movement.endPosition);
if (Cesium.defined(pickedObject)) {
stage.selected = [pickedObject.primitive];
} else {
stage.selected = [];
}
})
}
}
export default MapEvent