代码

附加转类型从openlayers线数据转到DC的Polyline数据

changeData(data, name, value) {let arr = [];for (let k in data[name]) {arr.push({name: data[name][k],value:name == "lxname"? data[value][k].split("(")[1].split(")")[0].split(",").join(";").split(" ").join(","): [+data[value][k].split(",")[0], +data[value][k].split(",")[1]],});}return arr;},

value[0]是线路：使用的是"112,24;112,25"数据类型
value[1]是点
value[2]是弹窗数据，，对于图标事件使用

let addressOur = this.changeData(query, "addressname", "address");let lxOur = this.changeData(query, "lxname", "lx");console.log(addressOur, lxOur);that.$store.dispatch("MSET_DRAWALINELAYERMANY", [lxOur,addressOur,query,]);


//绘画线路活动多条MSET_DRAWALINELAYERMANY({ state, commit, dispatch }, value) {//检查是否存在路线commit("removePolylineMany");commit("removePolyline");let Strs = value[0];let red = global.DC.Namespace.Cesium.Color.fromCssColorString("#FF0000");let white = global.DC.Namespace.Cesium.Color.fromCssColorString("#fff");let blue = global.DC.Namespace.Cesium.Color.fromCssColorString("#2196F3");let material = new global.DC.PolylineTrailMaterialProperty({color: red,speed: 10,});let drawALineLayerMany = new global.DC.VectorLayer("layer");state.mviewer.addLayer(drawALineLayerMany);//多条线for (let k in Strs) {let polyline = new global.DC.Polyline(Strs[k].value); //加入绘画点polyline.setStyle({width: 3,material: material,clampToGround: true,});drawALineLayerMany.addOverlay(polyline);let post = Strs[k].value.split(";")[0].split(",");let position = new global.DC.Position(post[0], post[1]);let Label = new global.DC.Label(position, Strs[k].name);Label.setStyle({font: "16px sans-serif", // CSS 字体设置scale: 1, //比例fillColor: white, //文字颜色showBackground: true, //是否显示背景backgroundColor: blue, //背景颜色// outlineColor: white, //边框颜色// outlineWidth: 10, //边框大小，});drawALineLayerMany.addOverlay(Label);}//多个点let point = value[1];for (let k in point) {let post = point[k].value;let position = new global.DC.Position(post[0], post[1]);let billboard = new global.DC.Billboard(position,"img/dingwei/dingwei4.png"); //加入绘画点// billboard.setStyle({//   width: 3,//   material: material,//   clampToGround: true,// });//订阅事件billboard.on(global.DC.MouseEventType.CLICK, (e) => {// console.log(e);// return;// 定制化窗体let position = e.position,lntLat = [e.overlay._position._lng, e.overlay._position._lat];let windowData = {position,lntLat,query: { ...(value[2] || {}), position, lntLat },useJWD: true, //仅使用经纬度};dispatch("setMobileWindows", windowData);});drawALineLayerMany.addOverlay(billboard);let Labels = new global.DC.Label(position, point[k].name);Labels.setStyle({font: "16px sans-serif", // CSS 字体设置scale: 1, //比例fillColor: white, //文字颜色showBackground: true, //是否显示背景backgroundColor: blue, //背景颜色// outlineColor: white, //边框颜色// outlineWidth: 1, //边框大小，pixelOffset: { x: 0, y: -30 }, //偏移像素});//订阅事件Labels.on(global.DC.MouseEventType.CLICK, (e) => {// console.log(e);// return;// 定制化窗体let position = e.position,lntLat = [e.overlay._position._lng, e.overlay._position._lat];let windowData = {position,lntLat,query: { ...(value[2] || {}), position, lntLat },useJWD: true, //仅使用经纬度};dispatch("setMobileWindows", windowData);});drawALineLayerMany.addOverlay(Labels);// console.log(point[k]);}state.drawALineLayerMany = drawALineLayerMany;state.isOpenDrawALineMany = true;// commit("cameraSetView", state.navigationStartLngLat); //移动},

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}相关推荐

cesium 经纬度绘制点_cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
Cesium.js点线面绘制
Cesium.js在三维GIS中十分的流行,点.线.面的绘制也是GIS开发中经常用到的基础操作.最近在Ceisum.js三维开发时,也是遇到了点.线.面的绘制功能开发,正好这里记录分享一下. 效果核 ...
使用Cesium动态绘制点、线、面、圆、矩形
将以下代码复制到https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Drawing%20on%20Terrain.html查看Demo. va ...
cesium动态绘制圆，矩形，自定义区域
cesium动态绘制圆,矩形,自定义区域自己封装了一个类,可以放在js文件中引入项目,具体使用和代码如下 class Draw {constructor(viewer, config) {/**ce ...
使用Cesium.js加载3D模型
最近项目中用到室外三维模型与室内三维地图交互,室外三维模型的加载我们采用了cesium js来实现,在使用的过程中遇到了许多的问题,闲暇之余将其实现及遇到的问题记录下来,以备将来再用到时少走弯路. 一 ...
【超图+CESIUM】【基础API使用示例】22、超图｜CESIUM - 标绘面：Cesium.DrawHandler绘制面Cesium.DrawMode.Polygon
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
Cesium开发-绘制墙体
Cesium中绘制图形有两种方式,一可以通过entity自定义图形也可以使用primitives的方式绘制图形,以下是两个示例的代码总结: <!DOCTYPE html> <html ...
Cesium.js 三维土壤地质剖面分割挖掘
之前看过很多的三维场景下,在地表处进行挖掘分割,查看地表下的管线走向.土壤成分.地质分层的案例.最近使用Cesium.js实现了一下,在三维场景下,在地表圈画挖掘范围,然后展示剖面.界面的功能效果 ...
Cesium：绘制带洞的多边形
绘制结果如下图所示, 下面来聊一下如何绘制? 先通过Cesium.js API查看PolygonGeometry多边形的配置参数如下, 其中:polygonHierarchy对应的Cesium.Pol ...

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}

代码

便利贴--9{Cesium+js绘制多个点和多个线的图层，加标题}相关推荐

最新文章

热门文章