| | |
| | | mars3d.global_variables = { geoserver_url_predix: 'http://58.246.27.194:7011/', nodejs_url_predix: 'http://58.246.27.194:7012/', userid: 2, queryDataType: 'hour' }; |
| | | mars3d.global_variables.queryDataTStart = getDefaultDateTime(); |
| | | mars3d.global_variables.queryDataTStartGeo = getDefaultDateTimeGeo(); |
| | | |
| | | mars3d.global_variables.queryDataTEnd = getDefaultDateTimeEnd(); |
| | | |
| | | var guokong_color_list = ['#0EE839', '#FEFE23', '#FD9D00', '#F70F0D', '#8A0B73', '#88041E']; |
| | | var guokong_color_nodata = '#C0C0C0'; |
| | | var guokong_qindex_list = { 'pm25': [35, 75, 115, 150, 250], 'pm10': [50, 150, 250, 350, 420], 'no2': [100, 200, 700, 1200, 2340], 'co': [5, 10, 35, 60, 90] }; |
| | | var guokong_data_list; |
| | | var taxi_data_list; |
| | | |
| | | |
| | | function initLayersByUserid() { |
| | |
| | | layers: "konglu_58:" + item.geoname_prefix + mars3d.global_variables.queryDataType, |
| | | crs: "EPSG:4326", |
| | | parameters: { |
| | | "styles": item.style_prefix + item.styleoptions[0], |
| | | "styles": item.style_prefix + item.style_selected, |
| | | "transparent": "true", |
| | | "format": "image/png", |
| | | "viewparams": "userid:" + mars3d.global_variables.userid + ";datatime:" + mars3d.global_variables.queryDataTStartGeo |
| | |
| | | show: item.show, |
| | | geoname_prefix: item.geoname_prefix, |
| | | style_prefix: item.style_prefix, |
| | | style_selected:item.style_selected, |
| | | style_options: item.styleoptions, |
| | | flyTo: false |
| | | }); |
| | |
| | | //单击事件 |
| | | wmsLyer.on(mars3d.EventType.click, function (event) { |
| | | console.log("单击了矢量数据,共" + event.features.length + "条", event); |
| | | console.log(event.layer.options.style_selected); |
| | | |
| | | |
| | | console.log(event.graphic); |
| | | /* |
| | | event.graphic.style.diffHeight = |
| | | |
| | | diffHeight: 300, |
| | | material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, { |
| | | image: "img/textures/fence.png", |
| | | color: "#ffff00", |
| | | speed: 10, //速度,建议取值范围1-100 |
| | | axisY: true, |
| | | }), |
| | | */ |
| | | }); |
| | | |
| | | map.addLayer(wmsLyer); |
| | | |
| | | } |
| | | 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, |
| | | }, |
| | | }, |
| | | }); |
| | | } |
| | | |
| | | function addGuokongLayerDIV(item) { |
| | | |
| | | var guokongLayer = new mars3d.layer.DivLayer({ |
| | | id: item.id, |
| | | pid: item.pid, //图层管理 中使用,父节点id |
| | | name: item.name, |
| | | style_selected: 'pm25', |
| | | style_options: item.styleoptions, |
| | | show: item.show |
| | | }); |
| | | map.addLayer(guokongLayer); |
| | | |
| | | guokongLayer.on(mars3d.EventType.click, function (event) { |
| | | console.log("监听layer,单击了矢量对象", event); |
| | | console.log(event.graphic?.attr) |
| | | var item = event.graphic?.attr; |
| | | //haoutil.msg('单击了:' + item['高校名称']) |
| | | }); |
| | | |
| | | guokongLayer.bindPopup(function (event) { |
| | | let item = event.graphic?.attr; |
| | | //console.log(item); |
| | | var html = |
| | | "站点编号:" + |
| | | item["code"] + |
| | | "<br />站点名称:" + |
| | | item["name"] + |
| | | "<br />数据时间:" + |
| | | item["datatime"] + |
| | | "<br />PM2.5:" + |
| | | item["PM25"] + "ug/m3" + |
| | | "<br />PM10:" + |
| | | item["PM10"] + "ug/m3" + |
| | | "<br />NO2:" + |
| | | item["NO2"] + "ug/m3" + |
| | | "<br />CO:" + |
| | | item["CO"] + "ug/m3" + |
| | | "<br />SO2:" + |
| | | item["SO2"] + "ug/m3" + |
| | | "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' >详细信息</a></p>"; |
| | | return html; |
| | | }); |
| | | |
| | | guokongLayer.changeColor = function () { |
| | | |
| | | guokongLayer.clear(true); |
| | | |
| | | addResutToLayer(this, guokong_data_list); |
| | | |
| | | } |
| | | // add 国控点 |
| | | addGuokongPointToLayer(guokongLayer); |
| | | |
| | | } |
| | | |
| | | function addGuokongPointToLayer(tmplayer) { |
| | | |
| | | $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1001_list&datatype=" + mars3d.global_variables.queryDataType + "&datatime=" + mars3d.global_variables.queryDataTStart + "&qindex=pm25&pageno=1&pagesize=1000", (result) => { |
| | | |
| | | guokong_data_list = result.data.result; |
| | | |
| | | addResutToLayer(tmplayer, result.data.result); |
| | | |
| | | }); |
| | | |
| | | } |
| | | |
| | | function addResutToLayer(tmplayer, items) { |
| | | |
| | | for (var i = 0, len = items.length; i < len; i++) { |
| | | var item = items[i]; |
| | | var jd = item.lon; |
| | | var wd = item.lat; |
| | | var clr = getGuokongPointColor(tmplayer.options.style_selected, item[(tmplayer.options.style_selected).toUpperCase()]); |
| | | var graphic = new mars3d.graphic.DivLightPoint({ |
| | | position: Cesium.Cartesian3.fromDegrees(jd, wd), |
| | | style: { |
| | | color: clr, |
| | | heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, |
| | | highlight: { |
| | | type: "divLightPoint", |
| | | diffHeight: 600, |
| | | material: mars3d.MaterialUtil.createMaterialProperty(mars3d.MaterialType.CircleWave, { |
| | | color: clr, |
| | | count: 3, |
| | | speed: 20, |
| | | }), |
| | | }, |
| | | distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 200000), //按视距距离显示 |
| | | }, |
| | | show: true, |
| | | attr: item, |
| | | }); |
| | | tmplayer.addGraphic(graphic); |
| | | } |
| | | |
| | | |
| | | } |
| | | |
| | | |
| | | function getGuokongPointColor(qindex, value) { |
| | | |
| | | if (!value || value == null || value == 'null') { |
| | | return guokong_color_nodata; |
| | | } |
| | | for (var key in guokong_qindex_list) { |
| | | if (key == qindex) { |
| | | for (let i = guokong_qindex_list[key].length; i > -1; i--) { |
| | | if (value > guokong_qindex_list[key][i]) { |
| | | return guokong_color_list[i + 1]; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | |
| | | function getIndexByValue() { |
| | | |
| | | } |
| | | |
| | | 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, |
| | | name: item.name, |
| | | color: item.color, |
| | | frameRate: 20, //每秒刷新次数 |
| | | speedRate: 60, //风前进速率 |
| | | particlesNumber: 1000, |
| | | maxAge: 60, |
| | | lineWidth: 1, |
| | | reverseY: true |
| | | }); |
| | | 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为正,表示南风,从南边吹来的风。 |
| | | for (let i = 0, len = arr.length; i < len; i++) { |
| | | const item = arr[i]; |
| | | if (xmin > item.x) { |
| | | xmin = item.x; |
| | | } |
| | | if (xmax < item.x) { |
| | | xmax = item.x; |
| | | } |
| | | if (ymin > item.y) { |
| | | ymin = item.y; |
| | | } |
| | | 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, |
| | | ymax: ymax, |
| | | ymin: ymin, |
| | | rows: rows, |
| | | cols: cols, |
| | | udata: arrU, //横向风速 |
| | | 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) { |
| | | |
| | | var taxi_layer = new mars3d.layer.GraphicLayer({ |
| | | id: item.id, |
| | | name: item.name, |
| | | pid: item.pid, //图层管理 中使用,父节点id |
| | | center: { "lat": 30.62156, "lng": 121.44918, "alt": 48716, "heading": 359, "pitch": -40 }, |
| | | noCenter: true, |
| | | noCenter: true, |
| | | show: true, |
| | | onWidget: "widgetsTS/taxi_layer_setting/widget.js", |
| | | }); |
| | | map.addLayer(taxi_layer); |
| | | |
| | | taxi_layer.on(mars3d.EventType.click, function (event) { |
| | | console.log("监听layer,单击了矢量对象", event); |
| | | var item = event.graphic?.attr; |
| | | }); |
| | | taxi_layer.bindPopup(function (event) { |
| | | let item = event.graphic?.attr; |
| | | var html = |
| | | "<br/>类型: " + |
| | | item["code"].substring(0, 2) == "BS" ? "公交车" : "出租车" + |
| | | "<br />车辆编号: " + |
| | | item["code"] + |
| | | "<br/>数据时间: " + |
| | | item["datatime"] + |
| | | "<br />瞬时车速: " + |
| | | item["speed"] + " (km/h)" + |
| | | "<br />粉尘PM2.5: " + |
| | | item["pm25"] + " (ug/m3)" + |
| | | "<br />粉尘PM10: " + |
| | | item["pm10"] + " (ug/m3)" + |
| | | "<br />NO浓度: " + |
| | | item["no"] + " (ug/m3)" + |
| | | "<br />NO2浓度: " + |
| | | item["no2"] + " (ug/m3)" + |
| | | "<br />NO+NO2浓度: " + |
| | | item["nox"] + " (ug/m3)" + |
| | | "<br />CO浓度值: " + |
| | | item["co"] + " (mg/m3)" + |
| | | "<br /><br /><p><a href='#' onclick='javascript:showDetail(1001,\"" + item["code"] + "\")' ><span style='color:#ff00ff'>历史轨迹回放</span></a></p>"; |
| | | return html; |
| | | }); |
| | | |
| | | getTaxiListByUserId(taxi_layer); |
| | | } |
| | | |
| | | function getTaxiListByUserId(tmpLayer) { |
| | | |
| | | setTaxiLayerMapClock(); |
| | | $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_list_by_userid&userid=" + mars3d.global_variables.userid, (result) => { |
| | | taxi_data_list = result.data.result; |
| | | for (var i = 0, len = result.data.result.length; i < len; i++) { |
| | | let item = result.data.result[i]; |
| | | addTaxiPathToLayer(item, tmpLayer); |
| | | } |
| | | }); |
| | | |
| | | } |
| | | |
| | | function setTaxiLayerMapClock() { |
| | | map.clock.shouldAnimate = true; |
| | | map.clock.startTime = Cesium.JulianDate.fromDate(new Date(mars3d.global_variables.queryDataTStart)); |
| | | map.clock.currentTime = Cesium.JulianDate.fromDate(new Date(mars3d.global_variables.queryDataTStart)); |
| | | map.clock.stopTime = Cesium.JulianDate.fromDate(new Date(mars3d.global_variables.queryDataTEnd)); |
| | | map.clock.multiplier = 5.0; |
| | | map.clock.clockRange = Cesium.ClockRange.LOOP_STOP; |
| | | } |
| | | function addTaxiPathToLayer(item, target_layer) { |
| | | |
| | | |
| | | $.getJSON(mars3d.global_variables.nodejs_url_predix + "dataapi/Bdata?bid=get_1004_single_path&siteid=" + item["code"], { |
| | | datatime1: mars3d.global_variables.queryDataTStart, |
| | | datatime2: mars3d.global_variables.queryDataTEnd |
| | | }, (result) => { |
| | | |
| | | if (result.data.result.length > 0) { |
| | | var tmpPositionProperty = new Cesium.SampledPositionProperty(); |
| | | for (var i = 0, len = result.data.result.length; i < len; i++) { |
| | | let item = result.data.result[i]; |
| | | //console.log(item); |
| | | tmpPositionProperty.addSample(Cesium.JulianDate.fromDate(new Date(item["datatime"])), Cesium.Cartesian3.fromDegrees(item["lon"], item["lat"], 0.2)) |
| | | } |
| | | |
| | | let graphic = new mars3d.graphic.ModelEntity({ |
| | | attr: result.data.result[0], |
| | | style: { |
| | | url: "gltf/" + (item["code"]).substring(0, 2) + ".gltf", |
| | | scale: 0.5, |
| | | minimumPixelSize: 20, |
| | | highlight: { |
| | | type: mars3d.EventType.click, |
| | | silhouette: true, |
| | | silhouetteColor: "#ff0000", |
| | | silhouetteSize: 4, |
| | | }, |
| | | label: { |
| | | //不需要文字时,去掉label配置即可 |
| | | text: item["code"], |
| | | font_size: 16, |
| | | // TODO need to be changed according to qindex color. |
| | | color: "#ff00ff", |
| | | outline: true, |
| | | outlineColor: "#000000", |
| | | pixelOffsetY: -20, |
| | | distanceDisplayCondition: true, |
| | | distanceDisplayCondition_far: 50000, |
| | | distanceDisplayCondition_near: 0, |
| | | }, |
| | | }, |
| | | }); |
| | | graphic.position = tmpPositionProperty; |
| | | target_layer.addGraphic(graphic); |
| | | } |
| | | }); |
| | | |
| | | } |
| | | |
| | | |
| | | function reLoadLayers() { |
| | | |
| | | var layers = map.getLayers({ layers: true }); |
| | | |
| | | layers.forEach((layer) => { |
| | | console.log(layer.name + ":" + layer.type); |
| | | |
| | |
| | | |
| | | var tmpguokong = map.getLayerById(1001); |
| | | tmpguokong.clear(true); |
| | | addGuokongPointToLayer(tmpguokong); |
| | | getGuokongPointFromServer(tmpguokong); |
| | | //graphiclayer.eachGraphic |
| | | } else if ([layer.id] == 1004) { |
| | | var tmpTaxi = map.getLayerById(1004); |
| | |
| | | |
| | | } |
| | | |
| | | function addTDTAnnoLayer() { |
| | | |
| | | Img_annoTileLayer = new mars3d.layer.TdtLayer({ |
| | | name: "影像注记", |
| | | layer: "img_z", |
| | | key: mars3d.Token.tiandituArr, |
| | | }); |
| | | Img_annoTileLayer.show = false; |
| | | Img_annoTileLayer.pid = 50; |
| | | map.addLayer(Img_annoTileLayer); |
| | | |
| | | Vec_annoTileLayer = new mars3d.layer.TdtLayer({ |
| | | name: "矢量图注记", |
| | | layer: "vec_z", |
| | | key: mars3d.Token.tiandituArr, |
| | | }); |
| | | Vec_annoTileLayer.show = false; |
| | | Vec_annoTileLayer.pid = 50; |
| | | map.addLayer(Vec_annoTileLayer); |
| | | } |
| | | |
| | | function showDetail(layerid, itemCode) { |
| | | haoutil.msg('单击了:' + layerid + ',' + itemCode); |