- <template>
- <!-- GIS地图 -->
- <div class="videoMapGis">
- <!-- <gisMap></gisMap> -->
- <MapBox :initJson="`/static/libs/mapbox/style/floodOneMap.json`"></MapBox>
- </div>
- </template>
-
- <script setup name="page">
- // import gisMap from '../../gisMapPage/gisMapCommonPage.vue';
- import { pagecameraResource } from '@/api/cameraResource/cameraResource';
- import SPIcon from '@/assets/newImgs/layerIcon/SP2.png';
- import { nextTick } from 'vue';
- import { getImageUrl } from '@/utils/ruoyi';
- import MapBox from '@/views/gisMapPage/gisMapBox1'; //gis地图
- import bus from '@/bus';
-
- const { proxy } = getCurrentInstance();
- const allData = reactive({
- videoGeojson: {},
- });
- function getList() {
- let queryParams = {
- pageNum: 1,
- pageSize: 999,
- };
- pagecameraResource(queryParams).then(response => {
- let videoData = response.data;
- console.log(videoData);
- allData.videoGeojson = getVideoGeojson(videoData);
- console.log(allData.videoGeojson);
- //initCluster(newfiberMap.getMap(), allData.videoGeojson, 'videoMonitor', SPIcon);
- // addGeoJsonPoint(allData.videoGeojson, 'videoMonitor', SPIcon);
- setTimeout(() => {
- bus.emit('setGeoJSON', { json: allData.videoGeojson, key: 'video' });
- bus.emit('setLayerVisible', { layername: 'video', isCheck: true });
- }, 2000);
- });
- }
- function getVideoGeojson(list) {
- return {
- type: 'FeatureCollection',
- features: list.map(item => {
- let geometry = {
- type: 'Point',
- coordinates: [Number(item.x), Number(item.y)],
- };
- return { type: 'Feature', geometry, properties: item };
- }),
- };
- }
- //添加点状图层
- function addGeoJsonPoint(geojson, type, icon) {
- console.log('geojsongeojson', geojson);
-
- // geojson.features.forEach(feature => {
- // let name =
- // feature.properties.name ||
- // feature.properties.dickName ||
- // feature.properties.architectureName ||
- // feature.properties.dikeName ||
- // feature.properties.warehouseName ||
- // feature.properties.siteName;
- // feature.properties = Object.assign(feature.properties, {
- // style_: {
- // id: type,
- // name,
- // type: NewFiberMap.Enum.VectorType.ICON,
- // options: {
- // show: true,
- // name:
- // feature.properties.name ||
- // feature.properties.dickName ||
- // feature.properties.architectureName ||
- // feature.properties.dikeName ||
- // feature.properties.warehouseName ||
- // feature.properties.siteName,
- // id: type,
- // url: icon, //styleSet.iconUrl,
- // width: 45, //styleSet.width || 75,
- // height: 79, //styleSet.height || 45,
- // pixelOffset: [0, 0],
- // distanceDisplayCondition: [Number.MIN_VALUE, 700000],
- // },
- // labelOptions: {
- // font: '15px PingFang SC',
- // color: 'rgba(255, 255, 255,1)',
- // pixelOffset: [0, -20],
- // backgroundColor: 'rgba(0,0,0,0.7)',
- // showBackground: false,
- // distanceDisplayCondition: [Number.MIN_VALUE, 7000000],
- // },
- // },
- // });
- // });
- // if (newfiberMap.getLayers([type]).length > 0) {
- // return;
- // } else {
- // newfiberMap.geojsonToMap(geojson);
- // }
- }
- function initCluster(viewer, geojson, layerid, imgurl) {
- let dataSource = newfiberMap.getLayers([layerid])[0];
- if (!!!dataSource) {
- new Cesium.GeoJsonDataSource().load(geojson).then(dataSource => {
- dataSource.id = layerid;
- viewer.dataSources.add(dataSource);
- dataSource.clustering.enabled = true;
- dataSource.clustering.pixelRange = 10;
- dataSource.clustering.minimumClusterSize = 3;
- //根据层级判断是否聚合
- let getNowZoom;
- let handler = new Cesium.ScreenSpaceEventHandler(newfiberMap.getMap().scene.canvas);
- handler.setInputAction(function (movement) {
- getNowZoom = newfiberMap.getCameraParams().height;
- if (getNowZoom < 1500) {
- dataSource.clustering.enabled = false;
- } else {
- dataSource.clustering.enabled = true;
- }
- }, Cesium.ScreenSpaceEventType.WHEEL);
- // 添加监听函数
- dataSource.clustering.clusterEvent.addEventListener(function (clusteredEntities, cluster) {
- // 关闭自带的显示聚合数量的标签
- cluster.label.show = false;
- cluster.billboard.show = true;
- cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
-
- // 根据聚合数量的多少设置不同层级的图片以及大小
- if (clusteredEntities.length >= 20) {
- cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon1.png', 'newImgs/layerIcon'), clusteredEntities.length, 68);
- // cluster.billboard.width = 38;
- // cluster.billboard.height = 38;
- } else if (clusteredEntities.length >= 12) {
- cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon2.png', 'newImgs/layerIcon'), clusteredEntities.length, 64);
- // cluster.billboard.width = 34;
- // cluster.billboard.height = 34;
- } else if (clusteredEntities.length >= 8) {
- cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon3.png', 'newImgs/layerIcon'), clusteredEntities.length, 50);
- // cluster.billboard.width = 30;
- // cluster.billboard.height = 30;
- } else {
- cluster.billboard.image = combineIconAndLabel(getImageUrl('clusterIcon4.png', 'newImgs/layerIcon'), clusteredEntities.length, 50);
- }
- });
- setDataSourceEntitysStyle(dataSource);
- });
- }
-
- new Cesium.GeoJsonDataSource().load(geojson).then(e => {
- e.entities.values.forEach(entity => {
- dataSource.entities.add(entity);
- });
- setDataSourceEntitysStyle(dataSource);
- });
-
- function setDataSourceEntitysStyle(dataSource) {
- // foreach用于调用数组的每个元素,并将元素传递给回调函数。
- dataSource.entities.values.forEach(entity => {
- let properties = entity.properties.getValue();
- // 将点拉伸一定高度,防止被地形压盖
- entity.position._value.z += 130.0;
- // 使用大小为64*64的icon,缩小展示poi
- entity.billboard = {
- image: imgurl,
- width: 45,
- height: 79,
- };
- entity.label = getLabelOptions({
- ...properties.labelOptions,
- name: properties.name,
- pixelOffset: [0, -75],
- });
- });
- }
-
- function getLabelOptions(options) {
- return {
- // 文本。支持显式换行符“ \ n”
- text: options.name + '' || '测试名称',
- // 字体样式,以CSS语法指定字体
- font: options.font || '15px Source Han Sans CN',
- fillColor: Cesium.Color.fromCssColorString(!!options.color ? options.color : 'rgba(255,255,255,1)'),
- // 背景颜色
- backgroundColor: Cesium.Color.fromCssColorString(!!options.backgroundColor ? options.backgroundColor : 'rgba(0,0,0,1)'),
- // 是否显示背景颜色
- showBackground: options.showBackground || false,
- // 字体边框
- outline: options.outline || false,
- // 字体边框颜色
- outlineColor: !!options.outlineColor ? Cesium.Color.fromCssColorString(options.outlineColor) : Cesium.Color.WHITE,
- // 字体边框尺寸
- outlineWidth: options.outlineWidth || 10,
- // 应用于图像的统一比例。比例大于会1.0放大标签,而比例小于会1.0缩小标签。
- scale: options.scale || 1.0,
- // 设置样式:FILL:填写标签的文本,但不要勾勒轮廓;OUTLINE:概述标签的文本,但不要填写;FILL_AND_OUTLINE:填写并概述标签文本。
- style: options.style || Cesium.LabelStyle.FILL,
- // 相对于坐标的水平位置
- verticalOrigin: options.verticalOrigin || Cesium.VerticalOrigin.CENTER,
- // 相对于坐标的水平位置
- horizontalOrigin: options.horizontalOrigin || Cesium.HorizontalOrigin.CENTER,
- // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
- pixelOffset: new Cesium.Cartesian2((options.pixelOffset || [])[0] || 0, (options.pixelOffset || [])[1] || 20),
- //1000000000 内不受地形影响 遮挡
- disableDepthTestDistance: options.disableDepthTestDistance || Number.POSITIVE_INFINITY,
- clampToGround: options.clampToGround ?? true,
- heightReference: options.heightReference ?? Cesium.HeightReference.CLAMP_TO_GROUND,
- eyeOffset: new Cesium.Cartesian3(...(options.eyeOffset || [0, 0, -10])),
- distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
- ...(options.distanceDisplayCondition || [Number.MIN_VALUE, Number.POSITIVE_INFINITY])
- ),
- };
- }
- }
- function combineIconAndLabel(url, label, width, height) {
- height = height || width;
- // 创建画布对象
- let canvas = document.createElement('canvas');
- canvas.width = width;
- canvas.height = height;
- let ctx = canvas.getContext('2d');
-
- let promise = new Cesium.Resource.fetchImage(url).then(image => {
- // 异常判断
- try {
- ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
- } catch (e) {
- console.log(e);
- }
-
- // 渲染字体
- // font属性设置顺序:font-style, font-variant, font-weight, font-size, line-height, font-family
- ctx.fillStyle = Cesium.Color.WHITE.toCssColorString();
- ctx.font = 'bold 15px Microsoft YaHei';
- ctx.textAlign = 'center';
- ctx.textBaseline = 'middle';
- ctx.fillText(label, width / 2, height / 2);
-
- return canvas;
- });
- return promise;
- }
-
- onMounted(() => {
- getList();
- });
- </script>
- <style lang="scss">
- .videoMapGis {
- width: 100%;
- height: calc(100vh - 120px);
- background: rgba(0, 0, 0, 0.05);
- }
- </style>