| | |
| | | > |
| | | <div style="width: 274px; margin: 13px auto"> |
| | | <el-date-picker |
| | | ref="datePick" |
| | | v-model="datenum" |
| | | :picker-options="pickerOptions" |
| | | placeholder="选择日期" |
| | | popper-class="jlpMySelectPopper" |
| | | ref="datePick" |
| | | v-model="datenum" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 280px" |
| | | @change="chooseDate" |
| | | @blur="chooseDate1" |
| | | @focus="chooseDate2" |
| | | value-format="yyyy-MM-dd" |
| | | style="width: 280px" |
| | | > |
| | | </el-date-picker> |
| | | /> |
| | | </div> |
| | | <!-- <el-card class="box-card" style="width: 274px; margin: 13px auto"> --> |
| | | |
| | |
| | | > |
| | | <!--accordion 手风琴模式--> |
| | | <el-collapse |
| | | accordion |
| | | style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" |
| | | v-show="shou1 === true" |
| | | v-loading="loading" |
| | | accordion |
| | | style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" |
| | | > |
| | | <el-collapse-item |
| | | style="text-indent: 2em; position: relative; padding-botton: 10px" |
| | |
| | | <img |
| | | style="position: absolute; left: 18px" |
| | | src="../../assets/images/uav/uav.png" |
| | | /> |
| | | > |
| | | <span |
| | | style="display: inline-block; position: absolute; left: 20px" |
| | | > |
| | | 该日期暂无无人机数据</span |
| | | > |
| | | 该日期暂无无人机数据</span> |
| | | </template> |
| | | </el-collapse-item> |
| | | </el-collapse> |
| | | <el-collapse |
| | | v-show="shou1 === false" |
| | | ref="collapse" |
| | | v-model="asideData.activeNames" |
| | | v-loading="loading" |
| | | accordion |
| | | style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)" |
| | | @change="handleChange" |
| | | ref="collapse" |
| | | v-show="shou1 === false" |
| | | v-loading="loading" |
| | | > |
| | | <el-collapse-item |
| | | v-for="(item1, index) in asideData.uavTimeFly" |
| | |
| | | <img |
| | | style="position: absolute; left: 18px" |
| | | src="../../assets/images/uav/uav.png" |
| | | /> |
| | | > |
| | | <span |
| | | style="display: inline-block; position: absolute; left: 20px" |
| | | > |
| | | {{ item1.name }}</span |
| | | > |
| | | {{ item1.name }}</span> |
| | | </template> |
| | | <el-scrollbar style="height: 200px; overflow-x: hidden"> |
| | | <div |
| | |
| | | > |
| | | <div class="numss"> |
| | | <el-radio-group |
| | | v-if="selecttrue === 1" |
| | | v-model="radioSeven" |
| | | size="medium" |
| | | @change="changeCode" |
| | | v-if="selecttrue === 1" |
| | | style="margin-top: 10px; margin-left: 10px" |
| | | @change="changeCode" |
| | | > |
| | | <el-radio-button label="PM2.5"></el-radio-button> |
| | | <el-radio-button label="PM10"></el-radio-button> |
| | | <el-radio-button label="SO2"></el-radio-button> |
| | | <el-radio-button label="NO2"></el-radio-button> |
| | | <el-radio-button label="CO"></el-radio-button> |
| | | <el-radio-button label="03"></el-radio-button> |
| | | <el-radio-button label="TVOC"></el-radio-button> |
| | | <el-radio-button label="PM2.5" /> |
| | | <el-radio-button label="PM10" /> |
| | | <el-radio-button label="SO2" /> |
| | | <el-radio-button label="NO2" /> |
| | | <el-radio-button label="CO" /> |
| | | <el-radio-button label="03" /> |
| | | <el-radio-button label="TVOC" /> |
| | | </el-radio-group> |
| | | <div class="Duo" v-if="selecttrue === 2"> |
| | | <div v-if="selecttrue === 2" class="Duo"> |
| | | <div class="spantuu"> |
| | | <span>无人机飞行高度范围(米): </span> |
| | | <el-input |
| | | class="inputtu" |
| | | v-model="tallone" |
| | | ref="uvas" |
| | | ></el-input> |
| | | v-model="tallone" |
| | | class="inputtu" |
| | | /> |
| | | -- |
| | | <el-input |
| | | class="inputtu" |
| | | v-model="talltwo" |
| | | ref="uvas" |
| | | ></el-input> |
| | | v-model="talltwo" |
| | | class="inputtu" |
| | | /> |
| | | </div> |
| | | <!-- <el-select v-model="Duovalue" placeholder="其他因子" class="slee"> |
| | | <el-option |
| | |
| | | </el-option> |
| | | </el-select> --> |
| | | <div class="spantu"> |
| | | <span>图形边长(米): </span |
| | | ><el-input |
| | | class="inputtu" |
| | | <span>图形边长(米): </span><el-input |
| | | ref="uvas" |
| | | v-model="uvasize" |
| | | class="inputtu" |
| | | clearable |
| | | placeholder="请输入内容" |
| | | ref="uvas" |
| | | ></el-input> |
| | | /> |
| | | </div> |
| | | <el-select v-model="Duovalue" placeholder="其他因子" class="slee"> |
| | | <el-option |
| | |
| | | :key="item.code" |
| | | :label="item.name" |
| | | :value="item.name" |
| | | > |
| | | </el-option> |
| | | /> |
| | | </el-select> |
| | | <!-- <div class="spantuu"> |
| | | <span>无人机飞行高度范围(米): </span> |
| | |
| | | </div> --> |
| | | </div> |
| | | <div v-if="selecttrue === 1" style="margin-left: 10px"> |
| | | <el-button type="primary" @click="gengD" style="margin-top: 10px" |
| | | >更多条件</el-button |
| | | > |
| | | <el-button |
| | | type="primary" |
| | | style="margin-top: 10px" |
| | | @click="gengD" |
| | | >更多条件</el-button> |
| | | </div> |
| | | <div |
| | | v-if="selecttrue === 2" |
| | |
| | | type="primary" |
| | | icon="el-icon-setting" |
| | | @click="dialogFormVisible = true" |
| | | >6参设定</el-button |
| | | > |
| | | >6参设定</el-button> |
| | | <el-button class="gengD" @click="shou">收起</el-button> |
| | | <el-button type="primary" @click="selectDuo">查询</el-button> |
| | | </div> |
| | |
| | | label="PM2.5 | ug/m³" |
| | | label-class-name="my-label" |
| | | content-class-name="my-content" |
| | | >22</el-descriptions-item |
| | | > |
| | | >22</el-descriptions-item> |
| | | <el-descriptions-item label="PM10 | ug/m³">34</el-descriptions-item> |
| | | <el-descriptions-item label="SO2 | ug/m³">4</el-descriptions-item> |
| | | <el-descriptions-item label="NO2 | ug/m³">16</el-descriptions-item> |
| | |
| | | var GPS = { |
| | | PI: 3.14159265358979324, |
| | | x_pi: (3.14159265358979324 * 3000.0) / 180.0, |
| | | delta: function (lat, lon) { |
| | | delta: function(lat, lon) { |
| | | var a = 6378245.0 // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。 |
| | | var ee = 0.00669342162296594323 // ee: 椭球的偏心率。 |
| | | var dLat = this.transformLat(lon - 105.0, lat - 35.0) |
| | |
| | | }, |
| | | |
| | | // WGS-84 to GCJ-02 |
| | | gcj_encrypt: function (wgsLat, wgsLon) { |
| | | gcj_encrypt: function(wgsLat, wgsLon) { |
| | | if (this.outOfChina(wgsLat, wgsLon)) { |
| | | return { lat: wgsLat, lon: wgsLon } |
| | | } |
| | |
| | | return { lat: wgsLat + d.lat, lon: wgsLon + d.lon } |
| | | }, |
| | | // GCJ-02 to WGS-84 |
| | | gcj_decrypt: function (gcjLat, gcjLon) { |
| | | gcj_decrypt: function(gcjLat, gcjLon) { |
| | | if (this.outOfChina(gcjLat, gcjLon)) { |
| | | return { lat: gcjLat, lon: gcjLon } |
| | | } |
| | |
| | | return { lat: gcjLat - d.lat, lon: gcjLon - d.lon } |
| | | }, |
| | | // GCJ-02 to WGS-84 exactly |
| | | gcj_decrypt_exact: function (gcjLat, gcjLon) { |
| | | gcj_decrypt_exact: function(gcjLat, gcjLon) { |
| | | var initDelta = 0.01 |
| | | var threshold = 0.000000001 |
| | | var dLat = initDelta |
| | |
| | | return { lat: wgsLat, lon: wgsLon } |
| | | }, |
| | | // GCJ-02 to BD-09 |
| | | bd_encrypt: function (gcjLat, gcjLon) { |
| | | bd_encrypt: function(gcjLat, gcjLon) { |
| | | var x = gcjLon |
| | | var y = gcjLat |
| | | var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi) |
| | |
| | | return { lat: this.bdLat, lon: this.bdLon } |
| | | }, |
| | | // BD-09 to GCJ-02 |
| | | bd_decrypt: function (bdLat, bdLon) { |
| | | bd_decrypt: function(bdLat, bdLon) { |
| | | var x = bdLon - 0.0065 |
| | | var y = bdLat - 0.006 |
| | | var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi) |
| | |
| | | }, |
| | | // WGS-84 to Web mercator |
| | | // mercatorLat -> y mercatorLon -> x |
| | | mercator_encrypt: function (wgsLat, wgsLon) { |
| | | mercator_encrypt: function(wgsLat, wgsLon) { |
| | | var x = (wgsLon * 20037508.34) / 180.0 |
| | | var y = |
| | | Math.log(Math.tan(((90.0 + wgsLat) * this.PI) / 360.0)) / |
| | |
| | | }, |
| | | // Web mercator to WGS-84 |
| | | // mercatorLat -> y mercatorLon -> x |
| | | mercator_decrypt: function (mercatorLat, mercatorLon) { |
| | | mercator_decrypt: function(mercatorLat, mercatorLon) { |
| | | var x = (mercatorLon / 20037508.34) * 180.0 |
| | | var y = (mercatorLat / 20037508.34) * 180.0 |
| | | y = |
| | |
| | | return { lat: y, lon: x } |
| | | }, |
| | | // two point's distance |
| | | distance: function (latA, lonA, latB, lonB) { |
| | | distance: function(latA, lonA, latB, lonB) { |
| | | var earthR = 6371000.0 |
| | | var x = |
| | | Math.cos((latA * this.PI) / 180.0) * |
| | |
| | | var distance = alpha * earthR |
| | | return distance |
| | | }, |
| | | outOfChina: function (lat, lon) { |
| | | outOfChina: function(lat, lon) { |
| | | if (lon < 72.004 || lon > 137.8347) { |
| | | return true |
| | | } |
| | |
| | | } |
| | | return false |
| | | }, |
| | | transformLat: function (x, y) { |
| | | transformLat: function(x, y) { |
| | | var ret = |
| | | -100.0 + |
| | | 2.0 * x + |
| | |
| | | 3.0 |
| | | return ret |
| | | }, |
| | | transformLon: function (x, y) { |
| | | transformLon: function(x, y) { |
| | | var ret = |
| | | 300.0 + |
| | | x + |
| | |
| | | 2.0) / |
| | | 3.0 |
| | | return ret |
| | | }, |
| | | } |
| | | } |
| | | export default { |
| | | filters: { |
| | | sensorFilter: function (value) { |
| | | sensorFilter: function(value) { |
| | | if (!value) return '' |
| | | return json[value] |
| | | }, |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | selecttrue: 1, |
| | | pickerOptions: { |
| | | cellClassName: (time) => { |
| | | let timeDate = moment(time.getTime()).format('yyyy-MM-DD') |
| | | const timeDate = moment(time.getTime()).format('yyyy-MM-DD') |
| | | if (this.timeNums.includes(timeDate)) { |
| | | return 'dateArrClass' // 返回值设置的是我们添加的类名 |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | |
| | | tallone: 0, |
| | |
| | | activeNames: [0], |
| | | uavTimeFly: [], // 存放无人机信息以及飞行时间区间 |
| | | activeKey: -1, |
| | | activeAreaKey: 0, |
| | | activeAreaKey: 0 |
| | | }, |
| | | load: 1, |
| | | value: [], |
| | |
| | | { code: 'a21004', name: 'NO2' }, |
| | | { code: 'a21005', name: 'CO' }, |
| | | { code: 'a05024', name: 'O3' }, |
| | | { code: 'a99054', name: 'TVOC' }, |
| | | { code: 'a99054', name: 'TVOC' } |
| | | ], |
| | | valuetime: '2023-01-01', |
| | | defautRadio: { code: 'a34004', name: 'PM2.5' }, |
| | |
| | | 'CO', |
| | | 'O3', |
| | | 'TVOC', |
| | | '尘负荷', |
| | | '尘负荷' |
| | | ], |
| | | changeColor: 0, |
| | | changeColor1: 0, |
| | |
| | | } else { |
| | | return time.getTime() > new Date() |
| | | } |
| | | }, |
| | | } |
| | | }, |
| | | sensorDate: null, |
| | | noneData: true, |
| | |
| | | { code: 'a99054', name: 'TVOC' }, |
| | | { |
| | | code: 'a01006', |
| | | name: '气压', |
| | | name: '气压' |
| | | }, |
| | | { |
| | | code: 'a01001', |
| | | name: '温度', |
| | | name: '温度' |
| | | }, |
| | | { |
| | | code: 'a01002', |
| | | name: '湿度', |
| | | }, |
| | | name: '湿度' |
| | | } |
| | | ], |
| | | sensorTableData: [ |
| | | { |
| | |
| | | tab3: '115', |
| | | tab4: '150', |
| | | tab5: '250', |
| | | tab6: '350', |
| | | tab6: '350' |
| | | }, |
| | | { |
| | | sensorName: 'PM10', |
| | |
| | | tab3: '250', |
| | | tab4: '350', |
| | | tab5: '420', |
| | | tab6: '500', |
| | | tab6: '500' |
| | | }, |
| | | { |
| | | sensorName: 'SO2', |
| | |
| | | tab3: '475', |
| | | tab4: '800', |
| | | tab5: '1600', |
| | | tab6: '2100', |
| | | tab6: '2100' |
| | | }, |
| | | { |
| | | sensorName: 'NO2', |
| | |
| | | tab3: '180', |
| | | tab4: '280', |
| | | tab5: '565', |
| | | tab6: '750', |
| | | tab6: '750' |
| | | }, |
| | | { |
| | | sensorName: 'CO', |
| | |
| | | tab3: '14', |
| | | tab4: '24', |
| | | tab5: '36', |
| | | tab6: '48', |
| | | tab6: '48' |
| | | }, |
| | | { |
| | | sensorName: 'O3', |
| | |
| | | tab3: '300', |
| | | tab4: '400', |
| | | tab5: '800', |
| | | tab6: '1000', |
| | | tab6: '1000' |
| | | }, |
| | | { |
| | | sensorName: 'TVOC', |
| | |
| | | tab3: '0.5', |
| | | tab4: '0.7', |
| | | tab5: '0.9', |
| | | tab6: '1', |
| | | tab6: '1' |
| | | }, |
| | | { |
| | | sensorName: '尘负荷', |
| | |
| | | tab3: '1000', |
| | | tab4: '10000', |
| | | tab5: '20000', |
| | | tab6: '50000', |
| | | tab6: '50000' |
| | | }, |
| | | |
| | | { |
| | | sensorName: '气压', |
| | | unit: 'hpa', |
| | | unit: 'hpa' |
| | | }, |
| | | { |
| | | sensorName: '湿度', |
| | | unit: '%', |
| | | unit: '%' |
| | | }, |
| | | { |
| | | sensorName: '温度', |
| | | unit: '℃', |
| | | }, |
| | | unit: '℃' |
| | | } |
| | | ], |
| | | carWs: null, |
| | | map: null, |
| | |
| | | dataTypeList: [ |
| | | { |
| | | value: 'history', |
| | | label: '历史数据', |
| | | label: '历史数据' |
| | | }, |
| | | { |
| | | value: 'webSocket', |
| | | label: '实时数据', |
| | | }, |
| | | label: '实时数据' |
| | | } |
| | | ], |
| | | dataTypeValue: 'history', |
| | | historyView: true, |
| | |
| | | uvasize: 20, |
| | | timeValue: [ |
| | | new Date(2020, 1, 1, 0, 0, 0), |
| | | new Date(2022, 12, 31, 23, 59, 59), |
| | | new Date(2022, 12, 31, 23, 59, 59) |
| | | ], |
| | | timeNums: [], |
| | | batchs: '', |
| | |
| | | tab3: '115', |
| | | tab4: '150', |
| | | tab5: '250', |
| | | tab6: '350', |
| | | tab6: '350' |
| | | }, |
| | | { |
| | | sensorName: 'PM10', |
| | |
| | | tab3: '250', |
| | | tab4: '350', |
| | | tab5: '420', |
| | | tab6: '500', |
| | | tab6: '500' |
| | | }, |
| | | { |
| | | sensorName: 'SO2', |
| | |
| | | tab3: '650', |
| | | tab4: '800', |
| | | tab5: '', |
| | | tab6: '', |
| | | tab6: '' |
| | | }, |
| | | { |
| | | sensorName: 'NO2', |
| | |
| | | tab3: '700', |
| | | tab4: '1200', |
| | | tab5: '2340', |
| | | tab6: '3090', |
| | | tab6: '3090' |
| | | }, |
| | | { |
| | | sensorName: 'CO', |
| | |
| | | tab3: '35', |
| | | tab4: '60', |
| | | tab5: '90', |
| | | tab6: '120', |
| | | tab6: '120' |
| | | }, |
| | | { |
| | | sensorName: 'O3', |
| | |
| | | tab3: '300', |
| | | tab4: '400', |
| | | tab5: '800', |
| | | tab6: '1000', |
| | | tab6: '1000' |
| | | }, |
| | | { |
| | | sensorName: 'TVOC', |
| | |
| | | tab3: '0.5', |
| | | tab4: '0.7', |
| | | tab5: '0.9', |
| | | tab6: '1', |
| | | tab6: '1' |
| | | }, |
| | | { |
| | | sensorName: '尘负荷', |
| | |
| | | tab3: '1000', |
| | | tab4: '10000', |
| | | tab5: '20000', |
| | | tab6: '50000', |
| | | }, |
| | | ], |
| | | tab6: '50000' |
| | | } |
| | | ] |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | this.initStart() |
| | | // this.$refs.datePick.focus() |
| | | // this.getDate() |
| | | // this.flyData() |
| | | }, |
| | | watch: { |
| | | dataTypeValue(n, o) { |
| | |
| | | // console.log(n) |
| | | }, |
| | | deep: true, |
| | | immediate: true, |
| | | immediate: true |
| | | }, |
| | | |
| | | mounted() { |
| | | this.initStart() |
| | | // this.$refs.datePick.focus() |
| | | // this.getDate() |
| | | // this.flyData() |
| | | }, |
| | | created() { |
| | | this.newTime(this.timeValue) |
| | |
| | | uvasize: this.uvasize, |
| | | mac: this.macs, |
| | | height1: this.tallone, |
| | | height2: this.talltwo, |
| | | height2: this.talltwo |
| | | // batch: '2023-06-16 16:21:21', |
| | | }, |
| | | } |
| | | }).then((res) => { |
| | | // console.log(res) |
| | | this.carData = [] |
| | |
| | | h: date.getHours(), |
| | | i: date.getMinutes(), |
| | | s: date.getSeconds(), |
| | | a: date.getDay(), |
| | | a: date.getDay() |
| | | } |
| | | const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => { |
| | | const value = formatObj[key] |
| | |
| | | method: 'get', |
| | | params: { |
| | | organizationId: this.$store.state.orgId, |
| | | date: item, |
| | | }, |
| | | date: item |
| | | } |
| | | }).then((res) => { |
| | | // console.log(res, 'res.data.vos') |
| | | if (res.code === -47) { |
| | |
| | | uvasize: this.uvasize, |
| | | height1: this.tallone, |
| | | height2: this.talltwo, |
| | | mac: mac, |
| | | mac: mac |
| | | // batch: '2023-06-16 16:21:21', |
| | | }, |
| | | } |
| | | }).then((res) => { |
| | | // console.log(res) |
| | | this.carData = [] |
| | |
| | | url: '/uav/queryDate', |
| | | method: 'get', |
| | | params: { |
| | | organizationId: this.$store.state.orgId, |
| | | }, |
| | | organizationId: this.$store.state.orgId |
| | | } |
| | | }).then((res) => { |
| | | this.asideData.dates = JSON.parse(JSON.stringify(res.data.datesStr)) |
| | | this.timeNums = this.asideData.dates |
| | |
| | | const that = this |
| | | if (!res) { |
| | | that.map = new BMapGL.Map('map_container') |
| | | console.log('BMap', BMap) |
| | | console.log('BMapGL', BMapGL) |
| | | console.log('window', window.BMapGL) |
| | | that.map.enableScrollWheelZoom(true) // 开启鼠标滚轮,地图可以进行放大、缩小s |
| | | that.map.setMapType(BMAP_EARTH_MAP) // 设置地图类型为地球模式 |
| | | that.map.setDisplayOptions({ |
| | | street: false, // 是否显示路网(只对卫星图和地球模式有效) |
| | | street: false // 是否显示路网(只对卫星图和地球模式有效) |
| | | }) |
| | | that.map.setHeading(0) // 设置旋转角度 |
| | | if (that.viewKey === '2D') { |
| | |
| | | elementType: 'all', |
| | | stylers: { |
| | | color: '#ffffff', |
| | | visibility: 'off', |
| | | }, |
| | | visibility: 'off' |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'building', |
| | | elementType: 'all', |
| | | stylers: { |
| | | visibility: 'off', |
| | | }, |
| | | visibility: 'off' |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'poilabel', |
| | | elementType: 'all', |
| | | stylers: { |
| | | visibility: 'off', |
| | | }, |
| | | visibility: 'off' |
| | | } |
| | | }, |
| | | { |
| | | featureType: 'manmade', |
| | | elementType: 'all', |
| | | stylers: { |
| | | visibility: 'off', |
| | | }, |
| | | }, |
| | | ], |
| | | visibility: 'off' |
| | | } |
| | | } |
| | | ] |
| | | }) |
| | | showNoPoints() |
| | | this.loading1 = false |
| | |
| | | if (that.firstPlayFlag) { |
| | | that.map.centerAndZoom(that.centerPoint, that.mapZoom) |
| | | that.view = new mapvgl.View({ |
| | | map: that.map, |
| | | map: that.map |
| | | }) |
| | | that.firstPlayFlag = false |
| | | that.loading1 = false |
| | |
| | | this.map.clearOverlays() |
| | | that.map.centerAndZoom(that.centerPoint, that.mapZoom) |
| | | that.view = new mapvgl.View({ |
| | | map: that.map, |
| | | map: that.map |
| | | }) |
| | | that.loading1 = false |
| | | |
| | |
| | | // drawStartAndEnd() // 起点和终点标注 |
| | | function draw(sensor, type, carMac) { |
| | | var levels = getGrading(sensor, type, carMac) |
| | | $.each(levels, function (index, value) { |
| | | $.each(levels, function(index, value) { |
| | | var color = value.color |
| | | var data = value.data |
| | | if (data.length > 0) { |
| | |
| | | selectedIndex: -1, // 选中项 |
| | | selectedColor: '#ee1111', // 选中项颜色 |
| | | autoSelect: true, // 根据鼠标位置来自动设置选中项 |
| | | riseTime: 1800, // 楼块初始化升起时间 |
| | | riseTime: 1800 // 楼块初始化升起时间 |
| | | }) |
| | | that.shapeLayer.setData(data) |
| | | that.view.addLayer(that.shapeLayer) |
| | |
| | | }) |
| | | that.map.setDefaultCursor('default') |
| | | if (type === '2D') { |
| | | $.each(that.showPoints, function (item, point) { |
| | | $.each(that.showPoints, function(item, point) { |
| | | setLabelStyle(point[sensor], point) |
| | | }) |
| | | } |
| | |
| | | |
| | | // 画方块,上色,添加文字 |
| | | function drawPolygon(sensor) { |
| | | $.each(that.showPoints, function (item, point) { |
| | | $.each(that.showPoints, function(item, point) { |
| | | var sw = getPoint(225, point.lng, point.lat, that.distance) |
| | | var ne = getPoint(45, point.lng, point.lat, that.distance) |
| | | var data = point[sensor] |
| | |
| | | new BMapGL.Point(sw.lng, sw.lat), // 左下角 |
| | | new BMapGL.Point(ne.lng, sw.lat), // 左上角 |
| | | new BMapGL.Point(ne.lng, ne.lat), // 右上角 |
| | | new BMapGL.Point(sw.lng, ne.lat), // 右下角 |
| | | new BMapGL.Point(sw.lng, ne.lat) // 右下角 |
| | | ], |
| | | { |
| | | strokeWeight: 0.1, //边框线的宽度,以像素为单位 |
| | | strokeWeight: 0.1, // 边框线的宽度,以像素为单位 |
| | | // strokeOpacity: 0.0, //边线的透明度 |
| | | fillColor: color, //是否需要填充色 |
| | | fillOpacity: 0.8, //填充色的透明度,0~1之间 |
| | | strokeColor: 'black', //边框线的颜色 |
| | | strokeStyle: 'solid', //边线的样式,solid或dashed。 |
| | | fillColor: color, // 是否需要填充色 |
| | | fillOpacity: 0.8, // 填充色的透明度,0~1之间 |
| | | strokeColor: 'black', // 边框线的颜色 |
| | | strokeStyle: 'solid' // 边线的样式,solid或dashed。 |
| | | } |
| | | ) |
| | | that.map.addOverlay(polygon) |
| | |
| | | ) |
| | | var startMark = new BMapGL.Marker(that.showPoints[0], { |
| | | icon: startIcon, |
| | | offset: new BMapGL.Size(0, -20), |
| | | offset: new BMapGL.Size(0, -20) |
| | | }) |
| | | that.map.addOverlay(startMark) |
| | | var endIcon = new BMapGL.Icon( |
| | |
| | | that.showPoints[that.showPoints.length - 1], |
| | | { |
| | | icon: endIcon, |
| | | offset: new BMapGL.Size(0, -20), |
| | | offset: new BMapGL.Size(0, -20) |
| | | } |
| | | ) |
| | | that.map.addOverlay(endMark) |
| | |
| | | function drawLine() { |
| | | var data = [] |
| | | var points = [] |
| | | $.each(trackPoints, function (index, value) { |
| | | $.each(trackPoints, function(index, value) { |
| | | var point = [] |
| | | point.push(value['lng'], value['lat']) |
| | | points.push(point) |
| | |
| | | data.push({ |
| | | geometry: { |
| | | type: '"LineString"', |
| | | coordinates: [points], |
| | | }, |
| | | coordinates: [points] |
| | | } |
| | | }) |
| | | var lineLayer = new mapvgl.LineLayer({ |
| | | color: 'red', |
| | |
| | | animation: true, |
| | | duration: 10, // 循环时间2s |
| | | trailLength: 0.1, // 拖尾长度占间隔的0.4 |
| | | interval: 0.3, // 粒子长度占线整体长度的0.2 |
| | | interval: 0.3 // 粒子长度占线整体长度的0.2 |
| | | }) |
| | | that.view.addLayer(lineLayer) |
| | | lineLayer.setData(data) |
| | |
| | | level5.color = '#99004c' |
| | | level6.color = '#7e0023' |
| | | |
| | | $.each(that.showPoints, function (index, value) { |
| | | $.each(that.showPoints, function(index, value) { |
| | | var sw = getPoint(225, value.lng, value.lat, that.distance) |
| | | var ne = getPoint(45, value.lng, value.lat, 30) |
| | | var polygon = [] |
| | |
| | | data0.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 1: |
| | | data1.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 2: |
| | | data2.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 3: |
| | | data3.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 4: |
| | | data4.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 5: |
| | | data5.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | case 6: |
| | | data6.push({ |
| | | geometry: { |
| | | type: 'Polygon', |
| | | coordinates: [polygon], |
| | | coordinates: [polygon] |
| | | }, |
| | | properties: { |
| | | height: height, |
| | | }, |
| | | height: height |
| | | } |
| | | }) |
| | | break |
| | | } |
| | |
| | | "<span class='my-maptip'>" + content + '<br /><span>', // 为lable填写内容 |
| | | { |
| | | offset: new BMapGL.Size(-8, -10), // label的偏移量,为了让label的中心显示在点上 |
| | | position: point, |
| | | position: point |
| | | } // label的位置 |
| | | ) |
| | | var offsetSize = new BMapGL.Size(0, 0) |
| | |
| | | lineHeight: '20px', |
| | | fontFamily: '微软雅黑', |
| | | backgroundColor: '0.05', |
| | | fontWeight: 'bold', |
| | | fontWeight: 'bold' |
| | | } |
| | | label.setStyle(labelStyle) |
| | | that.map.addOverlay(label) |
| | |
| | | // 无数据时,缩放至该中心 |
| | | function showNoPoints() { |
| | | that.map.centerAndZoom('苏州市', 17) |
| | | setTimeout(function () { |
| | | setTimeout(function() { |
| | | document.getElementById('cpm').style.display = 'block' |
| | | document.getElementById('data').style.display = 'none' |
| | | }, 250) |
| | | } |
| | | |
| | | // 地图缩放级别监控 |
| | | that.map.addEventListener('zoomend', function () { |
| | | that.map.addEventListener('zoomend', function() { |
| | | // 这里根据缩放显示和隐藏文本 |
| | | var zoom = that.map.getZoom() |
| | | $('span.my-maptip').parent()[zoom <= 15.5 ? 'hide' : 'show']() |
| | |
| | | break |
| | | } |
| | | this.initStart(this.carData) |
| | | }, |
| | | }, |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | |
| | | .el-scrollbar__wrap { |
| | | overflow-x: hidden; |
| | | } |
| | | </style> |
| | | </style> |