// /* -------------------------------------------------------------------------------------------------------------------------- */
|
// import { requestSolidWaste } from '@/api/request'
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
// import '@components/BaseNav/style.css'
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
// // 展示图片
|
// import defaultImg from '@components/BaseNav/magicMarker.png'
|
// import Setting from '@components/BaseNav/voc.png'
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 底图业务展示点
|
// class AddSolidWasteHelper {
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
// constructor (options) {
|
// this.map = options.map
|
// this.L = window.L
|
// this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
|
// this.SolidWastePopup = null
|
// this.L.sgis = this.L.sgis || this.L
|
// this.solidWasteMarkersLabels = []
|
// this.pulseHeighLightMarker = null
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 请求数据 data 为参数， 请求后台数据时 携带data参数
|
// requestData () {
|
// requestSolidWaste().then(res => {
|
// // console.log(res)
|
// this.DrawTheSolidWasteContent(res.Result.DataInfo)
|
// }).catch(err => {
|
// console.log(err)
|
// })
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 根据获取数据 画出 内容
|
// DrawTheSolidWasteContent (data) {
|
// // 图标样式扩展
|
// var SolidWasteIcon = this.SolidWasteIcon()
|
//
|
// // //加载数据前如果存在图层组 那么清除掉
|
// if (this.SolidWasteLayerGroup) {
|
// this.SolidWasteLayerGroup.clearLayers()
|
// }
|
// for (let i = 0; i < data.length; i++) {
|
// // 经纬度 位置
|
// const positionX = data[i].positionX
|
// const positionY = data[i].positionY
|
//
|
// // 判断 经纬度位置信息是否存在
|
// if (positionX != null && positionY != null) {
|
// // 用于 判断 => 判断是否展示脉冲效果 => temp(临时)
|
// const determineValueOne = data[i].LongDayWarning
|
// var determineValueTwo = data[i].StorageQty
|
// const positionArea = [positionX, positionY]
|
//
|
// // 图标展示
|
// var iconUrl = this.SolidWasteIconUrl(determineValueOne, determineValueTwo, positionArea)
|
// var Icon = new SolidWasteIcon({ iconUrl: iconUrl })
|
// // var url = Icon.options.iconUrl
|
//
|
// // 弹出框div内容
|
// // var storevoinfo=null,storevodelinfo=[];
|
// // for(var j=0;j<storevo.length;j++){
|
// // if(itm.StoragePlaceId==storevo[j].StoragePlaceId){
|
// // storevoinfo=storevo[j];
|
// // }
|
// // }
|
// // for(var k=0;k<storedel.length;k++){
|
// // if(itm.StoragePlaceId==storedel[k].StoragePlaceId){
|
// // storevodelinfo.push(storedel[k]);
|
// // }
|
// // }
|
// const content = this.solidWastePpopupContent(data[i], 'c', 'z')
|
// // console.log(content)
|
//
|
// const marker = this.L.marker([positionX, positionY], { icon: Icon })
|
//
|
// marker.bindPopup(content, () => {
|
// return this.SolidWastePopup.$el
|
// }, {
|
// className: 's-map-popup',
|
// minWidth: 200,
|
// closeButton: true,
|
// autoClose: false
|
// })
|
// // // 划过出现 展示数据
|
// marker.bindTooltip(data[i].StoragePlaceName, {
|
// permanent: true,
|
// offset: [0, -16],
|
// direction: 'top',
|
// className: ''
|
// })
|
// // 点击 事件
|
// marker.on('click', (e) => {
|
// try {
|
// // console.log(e)
|
// // this.SolidWastePopup.SetDisplayContent(content)
|
// this.EffectOfPulse(e.target.getLatLng())
|
// } catch (error) {
|
// console.log(error)
|
// }
|
// })
|
// marker.on('popupopen', (e) => {
|
// try {
|
// this.solidWastePpopupContent(content)
|
// } catch (e) {
|
// console.log(e)
|
// }
|
// })
|
// // 设置内容添加到图层
|
// // this.solidWasteMarkersLabels.push(marker)
|
// this.SolidWasteLayerGroup.addLayer(marker)
|
// }
|
// }
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 固废点击进行的 内容的设置
|
// SetSolidWasteContent (config, containerPopup) {
|
// this.SolidWastePopup = containerPopup
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 图标样式扩展 => 光圈 图标脉冲
|
// SolidWasteIcon () {
|
// return this.L.Icon.extend({
|
// options: {
|
// iconSize: [40, 40],
|
// iconAnchor: [20, 20]
|
// }
|
// })
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 根据类型返回图片加载url
|
// SolidWasteIconUrl (determineValueOne, determineValueTwo, position) {
|
// var EffectOfChange
|
// if (determineValueOne === 1 || determineValueTwo === 1) {
|
// EffectOfChange = defaultImg
|
// this.EffectOfPulse(position, 'SolidWaste', this.solidWasteMarkersLabels, this.SolidWasteLayerGroup)
|
// } else {
|
// EffectOfChange = Setting
|
// }
|
// return EffectOfChange
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 脉冲效果设置实现
|
// EffectOfPulse (position, name, markers, layerGroup) {
|
// // // 区分直接执行 和判断执行的不同区别
|
// var differentColor = ''
|
// if (markers) {
|
// differentColor = '#ff0000' // 有内容 ，直接为报警 执行报警的内容
|
// } else {
|
// differentColor = '#98FB98' // 否则 为点击执行
|
// }
|
// // 坐标数据：报警传进来的是数组 / 点击传进来的是object
|
// var FinalPosition = position instanceof Array ? {
|
// lat: position[0],
|
// lng: position[1]
|
// } : position
|
// // 插件 效果实现
|
// var pulsingIcon = this.L.icon.pulse({
|
// iconSize: [25, 25],
|
// color: differentColor,
|
// fillColor: ' '
|
// })
|
// if (markers) {
|
// markers.push(this.L.marker(FinalPosition, { icon: pulsingIcon }))
|
// this.L.layerGroup(markers).addLayer(layerGroup)
|
// } else {
|
// var picGroupMarker = new this.L.FeatureGroup()
|
// this.L.marker(FinalPosition, { icon: pulsingIcon }).addTo(picGroupMarker)
|
// this.pulseHeighLightMarker = picGroupMarker.addTo(this.SolidWasteLayerGroup)
|
// this.PulseCountSetting()
|
// }
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 对图标脉冲 进行set设置 // 高亮图层
|
// PulseCountSetting () {
|
// var HeightLightTime = 1
|
// var PulseNumber = 5
|
// const pulseinterver = setInterval(() => {
|
// if (PulseNumber > 0) {
|
// PulseNumber--
|
// } else {
|
// this.pulseClear(pulseinterver)
|
// PulseNumber = HeightLightTime
|
// }
|
// }, 1000)
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 清除 图层
|
// pulseClear (pulseinterver) {
|
// clearInterval(pulseinterver)
|
// pulseinterver = null
|
//
|
// if (this.SolidWasteLayerGroup) {
|
// // this.SolidWasteLayerGroup.clearLayers()
|
// } else {
|
// this.SolidWasteLayerGroup = this.L.layerGroup().addTo(this.map)
|
// }
|
// if ((this.pulseHeighLightMarker)) {
|
// this.pulseHeighLightMarker.remove()
|
// }
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
//
|
// // 点击业务内容 弹出数据的数据进行修改
|
// solidWastePpopupContent (data) {
|
// console.log(data)
|
// const html = data.StoragePlaceName
|
// return html
|
// }
|
//
|
// /* -------------------------------------------------------------------------------------------------------------------------- */
|
// }
|
//
|
// export default AddSolidWasteHelper
|
|
// <template>
|
// <div class="full-screen">
|
// <div id="map" ref="rootmap"></div>
|
// <el-button type="primary" @click="ChangeState">固废</el-button>
|
// <SolidContent ref="SolidWastePopup" @callPopup="callPopup"></SolidContent>
|
// </div>
|
// </template>
|
//
|
// <script>
|
// import 'leaflet/dist/leaflet.css'
|
// import Sgis from '@/Sgis'
|
//
|
// // 底图业务js逻辑
|
// import AddSolidWasteHelper from '@components/BaseNav/SolidWaste'
|
//
|
// // 底图绑定 点击 弹出的数据
|
// import SolidContent from '@components/BaseNav/SolidContent'
|
//
|
// export default {
|
// name: 'HomePage',
|
// components: {
|
// SolidContent
|
// },
|
// data () {
|
// return {
|
// map: null,
|
// lcServiceLayerVisible: false,
|
// basemapHelper: {},
|
// serviceLayerHelper: {},
|
// vectorLayerHelper: {}
|
// }
|
// },
|
// computed: {
|
// config () {
|
// return this.$store.state.map.config
|
// },
|
// SolidWasteConfig () {
|
// return this.$store.state.map.SolidWasteConfig
|
// }
|
// },
|
// beforeMount () {
|
// this.$nextTick(() => {
|
// this.init()
|
// })
|
// },
|
// methods: {
|
// init () {
|
// const mapcontainer = this.$refs.rootmap
|
// this.map = Sgis.initMap(mapcontainer)
|
//
|
// this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 初始化基础底图助手
|
// this.basemapHelper.initBasemap(this.config, false) // 第二个参数，表示是否内网底图
|
//
|
// this.ChangeState()
|
// },
|
// ChangeState () {
|
// // 请求数据 携带参数 data
|
// // const data = {
|
// // // companyId: 3900100145,
|
// // // companyCode: 31800000,
|
// // // monDuration: 4
|
// // }
|
// // 引入业务逻辑 js
|
// const AddSolidWaste = new AddSolidWasteHelper({ map: this.map })
|
// // 业务逻辑js 的请求数据 // 并且传递图片 用于创建点的 icon
|
// AddSolidWaste.requestData()
|
// // // 点击 设置 弹出内容事件 de 设置 console.log(this.$refs.popup.$el)
|
// // AddSolidWaste.SetSolidWasteContent(this.SolidWasteConfig, this.$refs.SolidWastePopup)
|
// },
|
// callPopup (val) {
|
// console.log(val)
|
// },
|
// displayDefault () {
|
// // this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 初始化业务底图助手
|
// // this.serviceLayerHelper.initServiceLayers(this.config, this.$refs.popup)
|
//
|
// // this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 初始化动态要素图层助手
|
// // this.vectorLayerHelper.initVectorLayers(this.config)
|
// }
|
// }
|
// }
|
// </script>
|
//
|
// <style lang="less">
|
//
|
// .leaflet-div-icon {
|
// background: none;
|
// border: none;
|
// }
|
//
|
// .full-screen {
|
// width: 100%;
|
// height: 100%;
|
// margin: 0;
|
// padding: 0;
|
// position: absolute;
|
//
|
// button {
|
// position: absolute;
|
// top: 88px;
|
// left: 88px;
|
// z-index: 999;
|
// }
|
//
|
// #map {
|
// height: 100%;
|
// width: 100%;
|
// }
|
//
|
// .barline {
|
// //width: 100%;
|
// //height: 1px;
|
// //background-color: #0661AE;
|
// border-top: 1px solid #0661AE;
|
// }
|
//
|
// #map-btn {
|
// position: fixed;
|
// top: 20px;
|
// left: 100px;
|
// z-index: 9999;
|
// }
|
//
|
// .leaflet-custom-icon {
|
// background: white;
|
// }
|
// }
|
// </style>
|
