做了大略三个月的基于cesium地图开发的利用场景和大屏；次要想从cesium根本的入门到一些简略的场景交互做一个代码分享。
Cesium是三维地图开发的一个前端gis引擎；反对wtms、影像、模型、地形、歪斜摄影的数据加载。并通过对点线面、材质、视角等图形学常识对它进行一个正式三维场景的一个复现。
包含一些最
- 根本的创立地图、创立点位、数据源组、创立图层、加载gif，相机视角；
- 加载图层、绘制点、线、面，调节情景参数；
- 对接天地图、高德地图、百度地图；
- 事件：点击事件、移除事件、移除事件、拖拽事件
- 弹框：视频弹框、详情弹框、报警弹框
- 轨迹：动静轨迹、轨迹漫游
- 流线图：喷泉、流线图
- 场景：模仿下雪、下雨、雷达图
- 根本工具箱：放大、放大，定位、画线
- kml、geojson文件转换和加载
- 性能优化
常用工具办法
1、根本的创立地图
viewer = new Cesium.Viewer('maps', { animation: false, //是否创立动画小器件，左下角仪表 baseLayerPicker: false, //是否显示图层选择器 fullscreenButton: false, //是否显示全屏按钮 geocoder: false, //是否显示geocoder小器件，右上角查问按钮 homeButton: false, //是否显示Home按钮 infoBox: false, //是否显示信息框 sceneModePicker: false, //是否显示3D/2D选择器 selectionIndicator: false, //是否显示选取指示器组件 timeline: false, //是否显示时间轴 sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING navigationHelpButton: false, //是否显示右上角的帮忙按钮 scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源 navigationInstructionsInitiallyVisible: false, showRenderLoopErrors: false, //是否显示渲染谬误 shouldAnimate: true,//容许动画 //这个得必须有！ })- 创立的点位：
- layer && layer.entities.add({ id: item.id, name: item.name, type: "marker", featureType: type, feature: item.feature, lon: item.lon, lat: item.lat, mapTools: tools,//地图左边按钮 position: Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), height), billboard: { image: new Cesium.CallbackProperty(() => { return _self.superGif.get_canvas().toDataURL("image/png"); }, false), scale: 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, width: 60, height: imageheight }, label: { text: type == "wrj" ? `${item.name}` : "", font: '14pt 微软雅黑', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // backgroundColor: Cesium.Color.YELLOW, // showBackground: true, outlineColor: new Cesium.Color.fromCssColorString("tranparent"), fillColor: new Cesium.Color.fromCssColorString("#fff"), outlineWidth: 5, verticalOrigin: Cesium.VerticalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(-110, -25) }, })- 创立数据图层
- markersLayer = new Cesium.CustomDataSource('marker-layer')- viewer.dataSources.add(markersLayer)- 创立地图底图图层
viewer.imageryLayers.addImageryProvider(new Cesium.SingleTileImageryProvider({ url: '/static/map/worldimage.jpg' }));- 加载gif动静图片，须要引入SuperGif插件进行gif转换，再通过Cesium.CallbackProperty一帧帧获取，须要留神得加上dom元素
- <img src="/biz/alarm.gif" width="20px" height="20px" ref="gifRef" rel:auto_play="1" rel:rubbable="1" style="position: absolute;z-index: -1;" /> _self.superGif = new SuperGif({ gif: this.$refs.gifRef }); _self.superGif.load(function () { layer && layer.entities.add({ id: item.id, name: item.name, type: "marker", featureType: type, feature: item.feature, lon: item.lon, lat: item.lat, mapTools: tools,//地图左边按钮 position: Cesium.Cartesian3.fromDegrees(parseFloat(lon), parseFloat(lat), height), billboard: { image: new Cesium.CallbackProperty(() => { return _self.superGif.get_canvas().toDataURL("image/png"); }, false), scale: 1, horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, width: 60, height: imageheight }, label: { text: type == "wrj" ? `${item.name}` : "", font: '14pt 微软雅黑', style: Cesium.LabelStyle.FILL_AND_OUTLINE, // backgroundColor: Cesium.Color.YELLOW, // showBackground: true, outlineColor: new Cesium.Color.fromCssColorString("tranparent"), fillColor: new Cesium.Color.fromCssColorString("#fff"), outlineWidth: 5, verticalOrigin: Cesium.VerticalOrigin.CENTER, pixelOffset: new Cesium.Cartesian2(-110, -25) }, _lng: lon, _lat: lat, _obj: item }) }); } - 相机视角（有entity则用viewer，坐标用camera）
let heading = viewer.camera.heading, pitch = viewer.camera.pitch, roll = viewer.camera.roll; viewer.flyTo(_self.pickValue, { offset: { heading: 2.990358455542995, // 方向 pitch: -0.5403975721607086,// 歪斜角度 range: 11100 } //定位 let lon = list[0].lon || list[0].longitude, lat = list[0].lat || list[0].latitude; viewer.camera.flyTo(this.mapCenter, 5000);2、加载图层、绘制点、线、面，调节情景参数
加载图层
天地图超图形式对接
let IMG_C = viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ mapStyle: Cesium.TiandituMapsStyle.IMG_C, token: 'e8865a2cd69468263ca650b1c73ee698' })) IMG_C.show = true; // let IMG_C = viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ // mapStyle: Cesium.TiandituMapsStyle.TER_C, // token: 'e8865a2cd69468263ca650b1c73ee698' // })) // IMG_C.show = true; viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({ mapStyle: Cesium.TiandituMapsStyle.CIA_C,//天地图全球中文注记服务(经纬度) token: 'xxx' //由天地图官网申请的密钥 }))- 原生对接
// 叠加影像服务 var imgMap = new Cesium.UrlTemplateImageryProvider({ url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token, subdomains: subdomains, tilingScheme: new Cesium.WebMercatorTilingScheme(), maximumLevel: 22 }); viewer.imageryLayers.addImageryProvider(imgMap);- 绘制面
ttMaplayer.entities.add({ position: Cesium.Cartesian3.fromDegrees(lon, lat, height), ellipse: { heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, disableDepthTestDistance: 99000000, outlineColor: Cesium.Color.YELLOW.withAlpha(0.5), outline: true, outlineWidth: 2, semiMinorAxis: 5000.0, semiMajorAxis: 5000.0, fill: false, } });- 绘制矩形
let east = points[0].split(','),west = points[1].split(','); layer.entities.add({ type:"marker", name: item.name, _obj:item, position: Cesium.Cartesian3.fromDegrees(parseFloat((+east[0]+(+west[0]))/2), parseFloat((+west[1]+(+east[1]))/2)), rectangle: { coordinates: Cesium.Rectangle.fromDegrees(+east[0], +east[1],+west[0], +west[1]), outlineColor:Cesium.Color.RED, outlineWidth:24, fill:true, material: Cesium.Color.BLUE.withAlpha(0.6), outline:true } })- 绘制线段（能够设置线段宽度和材质）
_t.appendLayer.entities.add({ polyline: { positions: new Cesium.CallbackProperty(function() { return _t.routeList }, false), width: 5, material: Cesium.Color.RED, depthFailMaterial: Cesium.Color.RED, clampToGround: true } })- 参数调节
let Options = function () { this.contrast = 128; this.brightness = -0.3; this.delta = 1; this.gamma = 3.5; this.enabled = false; this.highDynamicRange = true; this.shadows = false; } let option = new Options(); let gui = new dat.GUI(); gui.__closeButton.innerHTML = "膨胀面板"; let bloom = viewer.scene.postProcessStages.bloom; gui.add(option, 'highDynamicRange').name("高动静范畴").onChange(function (value) { viewer.scene.highDynamicRange = value; }) gui.add(option, 'gamma', 0, 5).name("伽马亮度").onChange(function (value) { viewer.scene.gamma = value; }) gui.add(option, 'enabled').name("启用含糊").onChange(function (value) { bloom.enabled = value; }) gui.add(option, 'contrast', -128, 128).name("对比度").onChange(function (value) { bloom.uniforms.contrast = value; }) gui.add(option, 'brightness', -2, 2).name("光泽亮度").onChange(function (value) { bloom.uniforms.brightness = value; }) gui.add(option, 'delta', -5, 5).name("因子(delta)").onChange(function (value) { bloom.uniforms.delta = value; }) gui.add(option, 'shadows').name("启用暗影").onChange(function (value) { viewer.shadows = value; }) $('.dg.ac').css('top', '10%');事件
鼠标左键点击事件
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas), _self = this; let ellipsoid = viewer.scene.globe.ellipsoid; //点击地图视频标记窗口弹窗 handler.setInputAction(async e => { let lng, lat, height var cartesian = viewer.scene.pickPosition(e.position); //地图点位查问 let pick = viewer.scene.pick(e.position); if (Cesium.defined(pick) && pick.id && pick.id.type === "marker") { }, Cesium.ScreenSpaceEventType.LEFT_CLICK)- 鼠标移入事件
- //鼠标移入事件 handler.setInputAction(async movement => { let lng, lat, height; if (viewer.scene.mode !== Cesium.SceneMode.MORPHING) { let pick = viewer.scene.pick(movement.endPosition); if (Cesium.defined(pick) && pick.id） } }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)鼠标移除事件
rectHandler && rectHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE); rectHandler && rectHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOWN); rectHandler && rectHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP);弹框（生成弹框和弹框挪动）
生成：
dom节点
<poiDetail ref="poiRef"></poiDetail>positionPopUp(c) { this.tempPostion = c; var x = c.x - 290; var y = c.y - 250 this.boxStyle = `left:${x}px;top:${y}px` }, destroy() { this.options = {}; this.hide(); }, hide() { this.getActionFlg = false; this.visible = false; this.showPlayer = false; this.tempPostion = null; }- js形式管制dom节点
_self.$refs.poiRef.open({ position: changedC, item: _self.pickValue, removeHandler: () => { _self.removeHandler() } })挪动：postRender监听地位挪动扭转坐标
viewer.scene.postRender.addEventListener(function () {
})相干链接：
bigMap kml和geojson转换
在线图层解决
罕用的地图json下载和svg下载
Ceisum文档比官网快
github代码：https://github.com/holidaying/Cesium/tree/master