精华内容
下载资源
问答
  • Cesium实战项目说明

    万次阅读 多人点赞 2020-09-07 22:50:50
    本人所学GIS专业,毕业后一直从事Cesium相关的GIS开发工作,在业余时间将Ceium中常用的一些功能进行封装,形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目,紧贴业务特性,实用性强,能够在最大程度...

    前言

    本人所学GIS专业,毕业后一直从事Cesium相关的GIS开发工作,在业余时间将Ceium中常用的一些功能进行封装,形成能够高效复用的组件。实战项目中的多数功能均来源于实际项目,紧贴业务特性,实用性强,能够在最大程度上帮助个人、团队、公司、企业提高工作效率,节省开发成本。

    一、项目说明

    Cesium实战项目目前共168个实例(后面会继续增加),项目基于Cesium1.8.0+VUE 实现(支持到1.7.2),现有实例如下:
    基础底图
    1 ArcGIS在线底图
    2 ​MapBox在线底图
    3 ​高德在线底图
    4 ​天地图在线底图
    5 ​超图在线底图
    6 ​本地单张图片
    7 ​底图参数
    地形叠加
    8 ​中国地形
    9 ​ArcGIS地形
    10 局部地形(本地)
    点状对象
    11 Cesium点聚合1
    12 Cesium点聚合2
    13 Billboard加载Gif图片
    14 Cesium 闪烁点
    15 Primitives加载大量图标点
    16 div文本点
    17 动态效果点
    18 图标点+文字(primitive方式)
    19 动态文本标记
    20 图片+canvas画图billboard文字动画
    21 简单标注
    22 简单渐变标注
    23 竖立文本标注
    24 弹跳点动画(billboard)
    25 水球图
    线状对象
    26 动态线
    27 迁徙线效果
    28 光晕线
    29 动态传输线
    30 尾迹线
    31 发光线(材质)
    32 北京公交线路(entity+自定义材质)
    33 北京公交线路(primitive+自定义材质)
    34 管道流动
    单体化
    35 倾斜模型分栋单体化(基于geoserver)
    36 倾斜模型分层单体化(基于geoserver)含教程
    37 倾斜模型分户单体化(基于geoserver)含教程
    编辑绘制
    38 点线面绘制
    39 点线面编辑
    40 点线面绘制扩展
    41 点线面编辑扩展
    自定义信息框
    42 多字段自适应信息框
    43 气泡窗口样式1
    44 气泡窗口样式2
    45 设备状态窗口
    46 图表窗口
    标注标绘
    47 自定义html标注图层
    48 军事标绘
    49 军事标绘编辑
    50 gltf 标绘绘制
    51 gltf 标绘编辑
    52 行政区标注
    53 体对象绘制编辑
    54 渐变区域
    55 区域标注
    轨迹漫游
    56 轨迹回放
    57 跟随视角漫游
    58 第一人称漫游
    59 上帝视角漫游
    60 行人漫游
    61 实时点位动画(单个点位)
    空间分析
    62 Cesium 2维点转3维点
    63 Cesium 空间线段等分
    64 地表透明(地下模式)
    65 通视分析
    66 可视域分析
    67 缓冲区分析
    68 双屏对比
    69 二三维联动(基于openlayers)
    70 限高分析
    71 模型位置编辑
    72 模型位置编辑(交互)
    裁剪开挖
    73 地表开挖(材质贴图)
    74 地形开挖(材质贴图)
    75 模型裁剪(Planes)
    76 矿区岩层效果
    场景控制
    77 场景出图(导出图片)
    78 自定义天空盒
    79 自定义空间背景
    80 场景泛光
    81 雨雪雾天气效果
    82 宏观数字地球
    83 鹰眼地图(基于openlayers)
    84 云层
    85 底图对比
    86 纯色地球
    87 昼夜
    场景控件
    88 位置信息状态栏控件
    89 导航控件
    90 Tooltip鼠标移入信息
    相机及视角
    91 限定视角范围
    92 绘制反选遮罩
    93 书签管理
    94 旋转的地球
    95 绕点旋转
    96 视角中心点
    工具
    97 场景测量工具
    98 鼠标位置拾取工具
    键盘控制
    99 控制视角
    100 模型移动
    101 模型移动(第一人称)
    102 模型移动(第一人称,模型)
    103 模型移动显示附近点
    粒子系统
    104 火焰粒子
    105 喷泉粒子
    106 烟雾粒子
    模型动画、特效
    107 矢量白膜自定义shader(不改源码)
    108 矢量白膜自定义shader(透明)
    109 数字工厂
    110 模型热力图
    111 数字社区
    112 白膜特效选中高亮
    113 立体建筑物闪烁效果
    114 建筑物渐变(Primitive)
    115 透明渲染
    墙体动画、特效
    116 动态立体墙
    117 动态立体墙(升级)
    118 圆形、规则多边形动态围墙
    119 围墙扩散动画
    120 立体墙呼吸灯效果
    扩散动画、特效
    121 动态扩散圆
    122 圆形波纹效果
    123 六边形扩散扫描
    124 圆形扩散扫描
    其他动画、特效
    125 动态水面效果
    126 光柱椎体
    127 扫描线
    128 飞线
    129 柱状人口统计(动画)
    130 球体材质
    131 部分模型可见
    132 界面蒙板
    数字城市
    133 数字城市1
    134 数字城市2
    135 数字城市3
    136 城市建筑白模
    行业应用
    137 雷达扫描效果
    138 雷达追踪圆锥体
    139 雷达追踪四棱锥体
    140 雷达遮罩扫描
    141 相控阵雷达范围
    142 雷达放射波
    143 卫星视椎体(四棱锥体)
    144 目标跟踪
    145 动态目标检测
    146 室内相机朝向
    水利水域
    147 动态水域
    148 水闸放水效果
    149 淹没效果
    视频应用
    150 视频贴图参数调整
    151 视频融合
    152 视频融合(Hls协议)
    153 视频窗口(普通视频)
    154 视频窗口(rtmp视频)
    155 视频窗口(hls视频)
    156 视频墙(含编辑)
    Echarts可视化支持
    157 Echarts 迁徙图1
    158 Echarts 迁徙图2
    159 Echarts 散点图
    160 Echarts 流入线
    161 Echarts 流出线
    MapV可视化支持
    162 MapV 迁徙图
    163 MapV 大迁徙图
    164 MapV 热力图
    165 MapV 强边界图
    其他
    166 3dtiles高度调整
    167 文字贴图
    168 热力图(基于heatmap.js插件)

    在线预览地址 Cesium实战在线预览1 用户名cesium@sz 密码cesium@sz#

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    目录结构
    在这里插入图片描述

    二、源码格式

    源码采用ES6语法,未压缩未加密,可读性强。

    import PlotBase from "../../PlotBase"
    import PlotTypes from "../../PlotTypes"
    //面标绘 面标绘类是所有面状军事标绘的父类 默认贴对象
    export default class Polygon extends PlotBase {
        constructor(viewer, geoFeature) {
            super(viewer, geoFeature);
    
            this.properties.plotType = PlotTypes.POLYGON; //标绘类型
            this.properties.plotName = "面"; //标绘名称
            this.generateEntity();
            this.minPointCount = 3;
        }
    
        //构造Entity
        generateEntity() {
            this.polygonEntity = this.viewer.entities.add({
                plotType: this.properties.plotBase,
                plotCode: this.properties.plotCode,
                polygon: {
                    hierarchy: new Cesium.PolygonHierarchy(this.positions || []),
                    material: Cesium.Color.YELLOW.withAlpha(0.6),
                    classificationType: Cesium.ClassificationType.BOTH
                },
            });
        }
    
        //选中效果
        setSelected(selected) {
            if (selected) {
                this.polygonEntity.polygon.material = Cesium.Color.RED.withAlpha(0.8);
            } else {
                this.polygonEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.6);
            }
        }
    
        //构造点坐标
        generate() {
            var count = this.getPointCount();
            if (count < 2) {
                return;
            }
            this.generatePositions(this.coordinates[0]);
        }
    
        //开启或关闭编辑模式
        openEditMode(isEdit) {
            if (isEdit) {
                this.polygonEntity.polygon.hierarchy = new Cesium.CallbackProperty(e => {
                    return new Cesium.PolygonHierarchy(this.positions || []);
                }, false);
    
                this.polygonEntity.polyline = {
                    positions: new Cesium.CallbackProperty(e => {
                        if (this.positions && this.positions.length > 0)
                            return this.positions.concat(this.positions[0]);
                        else {
                            return [];
                        }
                    }, false),
                    width: 2,
                    clampToGround: true,
                    material: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.YELLOW,
                    }),
                    depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.YELLOW,
                    }),
                }
            } else {
                this.polygonEntity.polygon.hierarchy = new Cesium.PolygonHierarchy(this.positions || []);
                if (this.polygonEntity.polyline) this.polygonEntity.polyline.width = 0;
            }
        }
    
        //转到geojson对象 用于存储操作
        toGeoJson() {
            return {
                "type": "Feature",
                "properties": this.properties,
                "geometry": {
                    "type": "Polygon",
                    "coordinates": this.coordinates
                }
            }
        }
    
        //移除标绘对象
        remove() {
            this.viewer.entities.remove(this.polygonEntity);
        }
    }
    
    import LayerBase from "../Base"
    import PlotFactory from "../../MilitaryPlot/PlotFactory"
    
    //军事标绘图层类
    export default class MilitaryPlotLayer extends LayerBase {
        constructor(viewer) {
            super(viewer);
            this.selectedPlotChanged = new Cesium.Event();
            this.initEvent();
        }
    
        //添加一个标绘
        addPlot(geoFeature) {
            let newPlot = PlotFactory.createPlot(this.viewer, geoFeature.properties.plotType, geoFeature);
            this.plots.push(newPlot);
            return newPlot;
        }
    
        //根据标绘编号飞行到标绘对象
        flyToByPlotCode(plotCode) {
            const plot = this.getByPlotCode(plotCode);
            if (!plot) {
                return;
            }
            this.setSelectedPlot(plot);
            //this.viewer.flyTo(plot.polygonEntity);//贴对象的面作为飞行目标飞行会不准确 所以新建一个不是贴对象的目标
            let flyTargetEntity = this.viewer.entities.add({
                polygon: {
                    hierarchy: plot.positions,
                    perPositionHeight: true,
                    material: Cesium.Color.YELLOW.withAlpha(0.001),
                    outline: false
                }
            });
            //飞行结束后将飞行目标删除
            this.viewer.flyTo(flyTargetEntity)
                .then(() => {
                    this.viewer.entities.remove(flyTargetEntity);
                });
        }
    
        //设置标号选中
        setSelectedPlot(plot) {
            if (!this.plotSelecteable) return;
            if (this.selectedPlot) {
                this.selectedPlot.setSelected(false);
            }
            this.selectedPlot = plot;
            this.selectedPlot.setSelected(true);
            //触发选中事件
            this.selectedPlotChanged.raiseEvent(plot);
        }
    
        //清除选中标号
        clearSelectedPlot() {
            if (this.selectedPlot) {
                this.selectedPlot.setSelected(false);
                this.selectedPlot.openEditMode(false);
                this.selectedPlot = undefined;
            }
        }
    
        //初始化事件
        initEvent() {
            new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
                .setInputAction(e => {
                    if (!this.plotSelecteable) return;
                    let id = this.viewer.scene.pick(e.position);
                    if (!id || !id.id) {
                        if (this.selectedPlot) {
                            this.selectedPlot.setSelected(false);
                            this.selectedPlot = undefined;
                            //触发选中事件
                            this.selectedPlotChanged.raiseEvent(undefined);
                        }
                        return; // 没有拾取到对象 直接返回 不做任何操作
                    }
                    // 拾取到对象 判断拾取到的对象类型
                    if (!id.id || !id.id.type || id.id.type != "MilitaryPlot") {
                        if (this.selectedPlot) {
                            this.selectedPlot.setSelected(false);
                            this.selectedPlot = undefined;
                            //触发选中事件
                            this.selectedPlotChanged.raiseEvent(undefined);
                        }
                    };
    
                    //避免重复选择 
                    if (this.selectedPlot && this.selectedPlot.properties.plotCode == id.id.plotCode) return;
                    const plot = this.getByPlotCode(id.id.plotCode);
                    if (!plot) {
                        if (this.selectedPlot) {
                            this.selectedPlot.setSelected(false);
                            this.selectedPlot = undefined;
                        }
                        //触发选中事件
                        this.selectedPlotChanged.raiseEvent(undefined);
                    } else {
                        //触发选中事件
                        this.selectedPlot = plot;
                        this.selectedPlot.setSelected(true);
                        this.selectedPlotChanged.raiseEvent(plot);
                    }
    
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
    }
    

    三、源码获取方式

    在线预览系统中点击 获取源码 按钮

    在线预览地址 Cesium实战在线预览1 用户名cesium@sz 密码cesium@sz#

    展开全文
  • Cesium实战项目

    2020-12-20 06:24:28
    说明Cesium实战项目目前共83个实例(后面会继续增加),项目基于Cesium1.72+VUE 实现,现有实例如下:基础底图1.ArcGIS在线底图2.谷歌在线底图3.高德在线底图点状对象4.Cesium点聚合15.Cesium点聚合26.Bill...

    前言

    从毕业到现在,差不多两年的时间,一直从事Cesium相关的GIS开发工作,现将项目中最常用的一些功能封装出来,帮助各位刚入门的新同学(大神略过)。

    说明

    Cesium实战项目目前共83个实例(后面会继续增加),项目基于Cesium1.72+VUE 实现,现有实例如下:

    基础底图

    1.ArcGIS在线底图

    2.谷歌在线底图

    3.高德在线底图

    点状对象

    4.Cesium点聚合1

    5.Cesium点聚合2

    6.Billboard加载Gif图片

    7.Cesium 闪烁点

    8.Primitives加载大量图标点

    9.div文本点

    单体化

    10.倾斜模型分栋单体化 (基于geoserver)

    11.倾斜模型分层单体化(基于geoserver)含教程

    12.倾斜模型分户单体化(基于geoserver)含教程

    编辑绘制

    13.点线面绘制

    14.点线面编辑

    15.点线面绘制扩展

    16.点线面编辑扩展

    自定义信息框

    17.多字段自适应信息框

    标注标绘

    18.自定义html标注图层

    19.军事标绘

    20.军事标绘编辑

    21.gltf 标绘绘制

    22.gltf 标绘编辑

    23.行政区标注

    轨迹漫游

    24.轨迹回放

    25.跟随视角漫游

    26.第一人称漫游

    27.上帝视角漫游

    分析

    28.Cesium 2维点转3维点

    29.Cesium 空间线段等分

    30.地表透明(地下模式)

    31.通视分析

    32.可视域分析

    33.缓冲区分析

    34.地表开挖(材质贴图)

    35.地形开挖(材质贴图)

    36.模型裁剪(Planes)

    37.矿区岩层效果

    38.双屏对比

    场景

    39.场景出图(导出图片)

    40.自定义天空盒

    41.位置信息状态栏控件

    42.雨雪雾天气效果

    43.限定视角范围

    44.绘制反选遮罩

    45.自定义空间背景

    46.宏观数字地球

    工具

    47.场景测量工具

    48.鼠标位置拾取工具

    特效

    49.动态线、流动线

    50.流向动态线

    51.动态水面效果

    52.动态扩散圆

    53.动态立体墙

    54.粒子系统

    55.圆形波纹效果

    56.矢量白膜自定义shader(不改源码)

    57.光晕线

    58.动态立体墙(升级)

    59.圆形、规则多边形动态围墙

    60.围墙扩散动画

    61.光柱椎体

    62.数字工厂

    行业应用

    63.雷达扫描效果

    64.雷达追踪圆锥体

    65.雷达追踪四棱锥体

    66.雷达遮罩扫描

    67.相控阵雷达范围

    68.雷达放射波

    69.卫星视椎体(四棱锥体)

    70.视频贴图参数调整

    71.视频融合

    72.目标跟踪

    Echarts可视化支持

    73.Echarts 迁徙图

    74.Echarts 散点图

    75.Echarts 流入线

    76.Echarts 流出线

    MapV可视化支持

    77.MapV 迁徙图

    78.MapV 大迁徙图

    79.MapV 热力图

    80.MapV 强边界图

    其他

    81.3dtiles高度调整

    82.文字贴图

    83.热力图(基于heatmap.js插件)

    在线预览地址 在线预览地址 用户名cesium 密码cesium@sz

    项目截图

    展开全文
  • Cesium实战专栏14.自定义html标注图层

    千次阅读 2020-11-04 22:45:17
    Cesium实战专栏14.自定义html标注图层前言实现效果实现思路关键代码 前言 在Cesium中可以通过entity的Lebel属性来实现文本标注的功能,但是原始的标注功能样式往往达不到我们想要的效果,比如我们需要像html元素那样...

    Cesium实战专栏14.自定义html标注图层

    前言

    在Cesium中可以通过entity的Lebel属性来实现文本标注的功能,但是原始的标注功能样式往往达不到我们想要的效果,比如我们需要像html元素那样可以通过css来自由的设置样式。我们可以通过自定义html标注的方式来实现可以自由定义样式的标注功能。

    实现效果

    在这里插入图片描述

    实现思路

    自定义html标注图层功能与自定义气泡弹框功能思路相似,通过笛卡尔坐标转为屏幕坐标,实时更新DOM元素的坐标使其保持正确的位置即可。

    关键代码

      /**
       * html文本标绘基类 
       */
      class HtmlPlotBase {
       
          constructor
    展开全文
  • Cesium实战专栏说明

    2020-12-13 22:10:10
    Cesium实战专栏说明一、说明二、源码格式三、源码获取方式 一、说明 Cesium实战专栏共20篇文章,来自于Cesium实战项目,基于Cesium1.7.2+VUE 实现,具有完整代码。 1.Cesium点线面实体绘制 2.Cesium点线面实体编辑 3...

    一、说明

    Cesium实战专栏共20篇文章,来自于Cesium实战项目,基于Cesium1.7.2+VUE 实现,具有完整代码。
    1.Cesium点线面实体绘制
    2.Cesium点线面实体编辑
    3.Cesium场景出图
    4.Cesium自定义信息框
    5.Cesium点聚合功能
    6.Cesium轨迹回放功能
    7.Cesium动态线、水流线效果
    8.Cesium动态扩散圆效果
    9.Cesium动态立体墙效果
    10.Cesium雷达扫描效果
    11.Cesium gltf标绘
    12.Cesium gltf 标绘编辑
    13.Cesium自定义html标注图层
    14.Cesium建筑白模生成及高度调整
    15.Cesium军事标绘绘制
    16.Cesium军事标绘编辑
    17.Cesium鼠标位置拾取工具封装
    18.Echarts图层
    19.Echarts动态水面
    20.二维点转三维点

    二、源码格式

    源码采用ES6语法,未压缩、未加密。

    import PlotBase from "../../PlotBase"
    import PlotTypes from "../../PlotTypes"
    //面标绘 面标绘类是所有面状军事标绘的父类 默认贴对象
    export default class Polygon extends PlotBase {
        constructor(viewer, geoFeature) {
            super(viewer, geoFeature);
    
            this.properties.plotType = PlotTypes.POLYGON; //标绘类型
            this.properties.plotName = "面"; //标绘名称
            this.generateEntity();
            this.minPointCount = 3;
        }
    
        //构造Entity
        generateEntity() {
            this.polygonEntity = this.viewer.entities.add({
                plotType: this.properties.plotBase,
                plotCode: this.properties.plotCode,
                polygon: {
                    hierarchy: new Cesium.PolygonHierarchy(this.positions || []),
                    material: Cesium.Color.YELLOW.withAlpha(0.6),
                    classificationType: Cesium.ClassificationType.BOTH
                },
            });
        }
    
        //选中效果
        setSelected(selected) {
            if (selected) {
                this.polygonEntity.polygon.material = Cesium.Color.RED.withAlpha(0.8);
            } else {
                this.polygonEntity.polygon.material = Cesium.Color.YELLOW.withAlpha(0.6);
            }
        }
    
        //构造点坐标
        generate() {
            var count = this.getPointCount();
            if (count < 2) {
                return;
            }
            this.generatePositions(this.coordinates[0]);
        }
    
        //开启或关闭编辑模式
        openEditMode(isEdit) {
            if (isEdit) {
                this.polygonEntity.polygon.hierarchy = new Cesium.CallbackProperty(e => {
                    return new Cesium.PolygonHierarchy(this.positions || []);
                }, false);
    
                this.polygonEntity.polyline = {
                    positions: new Cesium.CallbackProperty(e => {
                        if (this.positions && this.positions.length > 0)
                            return this.positions.concat(this.positions[0]);
                        else {
                            return [];
                        }
                    }, false),
                    width: 2,
                    clampToGround: true,
                    material: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.YELLOW,
                    }),
                    depthFailMaterial: new Cesium.PolylineDashMaterialProperty({
                        color: Cesium.Color.YELLOW,
                    }),
                }
            } else {
                this.polygonEntity.polygon.hierarchy = new Cesium.PolygonHierarchy(this.positions || []);
                if (this.polygonEntity.polyline) this.polygonEntity.polyline.width = 0;
            }
        }
    
        //转到geojson对象 用于存储操作
        toGeoJson() {
            return {
                "type": "Feature",
                "properties": this.properties,
                "geometry": {
                    "type": "Polygon",
                    "coordinates": this.coordinates
                }
            }
        }
    
        //移除标绘对象
        remove() {
            this.viewer.entities.remove(this.polygonEntity);
        }
    }
    
    import LayerBase from "../Base"
    import PlotFactory from "../../MilitaryPlot/PlotFactory"
    
    //军事标绘图层类
    export default class MilitaryPlotLayer extends LayerBase {
        constructor(viewer) {
            super(viewer);
            this.selectedPlotChanged = new Cesium.Event();
            this.initEvent();
        }
    
        //添加一个标绘
        addPlot(geoFeature) {
            let newPlot = PlotFactory.createPlot(this.viewer, geoFeature.properties.plotType, geoFeature);
            this.plots.push(newPlot);
            return newPlot;
        }
    
        //根据标绘编号飞行到标绘对象
        flyToByPlotCode(plotCode) {
            const plot = this.getByPlotCode(plotCode);
            if (!plot) {
                return;
            }
            this.setSelectedPlot(plot);
            //this.viewer.flyTo(plot.polygonEntity);//贴对象的面作为飞行目标飞行会不准确 所以新建一个不是贴对象的目标
            let flyTargetEntity = this.viewer.entities.add({
                polygon: {
                    hierarchy: plot.positions,
                    perPositionHeight: true,
                    material: Cesium.Color.YELLOW.withAlpha(0.001),
                    outline: false
                }
            });
            //飞行结束后将飞行目标删除
            this.viewer.flyTo(flyTargetEntity)
                .then(() => {
                    this.viewer.entities.remove(flyTargetEntity);
                });
        }
    
        //设置标号选中
        setSelectedPlot(plot) {
            if (!this.plotSelecteable) return;
            if (this.selectedPlot) {
                this.selectedPlot.setSelected(false);
            }
            this.selectedPlot = plot;
            this.selectedPlot.setSelected(true);
            //触发选中事件
            this.selectedPlotChanged.raiseEvent(plot);
        }
    
        //清除选中标号
        clearSelectedPlot() {
            if (this.selectedPlot) {
                this.selectedPlot.setSelected(false);
                this.selectedPlot.openEditMode(false);
                this.selectedPlot = undefined;
            }
        }
    
        //初始化事件
        initEvent() {
            new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas)
                .setInputAction(e => {
                    if (!this.plotSelecteable) return;
                    let id = this.viewer.scene.pick(e.position);
                    if (!id || !id.id) {
                        if (this.selectedPlot) {
                            this.selectedPlot.setSelected(false);
                            this.selectedPlot = undefined;
                            //触发选中事件
                            this.selectedPlotChanged.raiseEvent(undefined);
                        }
                        return; // 没有拾取到对象 直接返回 不做任何操作
                    }
                    // 拾取到对象 判断拾取到的对象类型
                    if (!id.id || !id.id.type || id.id.type != "MilitaryPlot") {
                        if (this.selectedPlot) {
                            this.selectedPlot.setSelected(false);
                            this.selectedPlot = undefined;
                            //触发选中事件
                            this.selectedPlotChanged.raiseEvent(undefined);
                        }
                    };
    
                    //避免重复选择 
                    if (this.selectedPlot && this.selectedPlot.properties.plotCode == id.id.plotCode) return;
                    const plot = this.getByPlotCode(id.id.plotCode);
                    if (!plot) {
                        if (this.selectedPlot) {
                            this.selectedPlot.setSelected(false);
                            this.selectedPlot = undefined;
                        }
                        //触发选中事件
                        this.selectedPlotChanged.raiseEvent(undefined);
                    } else {
                        //触发选中事件
                        this.selectedPlot = plot;
                        this.selectedPlot.setSelected(true);
                        this.selectedPlotChanged.raiseEvent(plot);
                    }
    
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        }
    }
    

    三、源码获取方式

    订阅Cesium实战专栏 Cesium实战专栏 订阅后联系我获取,私信或者加我QQ

    展开全文
  • 我每次旋转之前都先为模型做了定位,就是执行了下面的代码,模型能够定位到我...var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);var newCartographic = Cesium.Cartographi...
  • Cesium实战专栏03.实体信息获取方式

    千次阅读 2020-09-11 22:00:51
    { image: 'static/images/blueCamera.png', scaleByDistance: new Cesium.NearFarScalar(500, 1, 1200, 0.8), distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 10000), verticalOrigin: Cesium....
  • 因为是录屏软件录的所以看起来是一帧一帧的,实际效果可以在Cesium实战专栏上查看。 实现思路 在Cesium中实现类似的效果目前我知道的有两种方法。一种是结合Cesium时间和SampledPositionProperty类实现、另一种是...
  • Cesium实战专栏18.echarts图层实现效果实现思路关键代码 实现效果 实现思路 自定义echarts坐标系,将经纬度坐标转为屏幕坐标 关键代码 export default class EchartsglLayer { constructor(viewer, option) { //...
  • Cesium实战专栏15.军事标绘绘制

    千次阅读 2020-11-21 20:49:43
    Cesium实战专栏15.军事标绘绘制前言实现效果实现思路关键代码 前言 军事标绘符号是很多GIS系统都有的功能,二维地图有很多类似的插件,但是三维的还比较少。 实现效果 实现思路 关于军事标绘各种箭头符号的算法不用...
  • Cesium实战专栏10.Cesium雷达扫描

    千次阅读 2020-10-10 22:58:06
    const _CartographicCenter2 = new Cesium.Cartographic(cartographicCenter.longitude + Cesium.Math.toRadians(0.001), cartographicCenter.latitude, cartographicCenter.height); const _Cartesian3Center2 = ...
  • Cesium实战专栏05.Cesium点聚合

    千次阅读 2020-09-12 22:46:05
    本实例参考百度API中的点聚合功能在Cesium实现类似效果的点聚合功能。 效果图 实现思路 Cesium中提供了EntityCluster类来实现聚合功能,该类有一个事件clusterEvent,该事件中能够获取到聚合的各种参数(如聚合点位...
  • 相关文件路径源码地址/cesium/Source/Widgets/Animation/Demo使用控件显示与隐藏由于时间线和动画控件是默认显示的,所以创建viewer之后无需做额外的事情,就可以显示var viewer = new Cesium.Viewer('...
  • Cesium实战专栏12.gltf模型标绘编辑 前言 前一篇讲了gltf模型标绘,这一篇是对标绘对象的编辑功能进行封装。 实现效果 实现思路 标绘对象鼠标交互编辑主要通过监听场景鼠标事件实现 关键代码 //编辑类 //左键按下...
  • Cesium实战专栏04.Cesium自定义信息框

    千次阅读 2020-09-11 22:43:08
    Cesium中展示属性信息通过可以使用气泡窗口的方式来进行展示,但是Cesium自带的信息窗口比较难看,并且不会跟随场景移动,所以只能自己进行气泡窗口的扩展开发。 效果图 信息窗口的实现思路 信息窗口主要是能够...
  • Cesium实战专栏09.Cesium动态立体墙

    千次阅读 2020-10-10 22:16:52
    使用的是Cesium中的墙体类,实现拉伸显示来模拟警戒区,但是静态的看起来比较死板,不是领导想要的效果,后来使用CallbackProperty类实现动态墙体的效果,逼格瞬间提升不少。 效果图 实现思路 通过CallbackProperty...
  • case "EditablePolygon": this.editEntity.polygon.hierarchy = new Cesium.CallbackProperty(e => { return new Cesium.PolygonHierarchy(this.editPositions); }, false); if (this.editEntity.polyline) { this....
  • 前言 动态扩散圆往往用来模拟一些从中心点像周围扩散的现象,比如地震源,事件发生点等。... this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscription = u
  • function creatgxPolylinePrimit(positions, linewidth, linecolor, img, speed, isClose) {var cvs = ...var pl = new Cesium.PolylineVolumeGeometry({polylinePositions: positions,shapePositions: computeCirc...
  • Cesium中对于线样式的设置已经提供了很多种材质(如箭头线、虚线、发光线、边框线等)以供选择,但是在项目开发中,这些材质往往不能满足需求。在某个项目中就需要能够模拟水流、能量等流动的效果,在火星科技上面就...
  • Cesium实例

    2018-08-22 16:47:06
    基于cesium库的3d立体地球仪模型动画代码,测试使用。
  • Cesium项目中,点线面实体对象的绘制是很常用,也是很基本的一个功能,Cesium中提供了Entity类来构建点线面实体,能够通过点串数据用代码构建点线面,但是并没有提供鼠标交互绘制的类,只能自己进行一些简单的封装...
  • Cesium实战专栏19.动态水面效果

    千次阅读 2020-12-06 21:31:56
    Cesium实战专栏19.动态水面效果实现效果实现思路关键代码 实现效果 实现思路 Cesium沙盒中有水体的例子,参考链接https://sandcastle.cesium.com/?src=Materials.html primitive.appearance.material = new Cesium...
  • Cesium实战专栏13.3dtiles高度调整前言实现效果关键代码 前言 有时候通过数据处理软件转换处理的3dtiles数据加载到前端显示的时候会发现看不见或者一闪而过,又或是看得见但是移动场景的时候 会发现模型会飘着移动,...
  • 这里写自定义目录标题前言效果图实现思路绘制类封装绘制类使用 ...在cesium中我们添加一个gltf模型只需要模型文件和坐标点,所以我们需要的是封装一个工具来获取用户输入的点坐标,在Cesium中通过ScreenSpaceEventHandl
  • Cesium实战专栏17.鼠标位置拾取工具实现效果实现思路关键代码 实现效果 实现思路 通过scene对象的pickPosition方法拾取鼠标处的笛卡尔坐标,转为经纬度显示到面板上即可 关键代码 initEvents() { this....
  • Cesium实战专栏20.二维点转三维点

    千次阅读 2020-12-06 21:45:54
    Cesium实战专栏20.二维点转三维点前言实现效果实现思路关键代码 前言 我接触到的很多三维项目都是从之前的二维项目转换升级而来,其中就会遇到数据的兼容问题,因为在二维地图项目中,我们一般都是二维平面数据,...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 252
精华内容 100
关键字:

cesium实战