From 9766b1245e4cbc387eb53443094364dccb80d804 Mon Sep 17 00:00:00 2001
From: yangdelong <828900aaa>
Date: 星期三, 26 五月 2021 21:28:36 +0800
Subject: [PATCH] 企业应急-事件处置
---
src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue | 47 +++
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 | 18 +
src/components/plugin/leaflet-echart.js | 312 ++++++++++++++++++++++++++
src/Sgis.js | 2
src/components/base-page/enterprise-emergency/DisposalEvent.vue | 8
9 files changed, 704 insertions(+), 7 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..d4a4e61
--- /dev/null
+++ b/src/components/base-page/enterprise-emergency/event-handling/DisposalProposed.vue
@@ -0,0 +1,47 @@
+<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>-->
+ <el-card class="box-card">
+ <div v-for="o in tableData" :key="o" class="text item">
+ {{ o.content }}
+ </div>
+ </el-card>
+ <div >
+</div>
+
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'DisposalProposed',
+ data () {
+ return {
+ tableData: [
+ {
+ name: '鍏抽棴闃�闂�',
+ content: '鍏抽棴闃�闂˙銆侀榾闂–锛屽涓婃父绠￠亾杩涜鎴祦锛涘叧闂榾闂―锛屽涓嬫父绠￠亾杩涜鎴祦',
+ 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 f8754f5..f838087 100644
--- a/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue
+++ b/src/components/panel/topicSearch/enterprise-emergency/EventQuery.vue
@@ -76,7 +76,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>
@@ -91,6 +91,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'
export default {
@@ -132,9 +133,19 @@
// this.wfsHelper = new WfsHelper()
},
methods: {
- // 鐐瑰嚮浜嬩欢绠＄悊
+ // 鐐瑰嚮浜嬩欢澶勭悊
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 () {
@@ -152,6 +163,7 @@
title: '浜嬩欢澶勭疆'
})
},
+
// radio鏁版嵁閫夋嫨
redioChange (item) {
console.log(item)
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