From 468e07894ce1d60aaeec91440504a48a41d20410 Mon Sep 17 00:00:00 2001 From: 陈泽平 <chenzeping> Date: 星期四, 27 五月 2021 09:30:00 +0800 Subject: [PATCH] Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop --- src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue | 76 +++++ src/main.js | 1 src/components/base-page/enterprise-emergency/EffectiveVolumeCalc.vue | 240 ++++++++++++++++++ src/components/base-page/enterprise-emergency/event-handling/EventBaseInfo.vue | 29 ++ src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue | 54 ++++ src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue | 15 + src/components/plugin/leaflet-echart.js | 312 ++++++++++++++++++++++++ src/Sgis.js | 2 src/components/base-page/enterprise-emergency/DisposalEvent.vue | 8 9 files changed, 731 insertions(+), 6 deletions(-) diff --git a/src/Sgis.js b/src/Sgis.js index a3e10a0..6e9dd2b 100644 --- a/src/Sgis.js +++ b/src/Sgis.js @@ -16,6 +16,8 @@ import '@components/plugin/pulse/Pulse.css' // marker 澶栧湀娉� css import BasemapHelper from './components/helpers/BasemapHelper' import VectorLayerHelper from './components/helpers/VectorLayerHelper' + +import '@/components/plugin/leaflet-echart' // import '@/components/plugin/flowline' // import eventBus from './eventBus' diff --git a/src/components/base-page/enterprise-emergency/DisposalEvent.vue b/src/components/base-page/enterprise-emergency/DisposalEvent.vue index 0987e2b..5e6358c 100644 --- a/src/components/base-page/enterprise-emergency/DisposalEvent.vue +++ b/src/components/base-page/enterprise-emergency/DisposalEvent.vue @@ -34,9 +34,9 @@ </el-form-item> <el-form-item label="闄勪欢锛�" prop="upload"> <label> - <a href="javascript:;">闄勪欢</a> + <a href="javascript:">闄勪欢</a> - <a href="javascript:;">闄勪欢</a> + <a href="javascript:">闄勪欢</a> </label> </el-form-item> </el-form> @@ -48,12 +48,12 @@ <el-table-column prop="classification" label="棰勬鍒嗙被"></el-table-column> <el-table-column label="闄勪欢"> <template> - <a href="javascript:;">棰勬</a> + <a href="javascript:">棰勬</a> </template> </el-table-column> </el-table> <div class="event-management"> - <el-button type="primary" size="mini" @click="ToManagement">浜嬩欢绠$悊</el-button> + <el-button type="primary" size="mini" @click="ToManagement">浜嬩欢澶勭疆</el-button> <el-button size="mini">鍏抽棴</el-button> </div> </div> diff --git a/src/components/base-page/enterprise-emergency/EffectiveVolumeCalc.vue b/src/components/base-page/enterprise-emergency/EffectiveVolumeCalc.vue new file mode 100644 index 0000000..e52be05 --- /dev/null +++ b/src/components/base-page/enterprise-emergency/EffectiveVolumeCalc.vue @@ -0,0 +1,240 @@ +<template> + <el-dialog :visible.sync="isShow" class="effect-vol-calc" title="浜嬫晠姘存湁鏁堝绉绠�" :modal="false" v-dialogDrag + :before-close="handleClose"> + <div class="container"> + <el-row class="row-style" :span="24"> + <el-col class="label" :span="6">浜嬫晠姘存祦閲�(m3/h):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.SGSLL" :precision="2" size="mini"></el-input-number> + </el-col> + <el-col class="label" :span="6">浜嬫晠鏃堕棿(h):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.SGSJ" size="mini"></el-input-number> + + </el-col> + </el-row> + <el-row class="row-style"> + <el-col class="label" :span="6">浜嬫晠鐗╂枡閲�(m鲁):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.SGWLL" :precision="2" size="mini"></el-input-number> + </el-col> + <el-col class="label" :span="6">杞瓨閲�(m鲁):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.ZCL" :precision="2" size="mini"></el-input-number> + </el-col> + </el-row> + <el-row class="row-style"> + <el-col class="label" :span="6">娑堥槻姘存祦閲�(m鲁):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.XFSLL" :precision="2" size="mini"></el-input-number> + + </el-col> + <el-col class="label" :span="6">娑堥槻鏃堕棿(h):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.XFSJ" size="mini"></el-input-number> + + </el-col> + </el-row> + <el-row class="row-style"> + <el-col class="label" :span="6">闄嶉洦閲�(mm):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.JYL" :precision="2" size="mini"></el-input-number> + </el-col> + <el-col class="label" :span="6">姹囨按闈㈢Н(銕�):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.HSMJ" :precision="2" size="mini"></el-input-number> + </el-col> + </el-row> + <el-row class="row-style .map-under-line"> + <el-col class="label" :span="6">鐢熶骇搴熸按閲�(m鲁):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.SCFSL" :precision="2" size="mini"></el-input-number> + </el-col> + <el-col class="label" :span="6">鏀堕泦姹犱綑閲�(m鲁):</el-col> + <el-col class="val-input" :span="6"> + <el-input-number @change="calculate" v-model="val.SJCYL" :precision="2" size="mini"></el-input-number> + </el-col> + </el-row> + <el-row class="row-style"> + <el-col class="label" :span="6">浜嬫晠姘村绉�(m鲁):</el-col> + <el-col class="val-input res-highlight" :span="6"><span>{{ val.SGSRJ }}</span></el-col> + <el-col class="label" :span="6">鏄惁澶т簬鏀堕泦姹犱綑閲�:</el-col> + <el-col class="val-input res-highlight" :span="6"><span>{{ val.SFDYSJCYL }}</span></el-col> + </el-row> + <div class="footer"> + <el-button type="primary" size="mini" @click="reSet">閲嶇疆</el-button> + </div> + </div> + </el-dialog> +</template> + +<script> +export default { + name: 'EffectiveVolumeCalc', + data () { + return { + isShow: false, + val: {} + } + }, + mounted () { + this.reSet() + }, + methods: { + handleClose (done) { + this.isShow = false + }, + setVisible (s) { + this.isShow = s + }, + getVisible () { + return this.isShow + }, + reSet () { + const val = { + SGSLL: 0, // 浜嬫晠姘存祦閲� + SGSJ: 0, // 浜嬫晠鏃堕棿 + SGWLL: 0, // 浜嬫晠鐗╂枡閲� + ZCL: 0, // 杞瓨閲� + XFSLL: 0, // 娑堣垂姘存祦閲� + XFSJ: 0, // 娑堥槻鏃堕棿 + JYL: 0, // 闄嶉洦閲� + HSMJ: 0, // 姹囨按闈㈢Н + SCFSL: 0, // 鐢熶骇搴熸按閲� + SJCYL: 0, // 鏀堕泦姹犱綑閲� + SGSRJ: 0, // 浜嬫晠姘村绉� + SFDYSJCYL: '--'// 鏄惁澶т簬鏀堕泦姹犱綑閲� + } + this.val = val + }, + calculate () { + const v = this.val + + v.SGSRJ = (v.SGWLL + v.XFSLL * v.XFSJ - v.ZCL) + v.SCFSL + v.JYL + + v.SFDYSJCYL = v.SGSRJ > v.SJCYL ? '鏄�' : '鍚�' + } + + } +} +</script> + +<style lang="less"> +.effect-vol-calc { + width: 20rem; + + .container { + padding: 0.15rem; + + .label { + color: @color; + text-align: end; + line-height: 28px; + } + + .val-input { + text-align: center; + } + + .res-highlight { + color: @color-highlight; + line-height: 28px; + } + } + + /deep/ .el-dialog { + left: 810px; + } + + .el-dialog__header { + padding: 4px 10px; + } + + .el-dialog__headerbtn { + top: 10px; + } + + .row-style { + padding: 4px 0; + } + + .el-input__inner { + background: @background-color; + border-color: @color; + } + + .el-input__inner:focus, .el-input__inner:hover { + border-color: @color-highlight; + outline: 0; + } + + .el-input-number span { + color: @color; + } + + .el-input-number__decrease { + background: @background-color; + border-right: 1px solid @color; + + &:hover { + color: @color-highlight; + } + } + + .el-input-number__increase { + background: @background-color; + border-left: 1px solid @color; + + &:hover { + color: @color-highlight; + } + } + + .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), + .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) { + border-color: @color-highlight; + } + + .el-date-table td.today span { + color: @color-highlight; + } + + .el-picker-panel__footer { + background: @background-color; + border-top-color: @color; + } + + .el-date-table th { + border-bottom-color: @color; + } + + .el-button { + background: @background-color; + color: @color; + border-color: @color; + } + + .el-button--text { + padding: 7px 15px; + } + + .el-button:hover { + background: @background-color; + color: @color-highlight; + border-color: @color-highlight; + } + + .el-input__inner { + color: #fff; + text-align: center; + } + + .el-date-picker__time-header { + border-bottom-color: @background-color-split; + } + + .el-date-picker__header-label { + color: #fff + } +} +</style> diff --git a/src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue b/src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue new file mode 100644 index 0000000..8d3d945 --- /dev/null +++ b/src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue @@ -0,0 +1,76 @@ +<template> + <div> +<!-- <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">--> +<!-- <el-table-column prop="define" label="寤鸿澶勭疆鎺柦" show-overflow-tooltip></el-table-column>--> +<!-- <el-table-column type="selection" label="棰勮" width="55"></el-table-column>--> + +<!-- </el-table>--> + <div class="" style="padding: 5px;"> +<!-- <div v-for="o in tableData" :key="o" class="text item">--> +<!-- {{ o.content }}--> +<!-- </div>--> + <div> + 1銆佸叧闂榾闂˙銆侀榾闂–锛屽涓婃父绠¢亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠¢亾杩涜鎴祦 + <div> + + </div> + </div> + </div> + <div > +</div> + + </div> +</template> + +<script> +export default { + name: 'DisposalProposed', + data () { + return { + tableData: [ + { + no: 1, + name: '鍏抽棴闃�闂�', + content: '1銆佸叧闂榾闂˙銆侀榾闂–锛屽涓婃父绠¢亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠¢亾杩涜鎴祦', + type: 'closeFM', + fmGxList: { + // 涓婃父闃�闂� + syfm: [{ name: '闃�闂˙', lng: 114, lat: 32 }, { name: '闃�闂╝', lng: 114, lat: 32 }], + // 涓嬫父闃�闂� + xyfm: [{ name: '闃�闂‥', lng: 114, lat: 32 }, { name: '闃�闂‵', lng: 114, lat: 32 }] + } + },{ + no: 1, + name: '鍏抽棴闃�闂�', + content: '1銆佸叧闂榾闂˙銆侀榾闂–锛屽涓婃父绠¢亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠¢亾杩涜鎴祦', + type: 'closeFM', + fmGxList: { + // 涓婃父闃�闂� + syfm: [{ name: '闃�闂˙', lng: 114, lat: 32 }, { name: '闃�闂╝', lng: 114, lat: 32 }], + // 涓嬫父闃�闂� + xyfm: [{ name: '闃�闂‥', lng: 114, lat: 32 }, { name: '闃�闂‵', lng: 114, lat: 32 }] + } + },{ + no: 1, + name: '鍏抽棴闃�闂�', + content: '1銆佸叧闂榾闂˙銆侀榾闂–锛屽涓婃父绠¢亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠¢亾杩涜鎴祦', + type: 'closeFM', + fmGxList: { + // 涓婃父闃�闂� + syfm: [{ name: '闃�闂˙', lng: 114, lat: 32 }, { name: '闃�闂╝', lng: 114, lat: 32 }], + // 涓嬫父闃�闂� + xyfm: [{ name: '闃�闂‥', lng: 114, lat: 32 }, { name: '闃�闂‵', lng: 114, lat: 32 }] + } + }] + + } + }, + methods: { + + } +} +</script> + +<style scoped> + +</style> diff --git a/src/components/base-page/enterprise-emergency/event-handling/EventBaseInfo.vue b/src/components/base-page/enterprise-emergency/event-handling/EventBaseInfo.vue new file mode 100644 index 0000000..826fb8e --- /dev/null +++ b/src/components/base-page/enterprise-emergency/event-handling/EventBaseInfo.vue @@ -0,0 +1,29 @@ +<template> + <div> + <div class="panel-title">浜嬩欢鍩烘湰淇℃伅</div> + <ul> + <li> + <p>浜嬩欢绠$嚎</p> + <span>鐢熶骇涓�鍖虹绾緼</span> + <span>鍚补姹℃按</span> + <span>鐩村煁</span><span>鏃犵紳閽㈢</span><span>鎷︽埅璁炬柦锛�<i>a闃�闂�</i></span> + </li> + <li> + <p>浜嬩欢涓婃父绠$嚎</p> + <span>鐢熶骇涓�鍖虹绾緼</span> + <span>鍚补姹℃按</span> + <span>鐩村煁</span><span>鏃犵紳閽㈢</span><span>鎷︽埅璁炬柦锛�<i>a闃�闂�</i></span> + </li> + </ul> + </div> +</template> + +<script> +export default { + name: 'EventBaseInfo' +} +</script> + +<style scoped> + +</style> diff --git a/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue b/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue new file mode 100644 index 0000000..e4ff10f --- /dev/null +++ b/src/components/base-page/enterprise-emergency/event-handling/EventHandling.vue @@ -0,0 +1,54 @@ +<template> + <div> + +<!--<!– 鍩烘湰淇℃伅–>--> +<!-- <event-base-info>--> + +<!-- </event-base-info>--> +<!-- 寤鸿澶勭疆--> + <disposal-proposed> + + </disposal-proposed> + <!-- 鏈夋晥瀹圭Н璁$畻--> + <div class="footer"> + <el-button type="primary" size="mini" @click="toggleShowCalc">浜嬫晠姘磋绠�</el-button> + <el-button type="primary" size="mini" @click="rimRes">鍛ㄨ竟璧勬簮</el-button> + <el-button type="primary" size="mini" @click="report">鐢熸垚鎶ュ憡</el-button> + <el-button type="primary" size="mini" @click="close">杩斿洖</el-button> + </div> + <effective-volume-calc ref="effectVolCalc"></effective-volume-calc> + </div> + +</template> + +<script> + +import EventBaseInfo from '@components/base-page/enterprise-emergency/event-handling/EventBaseInfo' +import DisposalProposed from '@components/base-page/enterprise-emergency/event-handling/DisposalProposed' +import EffectiveVolumeCalc from '@components/base-page/enterprise-emergency/EffectiveVolumeCalc' +export default { + name: 'EventHandling', + components: { DisposalProposed, EventBaseInfo, EffectiveVolumeCalc }, + + methods: { + toggleShowCalc () { + // this.isShowCalculate = !this.isShowCalculate + const s = this.$refs.effectVolCalc.getVisible() + console.log(s) + this.$refs.effectVolCalc.setVisible(!s) + }, + rimRes () { + console.log('鍛ㄨ竟璧勬簮') + }, + report () { + console.log('鐢熸垚鎶ュ憡') + }, + close () { console.log('杩斿洖') } + + } +} +</script> + +<style scoped> + +</style> diff --git a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue index e45fa93..a03f2b8 100644 --- a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue +++ b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue @@ -84,7 +84,7 @@ <p>浜嬩欢绫诲瀷锛�<span>妯℃嫙绠$嚎浜嬩欢</span> <el-button class="rt btn00fff6" size="mini" style="margin-right: 0.04rem;" @click="accordPopup()"> - <span>浜嬩欢绠$悊</span> + <span>浜嬩欢澶勭疆</span> </el-button> </p> </div> @@ -111,6 +111,7 @@ // import AjaxUtils from '@utils/AjaxUtils' import DisposalEvent from '../../../base-page/enterprise-emergency/DisposalEvent' +import EventHandling from '@components/base-page/enterprise-emergency/event-handling/EventHandling' import eventBus from '../../../../eventBus' import EventsReported from '../../../../components/base-page/enterprise-emergency/EventsReported' @@ -156,7 +157,17 @@ }, // 鐐瑰嚮浜嬩欢绠$悊 accordPopup () { - eventBus.$emit('disposal-analysis', true) + // eventBus.$emit('disposal-analysis', true) + window.$layer.open({ + content: { + comp: EventHandling, // 缁勪欢 + parent: this, // 鐖剁粍浠� + data: { // 浼犻�掔殑鍙傛暟 + // info: this.info + } + }, + title: '浜嬩欢澶勭疆' + }) }, // 寮�濮嬪垎鏋� startAnalysis () { diff --git a/src/components/plugin/leaflet-echart.js b/src/components/plugin/leaflet-echart.js new file mode 100755 index 0000000..529bc78 --- /dev/null +++ b/src/components/plugin/leaflet-echart.js @@ -0,0 +1,312 @@ +/* eslint-disable */ +/** + * @class L.supermap.echartsLayer + * @classdesc 鐧惧害ECharts鍥惧眰绫汇�� + * @category Visualization ECharts + * @extends L.Layer{@linkdoc-leaflet/#layer} + * @param echartsOptions - {Object} 鍥捐〃鍙傛暟 + * @param options - {Object} 鍙�夊浘灞傚弬鏁般��<br> + * attribution - {string} 鐗堟潈淇℃伅銆�<br> + * loadWhileAnimating - {boolean} 鏄惁鍦ㄧЩ鍔ㄦ椂瀹炴椂缁樺埗銆傞粯璁や负false銆� + */ + +var EchartsLayer = L.Layer.extend({ + + includes: [], + _echartsContainer: null, + _map: null, + _ec: null, + _echartsOptions: null, + + options: { + attribution: "漏 2017 鐧惧害 ECharts", + loadWhileAnimating: false + }, + + initialize: function initialize(echartsOptions, options) { + L.Util.setOptions(this, options); + this.setOption(echartsOptions); + }, + /** + * @function L.supermap.echartsLayer.prototype.setOption + * @description 璁剧疆鍥捐〃鍦板浘鍙傛暟 + * @param echartsOptions - {Object} 鍥捐〃鍙傛暟 + * @param notMerge - {boolean} 鏄惁鍚堝苟鍙傛暟 + * @param lazyUpdate - {string} 鍚庡彴鑷姩鏇存柊 + */ + setOption: function setOption(echartsOptions, notMerge, lazyUpdate) { + var baseOption = echartsOptions.baseOption || echartsOptions; + baseOption.LeafletMap = baseOption.LeafletMap || { + roam: true + }; + baseOption.animation = baseOption.animation === true; + this._echartsOptions = echartsOptions; + this._ec && this._ec.setOption(echartsOptions, notMerge, lazyUpdate); + }, + getEcharts: function getEcharts() { + return this._ec; + }, + _disableEchartsContainer: function _disableEchartsContainer() { + this._echartsContainer.style.visibility = "hidden"; + }, + _enableEchartsContainer: function _enableEchartsContainer() { + this._echartsContainer.style.visibility = "visible"; + }, + + /** + * @private + * @function L.supermap.echartsLayer.prototype.onAdd + * @description 娣诲姞鍦板浘 + * @param map - {L.map} 寰呮坊鍔犵殑鍦板浘 + */ + onAdd: function onAdd(map) { + this._map = map; + this._initEchartsContainer(); + this._ec = echarts.init(this._echartsContainer); + echarts.leafletMap = map; + var me = this; + map.on("zoomstart", function () { + me._disableEchartsContainer(); + }); + !me.options.loadWhileAnimating && map.on("movestart", function () { + me._disableEchartsContainer(); + }); + echarts.registerAction({ + type: 'LeafletMapLayout', + event: 'LeafletMapLayout', + update: 'updateLayout' + }, function (payload, ecModel) {// eslint-disable-line no-unused-vars + + }); + echarts.registerCoordinateSystem('leaflet', LeafletMapCoordSys); + echarts.extendComponentModel({ + type: 'LeafletMap', + getBMap: function getBMap() { + return this.__LeafletMap; + }, + defaultOption: { + roam: false + } + }); + echarts.extendComponentView({ + type: 'LeafletMap', + render: function render(LeafletMapModel, ecModel, api) { + var rendering = true; + var leafletMap = echarts.leafletMap; + var viewportRoot = api.getZr().painter.getViewportRoot(); + + var animated = leafletMap.options.zoomAnimation && L.Browser.any3d; + viewportRoot.className = ' leaflet-layer leaflet-zoom-' + (animated ? 'animated' : 'hide') + ' echarts-layer'; + + var originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin']); + viewportRoot.style[originProp] = '50% 50%'; + + var coordSys = LeafletMapModel.coordinateSystem; + + var ecLayers = api.getZr().painter.getLayers(); + + var moveHandler = function moveHandler() { + if (rendering) { + return; + } + var offset = me._map.containerPointToLayerPoint([0, 0]); + var mapOffset = [offset.x || 0, offset.y || 0]; + viewportRoot.style.left = mapOffset[0] + 'px'; + viewportRoot.style.top = mapOffset[1] + 'px'; + for (var item in ecLayers) { + if (!ecLayers.hasOwnProperty(item)) { + continue; + } + ecLayers[item] && clearContext(ecLayers[item].ctx); + } + if (!me.options.loadWhileAnimating) { + me._enableEchartsContainer(); + } + + coordSys.setMapOffset(mapOffset); + LeafletMapModel.__mapOffset = mapOffset; + + api.dispatchAction({ + type: 'LeafletMapLayout' + }); + }; + + function clearContext(context) { + context && context.clearRect && context.clearRect(0, 0, context.canvas.width, context.canvas.height); + } + + function zoomEndHandler() { + if (rendering) { + return; + } + + api.dispatchAction({ + type: 'LeafletMapLayout' + }); + me._enableEchartsContainer(); + } + if (this._oldMoveHandler) { + leafletMap.off(me.options.loadWhileAnimating ? 'move' : 'moveend', this._oldMoveHandler); + } + if (this._oldZoomEndHandler) { + leafletMap.off('zoomend', this._oldZoomEndHandler); + } + + leafletMap.on(me.options.loadWhileAnimating ? 'move' : 'moveend', moveHandler); + leafletMap.on('zoomend', zoomEndHandler); + this._oldMoveHandler = moveHandler; + this._oldZoomEndHandler = zoomEndHandler; + rendering = false; + } + }); + this._ec.setOption(this._echartsOptions); + }, + + onRemove: function onRemove() { + // 閿�姣乪charts瀹炰緥 + this._ec.dispose(); + }, + + _initEchartsContainer: function _initEchartsContainer() { + var size = this._map.getSize(); + + var _div = document.createElement('div'); + _div.style.position = 'absolute'; + _div.style.height = size.y + 'px'; + _div.style.width = size.x + 'px'; + _div.style.zIndex = 10; + this._echartsContainer = _div; + + this._map.getPanes().overlayPane.appendChild(this._echartsContainer); + var me = this; + this._map.on('resize', function (e) { + var size = e.newSize; + me._echartsContainer.style.width = size.x + 'px'; + me._echartsContainer.style.height = size.y + 'px'; + me._ec.resize(); + }); + } + +}); + +/** + * @class L.supermap.LeafletMapCoordSys + * @private + * @classdesc 鍦板浘鍧愭爣绯荤粺绫� + * @param leafletMap - {L.map} 鍦板浘 + * @param api - {Object} 鎺ュ彛 + */ +function LeafletMapCoordSys(leafletMap) { + this._LeafletMap = leafletMap; + this.dimensions = ['lng', 'lat']; + this._mapOffset = [0, 0]; +} + +LeafletMapCoordSys.prototype.dimensions = ['lng', 'lat']; + +LeafletMapCoordSys.prototype.setMapOffset = function (mapOffset) { + this._mapOffset = mapOffset; +}; + +LeafletMapCoordSys.prototype.getBMap = function () { + return this._LeafletMap; +}; + +LeafletMapCoordSys.prototype.prepareCustoms = function () { + var zrUtil = echarts.util; + + var rect = this.getViewRect(); + return { + coordSys: { + // The name exposed to user is always 'cartesian2d' but not 'grid'. + type: 'leaflet', + x: rect.x, + y: rect.y, + width: rect.width, + height: rect.height + }, + api: { + coord: zrUtil.bind(this.dataToPoint, this), + size: zrUtil.bind(dataToCoordSize, this) + } + }; + + function dataToCoordSize(dataSize, dataItem) { + dataItem = dataItem || [0, 0]; + return zrUtil.map([0, 1], function (dimIdx) { + var val = dataItem[dimIdx]; + var halfSize = dataSize[dimIdx] / 2; + var p1 = []; + var p2 = []; + p1[dimIdx] = val - halfSize; + p2[dimIdx] = val + halfSize; + p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx]; + return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]); + }, this); + } +}; + +LeafletMapCoordSys.prototype.dataToPoint = function (data) { + //澶勭悊鏁版嵁涓殑null鍊� + if (data[1] === null) { + data[1] = L.CRS.EPSG3857.projection.MAX_LATITUDE; + } + data[1] = this.fixLat(data[1]); + + var px = this._LeafletMap.latLngToLayerPoint([data[1], data[0]]); + + var mapOffset = this._mapOffset; + return [px.x - mapOffset[0], px.y - mapOffset[1]]; +}; + +LeafletMapCoordSys.prototype.fixLat = function (lat) { + if (lat >= 90) { + return 89.99999999999999; + } + if (lat <= -90) { + return -89.99999999999999; + } + return lat; +}; + +LeafletMapCoordSys.prototype.pointToData = function (pt) { + var mapOffset = this._mapOffset; + var point = this._LeafletMap.layerPointToLatLng([pt[0] + mapOffset[0], pt[1] + mapOffset[1]]); + return [point.lng, point.lat]; +}; + +LeafletMapCoordSys.prototype.getViewRect = function () { + var size = this._LeafletMap.getSize(); + return new echarts.graphic.BoundingRect(0, 0, size.x, size.y); +}; + +LeafletMapCoordSys.prototype.getRoamTransform = function () { + return echarts.matrix.create(); +}; +LeafletMapCoordSys.dimensions = LeafletMapCoordSys.prototype.dimensions; + +LeafletMapCoordSys.create = function (ecModel) { + var coordSys = void 0; + + ecModel.eachComponent('LeafletMap', function (leafletMapModel) { + if (!coordSys) { + coordSys = new LeafletMapCoordSys(echarts.leafletMap); + } + leafletMapModel.coordinateSystem = coordSys; + leafletMapModel.coordinateSystem.setMapOffset(leafletMapModel.__mapOffset || [0, 0]); + }); + ecModel.eachSeries(function (seriesModel) { + if (!seriesModel.get('coordinateSystem') || seriesModel.get('coordinateSystem') === 'leaflet') { + if (!coordSys) { + coordSys = new LeafletMapCoordSys(echarts.leafletMap); + } + seriesModel.coordinateSystem = coordSys; + seriesModel.animation = seriesModel.animation === true; + } + }); +}; +var echartsLayer = function echartsLayer(echartsOptions, options) { + return new EchartsLayer(echartsOptions, options); +}; + +L.echartsLayer = echartsLayer; diff --git a/src/main.js b/src/main.js index a2d5681..621ab68 100644 --- a/src/main.js +++ b/src/main.js @@ -29,6 +29,7 @@ Vue.prototype.L = L Vue.prototype.$config = appConfig Vue.prototype.$echarts = echarts // 鎸傝浇echarts +window.echarts = echarts window.Vue = Vue window.$layer = layer(Vue) // 娉ㄥ唽鎸囦护7 -- Gitblit v1.8.0