| | |
| | | mars3d.global_variables.queryDataTEnd = getDefaultDateTime(); |
| | | |
| | | |
| | | |
| | | function initLayersByUserid() { |
| | | |
| | | //addMaskShanghai(); |
| | |
| | | if ([item['type']] == 'wms') { |
| | | addWMSLayer(item); |
| | | } else if ([item['type']] == 'wind') { |
| | | console.log('wind') |
| | | addWindLayer(item); |
| | | } else if ([item['type']] == 'graphic') { |
| | | //addGuokongLayer(item); |
| | |
| | | } |
| | | |
| | | function addWMSLayer(item) { |
| | | |
| | | |
| | | var wmsLyer = new mars3d.layer.WmsLayer({ |
| | | id: item.id, |
| | | pid: item.pid, |
| | |
| | | style_options: item.styleoptions, |
| | | flyTo: false |
| | | }); |
| | | |
| | | |
| | | //单击事件 |
| | | wmsLyer.on(mars3d.EventType.click, function (event) { |
| | | console.log("单击了矢量数据,共" + event.features.length + "条", event); |
| | | }); |
| | | |
| | | |
| | | map.addLayer(wmsLyer); |
| | | |
| | | |
| | | } |
| | | function addMaskShanghai() { |
| | | |
| | | function addGuokongLayer(item) { |
| | | //创建矢量数据图层 |
| | | var guokongLayer =new mars3d.layer.GraphicLayer({ |
| | | id: item.id, |
| | | pid: item.pid, //图层管理 中使用,父节点id |
| | | name: item.name, |
| | | style_options: item.styleoptions |
| | | //geojson 合肥边界线 |
| | | geoJsonLayer = new mars3d.layer.GeoJsonLayer({ |
| | | url: "//data.mars3d.cn/file/geojson/areas/340100.json", |
| | | mask: true, //标识为遮罩层【重点参数】 |
| | | symbol: { |
| | | styleOptions: { |
| | | fill: true, |
| | | color: "rgb(2,26,79)", |
| | | opacity: 0.9, |
| | | outline: false, |
| | | outlineColor: "#39E09B", |
| | | outlineWidth: 8, |
| | | outlineOpacity: 0.8, |
| | | arcType: Cesium.ArcType.GEODESIC, |
| | | clampToGround: true, |
| | | }, |
| | | }, |
| | | }); |
| | | map.addLayer(guokongLayer); |
| | | |
| | | |
| | | guokongLayer.on(mars3d.EventType.click, function (event) { |
| | | console.log("监听layer,单击了矢量对象", event); |
| | | console.log(event.graphic?.attr) |
| | | event.graphic.startBounce({ |
| | | autoStop: true, |
| | | step: 2, |
| | | maxHeight: 90, |
| | | }); |
| | | var item = event.graphic?.attr; |
| | | }); |
| | | |
| | | guokongLayer.bindPopup(function (event) { |
| | | let item = event.graphic?.attr; |
| | | var html = |
| | | "站点名称:" + |
| | | item["SiteName"] + |
| | | "<br />分区:" + |
| | | item["RegionName"] + |
| | | "<br />AQI:" + |
| | | item["AQI"] + |
| | | "<br />PM25:" + |
| | | item["PM25"] + "ug/m3" + |
| | | "<br />SO2:" + |
| | | item["SO2"] + "ug/m3" + |
| | | "<br />O3:" + |
| | | item["O31"] + "ug/m3" + |
| | | "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["SiteName"] + "\")' >详细信息</a></p>"; |
| | | return html; |
| | | }); |
| | | |
| | | |
| | | // add 国控点 |
| | | $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1001_list_hour&datatime=2021-09-06%2012:00:00&qindex=pm25", (result) => { |
| | | var pointColorArr = ["#f33349", "#fff000", "#33347f"]; |
| | | for (var i = 0, len = result.data.result.length; i < len; i++) { |
| | | var item = result.data.result[i]; |
| | | var graphic = new mars3d.graphic.BillboardEntity({ |
| | | name: "贴地图标", |
| | | position: [item.Longitude, item.Latitude], |
| | | style: { |
| | | image: "img/marker/di3.png", |
| | | scale: 0.2, |
| | | horizontalOrigin: Cesium.HorizontalOrigin.CENTER, |
| | | verticalOrigin: Cesium.VerticalOrigin.BOTTOM, |
| | | clampToGround: true, |
| | | |
| | | //高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用 |
| | | highlight: { |
| | | scale: 0.8, |
| | | }, |
| | | }, |
| | | attr:item |
| | | }); |
| | | guokongLayer.addGraphic(graphic); |
| | | } |
| | | }); |
| | | |
| | | } |
| | | |
| | | function addGuokongLayerDIV(item) { |
| | |
| | | style_options: item.styleoptions |
| | | }); |
| | | map.addLayer(guokongLayer); |
| | | |
| | | |
| | | guokongLayer.on(mars3d.EventType.click, function (event) { |
| | | console.log("监听layer,单击了矢量对象", event); |
| | |
| | | "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["SiteName"] + "\")' >详细信息</a></p>"; |
| | | return html; |
| | | }); |
| | | |
| | | |
| | | // add 国控点 |
| | | $.getJSON("http://58.246.27.194:7012/dataapi/Bdata?bid=get_1001_list_hour&datatime=2021-09-06%2012:00:00&qindex=pm25", (result) => { |
| | | var pointColorArr = ["#f33349", "#fff000", "#33347f"]; |
| | | for (var i = 0, len = result.data.result.length; i < len; i++) { |
| | | var item = result.data.result[i]; |
| | | var jd = result.data.result[i].Longitude; |
| | | var wd = result.data.result[i].Latitude; |
| | | var clr = pointColorArr[i % pointColorArr.length]; |
| | | var graphic = new mars3d.graphic.DivLightPoint({ |
| | | position: Cesium.Cartesian3.fromDegrees(jd, wd), |
| | | style: { |
| | | color: clr, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
| | | // html: '<div class="mars3d-animation-point" style="color:' + clr + ';"><p></p></div>', |
| | | // html: '<div><p><img src="img/marker/mark1.png"></p></div>', |
| | | highlight: { |
| | | type: "divLightPoint", |
| | | diffHeight: 600, |
| | | material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, { |
| | | color: "#ffff00", |
| | | count: 3, |
| | | speed: 20, |
| | | }), |
| | | }, |
| | | distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示 |
| | | }, |
| | | show: true, |
| | | attr: item, |
| | | }); |
| | | guokongLayer.addGraphic(graphic); |
| | | } |
| | | |
| | | }); |
| | | |
| | | map.addLayer(guokongLayer); |
| | | } |
| | | |
| | | function addWindLayer(item) { |
| | | |
| | | |
| | | $.getJSON("data/getWindParametersByTime.json", { datatype: mars3d.global_variables.queryDataType, datatime: mars3d.global_variables.queryDataTStart }, (result) => { |
| | | console.log(result); |
| | | |
| | | |
| | | var layer_wind = new mars3d.layer.CanvasWindLayer({ |
| | | id: item.id, |
| | | pid: item.pid, |
| | |
| | | }); |
| | | layer_wind.show = item.show; |
| | | map.addLayer(layer_wind); |
| | | |
| | | |
| | | layer_wind.data = convertWindData(result.data); |
| | | }); |
| | | } |
| | | |
| | | |
| | | function convertWindData(arr) { |
| | | |
| | | |
| | | var arrU = []; |
| | | var arrV = []; |
| | | |
| | | |
| | | var xmin = arr[0].x; |
| | | var xmax = arr[0].x; |
| | | var ymin = arr[0].y; |
| | | var ymax = arr[0].y; |
| | | |
| | | |
| | | // 风向是以y轴正方向为零度顺时针转,0度表示北风。90度表示东风。 |
| | | // u表示经度方向上的风,u为正,表示西风,从西边吹来的风。 |
| | | // v表示纬度方向上的风,v为正,表示南风,从南边吹来的风。 |
| | |
| | | if (ymax < item.y) { |
| | | ymax = item.y; |
| | | } |
| | | |
| | | |
| | | var u = mars3d.WindUtil.getU(item.speed, item.dir); |
| | | arrU.push(u); |
| | | |
| | | |
| | | var v = mars3d.WindUtil.getV(item.speed, item.dir); |
| | | arrV.push(v); |
| | | } |
| | | |
| | | |
| | | var rows = getKeyNumCount(arr, "y"); //计算 行数 |
| | | var cols = getKeyNumCount(arr, "x"); //计算 列数 |
| | | |
| | | |
| | | return { |
| | | xmin: xmin, |
| | | xmax: xmax, |
| | |
| | | vdata: arrV, //纵向风速 |
| | | }; |
| | | } |
| | | |
| | | |
| | | function getKeyNumCount(arr, key) { |
| | | var obj = {}; |
| | | arr.forEach((item) => { |
| | | obj[item[key]] = true; |
| | | }); |
| | | |
| | | |
| | | var count = 0; |
| | | for (let col in obj) { |
| | | count++; |
| | | } |
| | | return count; |
| | | } |
| | | |
| | | |
| | | function addTaxiLayer(item) { |
| | | |
| | |
| | | Vec_annoTileLayer.pid = 50; |
| | | map.addLayer(Vec_annoTileLayer); |
| | | } |
| | | |
| | | function addMaskShanghai() { |
| | | |
| | | //geojson 合肥边界线 |
| | | geoJsonLayer = new mars3d.layer.GeoJsonLayer({ |
| | | url: "//data.mars3d.cn/file/geojson/areas/340100.json", |
| | | mask: true, //标识为遮罩层【重点参数】 |
| | | symbol: { |
| | | styleOptions: { |
| | | fill: true, |
| | | color: "rgb(2,26,79)", |
| | | opacity: 0.9, |
| | | outline: false, |
| | | outlineColor: "#39E09B", |
| | | outlineWidth: 8, |
| | | outlineOpacity: 0.8, |
| | | arcType: Cesium.ArcType.GEODESIC, |
| | | clampToGround: true, |
| | | }, |
| | | }, |
| | | }); |
| | | map.addLayer(geoJsonLayer); |
| | | |
| | | } |
| | | |
| | | |
| | | function showDetail(layerid, itemCode) { |
| | | haoutil.msg('单击了:' + layerid + ',' + itemCode); |