次要参考资料汇总
http://support.supermap.com.c...
http://cesium.xin/cesium/cn/D...
http://support.supermap.com.c...
描述点
viewer.entities.add({ name: name, position: new Cesium.Cartesian3.fromDegrees(lon, lat, h), // 广告牌 billboard: new Cesium.BillboardGraphics({ image: icon || "images/shuniu.png", horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, alignedAxis: Cesium.Cartesian3.ZERO, disableDepthTestDistance: Number.POSITIVE_INFINITY, // 能够显示的间隔 distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, height ), }), });描述线
// positions 是笛卡尔坐标系x y zlet polyCenter = Cesium.BoundingSphere.fromPoints(positions).center; polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);viewer.entities.add({ show: true, position: polyCenter, // 为了找到线的中心点， 不须要能够不必写 name: row.PlacemarkName, polyline: { positions, width: row.LineWidth || 2, material: new Cesium.Color.fromCssColorString(row.LineColor || 'red'), clampToGround: true, show: true, distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, row.LineShowHeight ), }})增加闪光尾迹线
首先得先全局开启闪耀成果
viewer.scene.bloomEffect.show = true;viewer.scene.hdrEnabled = true;viewer.scene.bloomEffect.bloomIntensity = 1;而后实现尾迹线
viewer.entities.add({ // 尾迹线 polyline: { positions, width: row.LineWidth || 2, // 线的宽度，像素为单位 material: new Cesium.PolylineTrailMaterialProperty({ // 尾迹线材质 值越大光越闪耀 0-1属于失常 1以上闪耀成果 color: new Cesium.Color( 1.00392156862745098, 3.8784313725490196, 0.3176470588235294, 1 ), trailLength: 0.4, period: 10, }), distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, row.LineShowHeight ), }, ClampToGround: true, });波纹雷达圈
首先得扩大cesium办法 存为CircleWaveMaterialProperty.js
export class CircleWaveMaterialProperty { constructor(options) { options = Cesium.defaultValue(options, Cesium.defaultValue.EMPTY_OBJECT); this._definitionChanged = new Cesium.Event(); this._color = undefined; this._colorSubscription = undefined; this.color = options.color; this.duration = Cesium.defaultValue(options.duration, 1e3); this.count = Cesium.defaultValue(options.count, 2); if (this.count <= 0) this.count = 1; this.gradient = Cesium.defaultValue(options.gradient, 0.1); if (this.gradient < 0) this.gradient = 0; else if (this.gradient > 1) this.gradient = 1; this._time = performance.now(); }}Object.defineProperties(CircleWaveMaterialProperty.prototype, { isConstant: { get: function () { return false; } }, definitionChanged: { get: function () { return this._definitionChanged; } }, color: Cesium.createPropertyDescriptor('color')});CircleWaveMaterialProperty.prototype.getType = function (time) { return Cesium.Material.CircleWaveMaterialType;}CircleWaveMaterialProperty.prototype.getValue = function (time, result) { if (!Cesium.defined(result)) { result = {}; } result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color); result.time = (performance.now() - this._time) / this.duration; result.count = this.count; result.gradient = 1 + 10 * (1 - this.gradient); return result;}CircleWaveMaterialProperty.prototype.equals = function (other) { return this === other || (other instanceof CircleWaveMaterialProperty && Cesium.Property.equals(this._color, other._color))}Cesium.Material.CircleWaveMaterialType = 'CircleWaveMaterial';Cesium.Material.PolylineTrailSource = `czm_material czm_getMaterial(czm_materialInput materialInput)\n {\n czm_material material = czm_getDefaultMaterial(materialInput);\n material.diffuse = 1.5 * color.rgb;\n vec2 st = materialInput.st;\n vec3 str = materialInput.str;\n float dis = distance(st, vec2(0.5, 0.5));\n float per = fract(time);\n if (abs(str.z) > 0.001) {\n discard;\n }\n if (dis > 0.5) { \n discard; \n } else { \n float perDis = 0.5 / count;\n float disNum; \n float bl = .0; \n for (int i = 0; i <= 999; i++) { \n if (float(i) <= count) { \n disNum = perDis *float(i) - dis + per / count; \n if (disNum > 0.0) { \n if (disNum < perDis) { \n bl = 1.0 - disNum / perDis;\n }\n else if(disNum - perDis < perDis) { \n bl = 1.0 - abs(1.0 - disNum / perDis); \n } \n material.alpha = pow(bl, gradient); \n } \n } \n } \n } \n return material; \n } \n`;Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleWaveMaterialType, { fabric: { type: Cesium.Material.CircleWaveMaterialType, uniforms: { color: new Cesium.Color(1.0, 0.0, 0.0, 1.0), time: 1, count: 1, gradient: 0.1 }, source: Cesium.Material.PolylineTrailSource }, translucent: function (material) { return !0; }});Cesium.CircleWaveMaterialProperty = CircleWaveMaterialProperty;调用前须要存在此办法，也就是得全局调用一次，让cesium领有雷达圈得类
require("./CircleWaveMaterialProperty");调用
viewer.entities.add({ position: new Cesium.Cartesian3.fromDegrees(lon, lat, h), ellipse: { height: 1, semiMinorAxis: 1000, semiMajorAxis: 1000, material: new Cesium.CircleWaveMaterialProperty({ duration: 2e3, gradient: 0.5, color: new Cesium.Color(1.0, 0.0, 0.0, 1.0), count: 2, }), disableDepthTestDistance: Number.POSITIVE_INFINITY, distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, height ), }, clampToGround: true, billboard: { image: this.renderText(name), horizontalOrigin: Cesium.HorizontalOrigin.CENTER, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, alignedAxis: Cesium.Cartesian3.ZERO, disableDepthTestDistance: Number.POSITIVE_INFINITY, pixelOffset: new Cesium.Cartesian2(0, -40), distanceDisplayCondition: new Cesium.DistanceDisplayCondition( 0, height ), },});点击某个图层呈现对应弹窗
留神: 因为是监听每一帧的事件, 弹窗太多cesium必会卡顿!
// 创立弹窗对象的办法const Popup = function (info) { this.constructor(info);};Popup.prototype.id = 0;Popup.prototype.constructor = function (info) { const _this = this; _this.viewer = info.viewer;//弹窗创立的viewer _this.geometry = info.geometry;//弹窗挂载的地位 _this.id = "popup_" + _this.__proto__.id++; _this.html = info.html const dom = document.createElement('div'); dom.className = 'bx-popup-ctn'; dom.id = _this.id; _this.ctn = dom; _this.viewer.container.appendChild(_this.ctn); _this.ctn.insertAdjacentHTML('beforeend', _this.createHtml(info.title, info.data)); _this.render(_this.geometry); _this.viewer.scene.postRender.addEventListener(_this.eventListener, _this)}Popup.prototype.eventListener = function () { this.render.call(this, this.geometry);}// 弹窗的内容Popup.prototype.createHtml = function (title, data) { window.pop = this return ` <div class="cesium-pupop-title"> <h1 class="title">${title}</h1> <span class="iconfont icon-cha1" style="position: absolute;color: #00fbfb;top: 33px;right: 30px;cursor:pointer;" onclick="pop.close()"></span> ${data.length > 0 ? data.map(v => `<div class="cesium-row"><span>${v.name}:</span> <span>${v.value}</span></div>`).join('') : '<div class="cesium-row" style="color: #fff;text-align: center;height: 200px;line-height: 200px;">暂无属性</div>'} </div>`}// 重点是实时刷新Popup.prototype.render = function (geometry) { var _this = this; var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, geometry) _this.ctn.style.left = `${position.x - Math.floor(_this.ctn.offsetWidth / 2)}px` _this.ctn.style.top = `${position.y - _this.ctn.offsetHeight - 10}px`}// 敞开弹窗按钮Popup.prototype.close = function () { var _this = this; _this.ctn.remove(); // _this.viewer.clock.onTick.removeEventListener(_this.eventListener); _this.viewer.scene.postRender.removeEventListener(_this.eventListener, _this)}export default Popup;调用
new CesiumPopup({ viewer: viewer, geometry: polyCenter, // 这个坐标是世界坐标也就是笛卡尔坐标! title: entity._name, data: ddd});拿到图层后如何设置图层高度
const osgbLayer = viewer.scene.addS3MTilesLayerByScp(url, { name: row })Cesium.when(osgbLayer, function (row) { if (node.data.DisplayHeight) { // 设置海拔高度 row._style3D.bottomAltitude = node.data.DisplayHeight }})拿到图层后如何设置图层可见高度
const osgbLayer = viewer.scene.addS3MTilesLayerByScp(url, { name: row })Cesium.when(osgbLayer, function (row) { // 可见海拔高度设置 // row.maxVisibleAltitude = node.data.MaxDisplayHeight // 设置相机和图层的可见间隔 row.visibleDistanceMax = layer.DisplayHeight || 100000;})设置地形
viewer.terrainProvider = terrainProvider = new Cesium.CesiumTerrainProvider({ // url形如: http://172.18.1.106:8090/iserver/services/3D-SuiZhouDianChang/rest/realspace/datas/图层名称 url: url + '/datas/' + name, isSct: true })加载影像
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({ url: _url, tilingScheme: new Cesium.WebMercatorTilingScheme(), subdomains: '1234', }));加载服务器贴图
viewer.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({ url: '/iserver/services/3D-QuanMuTangChuSheFaBu/rest/realspace/datas/xxx影像缓存',}));获取实体属性
首先拿到选中的图层及其SMID
// 获取到选中的layerconst selectedLayer = scene.layers.getSelectedLayer();if (selectedLayer) { var selectedSmid = parseInt(selectedLayer.getSelection()); //获得超图属性 if(callback){ // 拿到layer和smid就行了 callback(selectedLayer, selectedSmid) }}依据SMID查问属性
doSqlQuery(sqlStr, dataSerice, dataset, datasource) { const _this = this; const sqlParameter = { "datasetNames": [`${datasource}:${dataset}`], getFeatureMode: "SQL", queryParameter: { attributeFilter: sqlStr } }; const url = `/iserver/services/${dataSerice}/data/featureResults.json?returnContent=true&token=${eval(localStorage.getItem('TOKEN_ISERVER'))}` const queryData = JSON.stringify(sqlParameter); const IGNOREFIELD = JSON.parse(localStorage.getItem('IGNOREFIELD')) _this.loading = true $.ajax({ type: "post", url: url, data: queryData, success: function (result) { if (result.features && result.features.length > 0) { const data = result.features[0] const fieldNames = data.fieldNames const fieldValues = data.fieldValues _this.moduleListData = [] fieldNames.forEach((row, i) => { if (IGNOREFIELD.indexOf(row) !== -1) return _this.moduleListData.push({ Name: row, Value: fieldValues[i] }) }) } else { _this.$message.info('没有查问到属性！') } _this.loading = false }, error: function () { _this.$message.info('没有查问到属性！') _this.loading = false }, })}// 这么调用this.doSqlQuery('SmID=' + this.relationListCode[1], layer.DataService, layer.SurMapDataSet, layer.DataSource)设置图层透明度
function translucentLayers(scene, alpha) { for (var i = 0; i < scene.layers.layerQueue.length; i++) { var layer = scene.layers.findByIndex(i); if (layer) { layer.style3D.fillForeColor.alpha = parseFloat(alpha); } }}设置影像透明度
const _layers = viewer.imageryLayers._layersfor (let i = 0, len = _layers.length; i < len; i++) { _layers[i].alpha = 0.6}监听点击事件
const events = { click: "LEFT_CLICK", wheel: "WHEEL", middleClick: "MIDDLE_DOWN", mouseMove: "MOUSE_MOVE"}viewer.screenSpaceEventHandler.setInputAction(e => { this.$emit(key, e)}, Cesium.ScreenSpaceEventType[events[key]])通过超图名称获取图层
viewer.scene.layers.find(SuperLayerName)设置更改构件色彩
layer.setObjsColor(ids, cesiumColor);其中:
- layer是图层对象
- ids是smid数组
- cesiumColor是cesium的色彩对象
如果只须要影响一个构件应用此办法
layer.setOnlyObjsColor(smId, cesiumColor);通过图层获取其下的所有smid
layer._selections返回的是["3762", "123"]这样的smid汇合
暗藏构件
layer.setObjsVisible(ids, bool)其中
- layer是图层对象
- ids是smid汇合
- bool是是否显示, true为显示 false为暗藏
将图层下的构件全副显示只须要将ids设置为[]即可
layer.setObjsVisible([], false);如果只须要影响一个构件应用此办法
layer.setOnlyObjsVisible(smid, bool)设置光源追随摄像头
//设置光源追随var degZ = 0;//程度夹角var degX = 0; //垂直夹角scene.sun.show = false;// 设置环境光的强度scene.lightSource.ambientLightColor = new Cesium.Color(0.86,0.86, 0.86, 1);// var position1 = new Cesium.Cartesian3.fromDegrees(117.61862360516848 - 0.000009405717451407729 * 86.6, 40.2317259501307 - 0.00000914352698135 * 50, 350);// 设置初始光源地位var position1 = new Cesium.Cartesian3.fromDegrees(117.61862360516848, 32.19180102105889, 350);var targetPosition1 = new Cesium.Cartesian3.fromDegrees(117.61862360516848, 32.19180102105889, 130);var dirLightOptions = { targetPosition: targetPosition1, color: new Cesium.Color(1.0, 1.0, 1.0, 1), intensity: 0.7};directionalLight_1 = new Cesium.DirectionalLight(position1, dirLightOptions);scene.addLightSource(directionalLight_1);scene.postRender.addEventListener(function () { // 每一帧 十分耗性能 var cameraPosition = Cesium.Cartesian3.clone(scene.camera.position); var length = 100; var quad1 = Cesium.Quaternion.fromAxisAngle(viewer.scene.camera.upWC, Cesium.Math.toRadians(degZ)); var quad2 = Cesium.Quaternion.fromAxisAngle(viewer.scene.camera.rightWC, Cesium.Math.toRadians(degX)); var resQuad = Cesium.Quaternion.add(quad2, quad1, quad1); var rotation = Cesium.Matrix3.fromQuaternion(resQuad); var direction = Cesium.Matrix3.multiplyByVector(rotation, viewer.scene.camera.directionWC, new Cesium.Cartesian3()); var targetPosition2 = Cesium.Cartesian3.add( viewer.scene.camera.positionWC, Cesium.Cartesian3.multiplyByScalar(direction, length, new Cesium.Cartesian3()), new Cesium.Cartesian3() ); directionalLight_1.position = cameraPosition; directionalLight_1.targetPosition = targetPosition2;});点击某个点呈现弹窗并且应用Vue组件实现
Pop.js
// 创立弹窗对象的办法import Vue from 'vue'const Popup = function (info, component) { this.constructor(info, component)}Popup.prototype.id = 0Popup.prototype.constructor = function (info, component) { const _this = this window.pop = this _this.viewer = info.viewer// 弹窗创立的viewer _this.geometry = info.geometry// 弹窗挂载的地位 // eslint-disable-next-line no-proto _this.id = 'popup_' + _this.__proto__.id++ _this.html = info.html const dom = document.createElement('div') dom.className = 'bx-popup-ctn' dom.id = _this.id _this.ctn = dom // 次要步骤 if (component) { const vuecomponent = Vue.extend(component) // eslint-disable-next-line new-cap const c = new vuecomponent().$mount() _this.ctn.appendChild(c.$el) } else { _this.ctn.insertAdjacentHTML('beforeend', _this.createHtml(info.title, info.data)) } _this.viewer.container.appendChild(_this.ctn) _this.viewer.scene.postRender.addEventListener(_this.eventListener, _this)}Popup.prototype.eventListener = function () { this.render(this.geometry)}// 弹窗的内容Popup.prototype.createHtml = function (title, data) { let html if (Object.prototype.toString.call(data) === '[object Array]') { html = data.reduce((acc, val) => { return acc + `<div class="bx-attribute-item"> <span class="bx-attr-name">${val.PropertyName}</span> <span class="bx-attr-name">${val.value}</span> </div>` }, '') } else { html = data } return `<div class="bx-popup"> <img src="${require('./image/attribute/ff.png')}" alt=""/> <div class="bx-content"> <div class="bx-top"></div> <div class="bx-bd-c-bottom"></div> <div class="bx-bd-c-left"></div> <div class="bx-bd-c-right"></div> <div class="bx-bd-dashed-top"></div> <div class="bx-bd-dashed-left"></div> <div class="bx-bd-dashed-bottom"></div> <div class="bx-bd-dashed-right"></div> <img src="${require('./image/attribute/hh.png')}" alt="" class="bx-bd-dashed-c-bottom"/> <img src="${require('./image/attribute/gg.png')}" alt="" class="bx-bd-bottom"/> <img src="${require('./image/attribute/cc.png')}" alt="" class="bx-bd-right"/> <div class="bx-body"> <h1 class="bx-title">${title}</h1> <div class="bx-body-content"> ${html} </div> </div> </div></div> `}// 重点是实时刷新Popup.prototype.render = function (geometry) { const _this = this const position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_this.viewer.scene, geometry) if (position) { _this.ctn.style.left = `${position.x}px` _this.ctn.style.top = `${position.y - _this.ctn.offsetHeight / 2 - 10}px` }}// 敞开弹窗按钮Popup.prototype.close = function () { const _this = this _this.viewer.scene.postRender.removeEventListener(_this.eventListener, _this) _this.ctn.remove() // _this.viewer.clock.onTick.removeEventListener(_this.eventListener);}export default Popup应用时
new Popup({ viewer, geometry: e.data.position, title: '门禁信息', data: '<div>Fuck</div>'}, AccessControl)其中: AccessControl是vue组件!
import AccessControl from '@/components/AccessControl.vue'次要应用了Vue的$mount()办法
获取相机信息
viewer.scene.camera将世界坐标转换为屏幕坐标
Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, geometry)其中
- scene 是场景
- geometry 是世界坐标
依据CSS色彩值创立一个Color实例。
Cesium.Color.fromCssColorString('#67ADDF');Cesium色彩数值和惯例HTML色彩数值的转换公式
通过一番调研，发现Cesium.Color(r, g,b,a)中, r,g,b,a的值均在0-1之间.和html rgba的换算如下:
Cesium.Color(html.r/255, html.g/255, html.b/255, html.a)js办法如下, 其中colorString必须是16进制色
colorConvert(colorString) { const red = parseInt(colorString.slice(1, 3), 16) / 255; const green = parseInt(colorString.slice(3, 5), 16) / 255; const blue = parseInt(colorString.slice(5, 7), 16) / 255; return new Cesium.Color(red, green, blue, 1);},聚合label、广告牌
_this.clusteringlayer = new Cesium.CustomDataSource('clusteringlayer');const pixelRange = 50;const minimumClusterSize = 2;const enabled = true;//启用集群_this.clusteringlayer.clustering.enabled = enabled;//设置扩大屏幕空间边界框的像素范畴。_this.clusteringlayer.clustering.pixelRange = pixelRange;//能够群集的最小屏幕空间对象_this.clusteringlayer.clustering.minimumClusterSize = minimumClusterSize;//将进行实体的广告牌聚类_this.clusteringlayer.clustering.clusterBillboards = true;var removeListener;//自定义地图图钉生成为画布元素var pinBuilder = new Cesium.PinBuilder();customStyle();function customStyle() {if (Cesium.defined(removeListener)) { removeListener(); removeListener = undefined;} else { removeListener = _this.clusteringlayer.clustering.clusterEvent.addEventListener(function(clusteredEntities, cluster) { cluster.label.show = false; cluster.billboard.show = true; cluster.billboard.id = cluster.label.id; cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM; cluster.billboard.disableDepthTestDistance = Number.POSITIVE_INFINITY; //文本将被调整为尽可能大的大小同时仍齐全蕴含在图钉中 // var pinimg = pinBuilder.fromText(clusteredEntities.length, Cesium.Color.BLUE, 50).toDataURL(); // var pinimg='./images/location4.png'; if (clusteredEntities?.[0]?._name) cluster.billboard.image = _this.renderText(clusteredEntities[0]._name, undefined, undefined, 14); //cluster.billboard.scale=0.2; });}}// 对于须要聚合的实体应用// _this.clusteringlayer.entities.add(entity)// 增加到viewer中viewer.dataSources.add(_this.clusteringlayer)超图动静绘标汇总
初始化绘标以及加载标注库
methods: { // 初始化 InitPlot(viewer, serverUrl) { if (!viewer) { return; } const _this = this; const plottingLayer = new Cesium.PlottingLayer( viewer.scene, 'plottingLayer' ); this.plottingLayer = plottingLayer; viewer.scene.plotLayers.add(plottingLayer); const plotting = Cesium.Plotting.getInstance( serverUrl, viewer.scene ); this.plotting = plotting; this.plotEditControl = new Cesium.PlotEditControl( viewer.scene, plottingLayer ); //编辑控件 this.plotEditControl.activate(); this.plotDrawControl = new Cesium.PlotDrawControl( viewer.scene, plottingLayer ); //绘制控件 this.plotDrawControl.drawControlEndEvent.addEventListener( function() { //标绘完结，激活编辑控件 _this.plotEditControl.activate(); } ); this.loadSymbolLib(plotting); console.log(plotting.getDefaultStyle()); // 一些缺省属性，不须要能够删除 plotting.getDefaultStyle().lineWidth = this.thickness; plotting.getDefaultStyle().lineColor = this.colorConvert( this.color ); plotting.getDefaultStyle().defaultFlag = true; }, // 加载标注库 loadSymbolLib(plotting) { const symbolLibManager = plotting.getSymbolLibManager(); if (symbolLibManager.isInitializeOK()) { // isok } else { symbolLibManager.initializecompleted.addEventListener( function(result) { if (result.libIDs.length !== 0) { // isok } } ); symbolLibManager.initializeAsync(); } },}只须要执行InitPlot办法即可
this.InitPlot( viewer, '/iserver/services/plot-jingyong/rest/plot');不应用面板如何画标
handleDraw(id, code) { this.plotDrawControl.setAction(id, code); this.plotDrawControl.activate(); this.plotEditControl.deactivate();},绘标须要一个id和code, 那么如何获取id和code？
如果是根本标记(线之类的)
http://support.supermap.com.c...能够点击画好的标注查看属性，属性中有id和code
除了根本标记外
http://${ip或域名}/iserver/services/plot-jingyong/rest/plot/symbolLibs/能够看到所有的标记库
如何预约义款式
批改超图默认的标注色彩等
plotting.getDefaultStyle().lineWidth = this.thickness;能够从控制台中看到plotting.getDefaultStyle()中所有的缺省属性，间接赋值就能够批改缺省属性