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

代码

附加转类型从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); //移动},