let removeHandler = null
|
let htmlLayerCollection = []
|
|
// 创建撒点
|
function createPoint(option) {
|
const { type, stcd, stnm, imgUrl, text, lng, lat, height, callback, imgSize } = option
|
if (!option.lng || !option.lat) {
|
return
|
}
|
let param = {
|
type,
|
stcd,
|
stnm,
|
position: Cesium.Cartesian3.fromDegrees(lng, lat, 0),
|
}
|
if (text) {
|
param.label = {
|
// 文本。支持显式换行符“ \ n”
|
text: option.text || "默认标签",
|
// 字体样式，以CSS语法指定字体
|
font: "12pt Source Han Sans CN",
|
// 字体颜色
|
fillColor: Cesium.Color.WHITE,
|
// 背景颜色
|
backgroundColor: Cesium.Color.BLACK.withAlpha(0.8),
|
// 是否显示背景颜色
|
showBackground: true,
|
// 字体边框
|
outline: false,
|
// 字体边框颜色
|
outlineColor: Cesium.Color.WHITE,
|
// 字体边框尺寸
|
outlineWidth: 2,
|
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
|
scale: 1.0,
|
// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
|
style: Cesium.LabelStyle.FILL_AND_OUTLINE,
|
// 相对于坐标的水平位置
|
verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// 相对于坐标的水平位置
|
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
|
// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
|
// pixelOffset: new Cesium.Cartesian2(-10, -90),
|
pixelOffset: new Cesium.Cartesian2(0, -30),
|
// 显示在距相机的距离处的属性，多少区间内是可以显示的
|
// distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
|
// 是否显示
|
show: false,
|
}
|
param.point = {
|
color: Cesium.Color.GREEN,
|
pixelSize: 3,
|
clampToGround: true,
|
}
|
}
|
// 当创建的点为图片时
|
if (imgUrl) {
|
param.billboard = {
|
// 图像地址，URI或Canvas的属性
|
image: imgUrl,
|
// 高度（以像素为单位）
|
height: imgSize || 20,
|
// 宽度（以像素为单位）
|
width: imgSize || 20,
|
// 逆时针旋转
|
// 大小是否以米为单位
|
sizeInMeters: false,
|
// 相对于坐标的垂直位置
|
// verticalOrigin: Cesium.VerticalOrigin.CENTER,
|
// 相对于坐标的水平位置
|
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
|
// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
|
// pixelOffset: new Cesium.Cartesian2(0, 3),
|
// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
|
// scale: 1,
|
scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
|
// 显示在距相机的距离处的属性，多少区间内是可以显示的
|
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, option.maxVisibleDistance),
|
// 是否显示
|
show: true,
|
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
// heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
zIndex: 1,
|
}
|
}
|
const entity = new Cesium.Entity(param)
|
let point = viewer.entities.add(entity)
|
if (callback) {
|
eventMap.set(entity.id, callback)
|
}
|
pointCollection.push(point)
|
|
return point
|
}
|
|
// 移除所有点位
|
function removePoints() {
|
if (pointCollection.length > 0) {
|
pointCollection.forEach(point => {
|
viewer.entities.remove(point)
|
})
|
pointCollection = []
|
}
|
}
|
// 隐藏所有点位
|
function hidePoints() {
|
if (pointCollection.length > 0) {
|
pointCollection.forEach(point => {
|
point.show = false
|
})
|
}
|
}
|
function showPoints() {
|
if (pointCollection.length > 0) {
|
pointCollection.forEach(point => {
|
point.show = false
|
})
|
}
|
}
|
export function hideAllHtmlLayer() {
|
if (htmlLayerCollection.length > 0) {
|
htmlLayerCollection.forEach(dom => {
|
dom.style.display = "none"
|
})
|
}
|
}
|
export function showAllHtmlLayer() {
|
if (htmlLayerCollection.length > 0) {
|
htmlLayerCollection.forEach(dom => {
|
dom.style.display = "block"
|
})
|
}
|
}
|
|
// 创建自定义html图层
|
export function createHtmlLayer(option) {
|
const maxVisibleDistance = option.maxVisibleDistance || 5000
|
let point = Cesium.Cartesian3.fromDegrees(option.lng, option.lat, option.height)
|
var div = document.createElement("div")
|
// div.id = "info_" + option.id
|
div.className = "district-count"
|
div.onclick = () => {
|
if (option.callback) {
|
option.callback(option)
|
}
|
}
|
div.innerHTML =
|
option.html ||
|
`<div style='height: 50px;
|
width: 50px;
|
position: absolute;
|
z-index: 2;
|
left: 0;
|
top: 0;'>自定义标签<div>`
|
document.body.appendChild(div)
|
htmlLayerCollection.push(div)
|
let scene = viewer.scene
|
function showAt(position) {
|
if (div) {
|
if (position) {
|
var windowPosition = new Cesium.Cartesian2()
|
// var canvasHeight = scene.canvas.height
|
let positions = Cesium.SceneTransforms.worldToWindowCoordinates(
|
scene,
|
position,
|
windowPosition
|
)
|
// top 方案
|
const left = windowPosition.x - 80
|
const top = `${windowPosition.y - (div.offsetHeight + 10)}`
|
|
if (left > 0 && top > 0) {
|
div.style.position = "absolute"
|
div.style.left = `${left}px`
|
div.style.top = `${top}px`
|
} else {
|
div.style.display = "none"
|
}
|
}
|
}
|
}
|
|
function setVisible(visible) {
|
div.style.display = visible ? "block" : "none"
|
}
|
removeHandler = viewer.scene.postRender.addEventListener(e => {
|
// let isVisible = new Cesium.EllipsoidalOccluder(
|
// Cesium.Ellipsoid.WGS84,
|
// viewer.camera.position
|
// ).isPointVisible(point)
|
if (isOverDistance(maxVisibleDistance)) {
|
setVisible(false)
|
} else {
|
setVisible(true)
|
showAt(point)
|
}
|
})
|
return div
|
}
|
|
function removeAllHtmlLayer() {
|
if (htmlLayerCollection.length > 0) {
|
htmlLayerCollection.forEach(dom => {
|
document.body.removeChild(dom)
|
// let dom = document.getElementById(id)
|
// if (dom) {
|
// document.body.removeChild(dom)
|
// }
|
})
|
htmlLayerCollection = []
|
}
|
}
|
|
export function isVisibleDistance(miniVisibleDistance = 0, maxVisibleDistance = 5000000) {
|
const height = viewer.camera.positionCartographic.height
|
if (height >= miniVisibleDistance && height <= maxVisibleDistance) {
|
return true
|
}
|
return false
|
}
|
