ICode9

精准搜索请尝试: 精确搜索
  • Cesium开发工具篇 | 03相机控制2022-01-29 22:02:16

    相机控制主要是用于相机的飞行定位,例如系统初始化位置定位、视点切换、设备定位、报警事件定位等,这些都是通过对相机进行操作实现的。Cesium虽然提供了很多种方法用于实现相机的飞行定位,但这些方法都是基于Viewer、Camera这两个类实现的。 Viewer类 在Viewer类里面有两个方法

  • Cesium对WMS地图服务接口调用过程解析2022-01-29 02:31:52

    一、概述 本文主要介绍Cesium对WMS地图服务GetFeatureInfo接口的调用过程。 示例中介绍的WMS地图服务采用GeoServer发布。 二、WMS地图服务 Web地图服务(Web Map Service,简称WMS)将地理信息动态生成空间参考数据的地图。 WMS提供了一个简单的HTTP接口,用于从一个或多个分布式地理空

  • cesium 图层构建的那些事 (十六)2022-01-28 13:59:55

    今天我们来讲下聚合图层 首先我们定义参数 export enum ECluserLayerType { circle = 0, shine = 1, image = 2,//未实现 } interface ClusterColor { value: number, color: string } export interface PBaseCluserLayer { enabled?: boolean,// 开启聚集统计 pixelRange?:

  • cesium 图层构建的那些事 (十七)2022-01-28 13:59:20

    根据基础聚合类,我们构建geojosn序列化的聚合使用类 首先是参数定义 interface ClassBreak { minValue: number, maxValue: number, symbol: any } interface UniqueValue { value: number, symbol: any } export interface PRenderer { type: “simple”|“uniqueValue”|“c

  • cesium添加3DTitles2022-01-27 17:04:53

    var position = Cesium.Cartesian3.fromDegrees(obj.position[0], obj.position[1], obj.position[2]); //数据加载位置 var heading = Cesium.Math.toRadians(obj.heading); var pitch = Cesium.Math.toRadians(obj.pitch); var roll = Cesium.Math.toRadians(obj.roll)

  • Cesium 自定义Material 系列 (十三)2022-01-23 12:58:31

    对于水泥纹理效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialCement{ cementColor?: any, grainScale?: number, roughness?: number } 对于水泥纹理纹理我们叫 MaterialCement import {MaterialProperty} from "./MaterialPro

  • Cesium 自定义Material 系列 (六)2022-01-22 13:02:11

    对于扩散圆效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialDiffusionCircle{ color?: any, speed?: number, type?: EMaterialDiffusionCircle, } export enum EMaterialDiffusionCircle { normal,//标准 glow,//辉光 trail//拖

  • Cesium 自定义Material 系列 (七)2022-01-22 13:00:24

    对于水波纹墙效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialWallRipple{ color?: any, speed?: number, count: number, } 对于水波纹墙我们叫 MaterialWallRipple import { MaterialProperty } from "./MaterialProperty";

  • Cesium 自定义Material 系列 (八)2022-01-22 12:59:04

    对于电弧效果 我们先定义一下他的interface, 方便使用的人知道他的调用参数 export interface PMaterialElec{ color?:any, speed?:number } 对于电弧我们叫 MaterialElec import { MaterialProperty } from "./MaterialProperty"; const defaultOption: PMaterialElec = {

  • Cesium 自定义Material 系列 (一)2022-01-21 11:00:52

    cesium 在materail 定义上还是比较自由的允许自己构建shader, 我整理一下常用的效果materail 设计 全程使用typescript 来编写这个系列。 首先我们要设计material 的基础类 const loadedMap = new Map<string, boolean="">(); // 着色器的基类 export abstract class Materia

  • cesium-点线面2022-01-20 18:33:41

    let viewer = new Cesium.Viewer('cesiumContainer'); //平面 let plane = viewer.entities.add({ name: '带边框的平面', position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),//经纬度转世界坐标 plane: {

  • cesium 图层构建的那些事 (二十一)2022-01-20 18:05:13

    对于cesium entiy的增删改查 我们来封装一个layer来统一管理类似arcgis js 的GraphicLayer 中间数据管理类 import {Layer} from "./Layer";   export abstract class DataSourceLayer extends Layer { type: string = "DataSourceLayer";   protected

  • cesium 实现卷帘2022-01-20 18:04:54

    这里需要ImageryLayer 定义参考 cesium 图层那些事 ```javascript/** 卷帘效果*/ import {ImageryLayer} from "./ImageryLayer"; export class ShutterEffect {private map: any;private _wrapper: any;private _splitter: any;private _splitterWidthCenter: any;private _mo

  • cesium 图层构建的那些事 (二十二)2022-01-20 18:03:47

    我们来构建等高线图层 ```javascript import {Layer} from "./Layer";import { GraphicLayer } from "./GraphicLayer"; export class IsoLineLayer extends Layer {private option: any;protected isAdd2LoadCesium = true;constructor(option: any) {super(option

  • cesium 图层构建的那些事 (二十三)2022-01-20 18:02:52

    我们来构建视频图层 首先做定义 export interface PVideoEntity{ name?:string, entity:any, video:any, } 视频构建图层```javascript import { PVideoEntity } from './PVideoEntity';import { Tuple } from "./Tuple"; export class VideoEntity extends Tu

  • cesium 实现雷达波2022-01-20 18:01:46

    构建雷达扫描 ``` // TODO 未集成export class RadarRadiationWave {viewer:any; init(map: any){ this.viewer = map; this.initRadarRiationWave1(); this.initRadarRiationWave2(); }   initRadarRiationWave1 () { var e = this.viewer.scene, i

  • 解决 cesium 地图因为transfrom 导致 地图偏移,点击不准的问题2022-01-20 17:32:54

    在我们做可视化大屏的时候 我们经常要适应不同的屏幕, 如果拿rem 来做的话也是没问题的,但是很多组件就要自己改才行,地图也是百分比也是大家的方案。但是仔细观察阿里云的datav 大屏方案,它是由body transfrom scale来解决这个问题,所有dom 元素进行缩放,px一样可以但是对于很多地图引

  • Cesium基础知识-加载json数据2022-01-20 10:03:30

    viewer = new Cesium.Viewer('cesiumContainer');//加载json数据生成线function CreateLineFromJson(params) {    //加载线性的geojson数据,加载之后自动获取geojson的经纬度    var line1 = Cesium.GeoJsonDataSource.load(        '../Apps/SampleDat

  • Cesium基础知识-创建模型,动画2022-01-20 10:02:21

    viewer = new Cesium.Viewer('cesiumContainer'    /*    ,{        shouldAnimate : true    }*/);//创建3d模型function Create3DModel() {    //var viewer = new Cesium.Viewer('cesiumContainer');    var entity = viewer.enti

  • Cesium基础知识-键盘鼠标事件2022-01-20 10:00:59

    viewer = new Cesium.Viewer('cesiumContainer');//操作1function oneMouse() {    camera.setView({        destination: new Cesium.Cartesian3(x, y, z),        orientation: {            heading: headingAngle,      

  • cesium-CZML描述动态场景2022-01-18 19:32:58

    cesium-CZML描述动态场景 CZML具有两种动态可视化机制:按时间间隔和按时间戳描述动态场景变化。按时间间隔描述动态变化是指CZML属性值在一段时间内是一个固定值,而在另一段时间是另一个固定值;按时间戳描述动态变化是指每个时间节点对应一个值,通过内插算法可推算两个时间节点之

  • cesium试使用2022-01-18 16:31:08

    cesium试使用 点我打开demo 如何使用cesium.js ​ cdn引入cesium.js和关键的css即widgets.css即可在web应用,html界面中加载3D地球(注:加载3d地球的地图文件必须使用网络服务器,如tomcat) 操作说明 ​ 鼠标左键按住拖动,转动地球;鼠标滚轮向上/下滚动,放大/缩小地图;鼠标滚轮按住拖动,移动

  • Cesium占坑2022-01-17 11:05:36

    1、辅助调试 viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); viewer.extend(Cesium.viewerCesiumInspectorMixin); 2、抗锯齿 viewer.scene.postProcessStages.fxaa.enabled = true; viewer.scene.fxaa = true; 3、移除默认事件 viewer.cesiumWidget.screenSpaceEve

  • cesium-2-3D切换2022-01-12 23:58:16

    cesium-2-3D切换 cesium自带2维和3维的切换 代码比较简单 核心js代码 /** * 二三维场景切换 */ let viewType= "三维视图"; function setViewType () { let scene = viewer.scene; switch (viewType) { case "三维视图":

  • DAY12 补vue中引入cesium并初始化样式2022-01-10 18:00:42

    在上节说道vue项目中映入cesium所需要搭建的环境,这节补充一下;、、注意此项目中使用cesium版本号为1.6.0 这里直接在App.vue里测试,后期搭建好路由再做修改;代码贴在下面: 初始化操作都注释了,注意token在实际像目需求中会更改 2022-01-10 <template>   <div class="map-box">     <

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有