派生自 wuyushui/SewerAndRainNetwork
| package.json | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/Sgis.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/panel/LegendPanel.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/panel/ToolBoxPanel.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/components/plugin/FullScreen.js | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
| src/views/MapTemplate.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
package.json
@@ -18,6 +18,7 @@ "dayjs": "^1.9.6", "echarts": "^4.2.1", "element-ui": "^2.14.1", "fullscreen": "^1.1.1", "jquery": "^3.5.1", "js-cookie": "^2.2.0", "leaflet": "^1.6.0", @@ -26,10 +27,11 @@ "lodash": "^4.17.10", "nprogress": "^0.2.0", "rbush": "^3.0.1", "screenfull": "^3.3.2", "screenfull": "^3.3.3", "vue": "^2.6.11", "vue-count-to": "^1.0.13", "vue-focus": "^2.1.0", "vue-fullscreen": "^2.2.0", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, src/Sgis.js
@@ -10,6 +10,8 @@ import MapConfig from '@/conf/MapConfig' import DashFlow from '@components/plugin/PathDashFlow' import CanvasMarkers from '@components/plugin/CanvasMarkers' import FullScreen from '@components/plugin/FullScreen' let map = null const L = window.L const initMap = (div) => { @@ -26,6 +28,8 @@ DashFlow.DashFlow(L) // 流动线图 CanvasMarkers.init(L)// 画布图层 // Leaflet扩展代码 // 全屏 FullScreen.init(L) map = L.map(div, MapConfig.mapOptions)
@@ -4,7 +4,7 @@ <i class="el-icon-more-outline"></i> <span>图例</span> </div> <transition name="fade"> <`transition` name="fade"> <div class="legend-content" v-show="legendControl"> <div class="legend-content-box" v-for="(item,index) in legendContents" :key="index"> <p>{{ item.title }}</p> @@ -258,8 +258,8 @@ } .fade-leave-active { transform-origin: right; animation: bounce-in 1s reverse; //transform-origin: right; //animation: bounce-in 1s reverse; transform-origin: right bottom; animation: bounce-in .5s reverse; } src/components/panel/ToolBoxPanel.vue
@@ -1,11 +1,25 @@ <template> <div class="lefttop-toolbox-panel"> <ul> <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total" :class="{'active':activeTools[i]}"> <img :src="item"/> </li> </ul> <div class="init-choose" @click="changeSelect()"> <img src="@/assets/images/map-pages/icon/toolbox/circle.png" alt=""> </div> <!-- <transition name="fade">--> <!-- <ul v-show='selectGroup'>--> <!-- <li v-for="(item,i) in imgList" :key="i" @click="toggleActive(i)" :value="total"><img :src="item"/></li>--> <!-- </ul>--> <!-- </transition>--> <div class="el-select-dropdown" v-show='selectGroup'> <el-dropdown @command="handleCommand" trigger="click" v-for="(item,i) in imgLists" :key="i" :value="total"> <transition name="fade"> <img :src="item.title" :title="item.alt"/> </transition> <el-dropdown-menu> <el-dropdown-item v-for="(ite,index) in item.items" :key="index" :command='ite.headings'> <span @click='toggleActive(ite)'>{{ ite.headings }}</span> </el-dropdown-item> </el-dropdown-menu> </el-dropdown> </div> </div> </template> @@ -20,35 +34,98 @@ export default { name: 'ToolBoxPanel', components: {}, props: ['map'], data () { return { isPanelVisible: false, total: 0, activeTools: {}, imgList: { circle: circle, square: square, polygon: polygon, legend: legend, location: location, fullscreen: fullscreen imgLists: [ { title: circle, alt: '标绘', items: [ { headings: '线标绘' }, { headings: '面标绘' }, { headings: '箭头标绘' } ] }, { title: square, alt: '标注', items: [ { headings: '点标注' }, { headings: '线标注' }, { headings: '面标注' }, { headings: '文字标注' }, { headings: '图标标注' } ] }, { title: legend, alt: '测量', items: [ { headings: '距离测量' }, { headings: '面积测量' } ] }, { title: location, alt: '切换底图', items: [ { headings: '影像图' }, { headings: '矢量图' }, { headings: '地形图' } ] }, { title: polygon, alt: '管网', items: [ { headings: '连通性分析' }, { headings: '爆管分析' }, { headings: '流向分析' }, { headings: '横断面分析' } ] }, { title: fullscreen, alt: '下载', items: [ { headings: '全屏' }, { headings: 'A4横向' }, { headings: 'A4纵向' } ] } ], form: { regionType: '', enterprise: '' } }, selectGroup: false, selectGroupOne: false } }, methods: { changeSelect () { this.selectGroup = !this.selectGroup }, handleClose (done) { console.log(done) }, handleClick (tab, event) { console.log(tab, event) }, handleCommand (command) { console.log(command) if (command === '全屏') { this.map.toggleFullscreen() } }, toggleActive (k) { this.total++ this.activeTools[k] = !this.activeTools[k] if (k === 'fullscreen') { this.map.toggleFullscreen() } }, loadData () { @@ -58,6 +135,7 @@ this.loadData() }, created () { } } </script> @@ -67,31 +145,74 @@ position: absolute; left: 5px; top: 5px; z-index: 1000; width: 175px; z-index: 999; display: flex; .init-choose { //margin: 15px 5px; background: #305B62; //margin-top: 15px; width: 35px; height: 35px; line-height: 30px; background: #07325b; border: 1px solid #5EF2FF; border-radius: 3px; text-align: center; border-radius: 50%; border: 2px skyblue solid; display: flex; align-items: center; justify-content: center; z-index: 999; } ul { list-style: none; margin: 0; padding: 5px; .el-select-dropdown { position: absolute; z-index: 1; width: 250px; height: 35px; display: flex; align-items: center; justify-content: space-evenly; background: #305B62; border-radius: 15px; padding-inline: 10px; padding-inline-start: 30px; li { float: left; width: 23px; height: 23px; margin: 0 1px; border: 1px solid #073C4F; .el-dropdow { width: 20%; } @keyframes bounce-in { 0% { transform: scale(0); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } } .active { border: 1px solid #5EF2FF; .fade-enter-active { transform-origin: left center; animation: bounce-in .2s; } .fade-leave-active { transform-origin: left; animation: bounce-in .2s reverse; } } .el-select-dropdown:last-child { margin-left: 10px; } .el-dropdown-link { cursor: pointer; color: #409EFF; } .el-icon-arrow-down { font-size: 12px; } } </style> src/components/plugin/FullScreen.js
New file @@ -0,0 +1,174 @@ /* eslint-disable */ const init = (L) => { (function (factory) { if (typeof define === 'function' && define.amd) { // AMD define(['leaflet'], factory) } else if (typeof module !== 'undefined') { // Node/CommonJS // module.exports = factory(require('leaflet')) factory(L) } else { // Browser globals if (typeof window.L === 'undefined') { throw new Error('Leaflet must be loaded first') } factory(window.L) } }(function (L) { L.Control.Fullscreen = L.Control.extend({ options: { position: 'topleft', title: { false: 'View Fullscreen', true: 'Exit Fullscreen' } }, onAdd: function (map) { var container = L.DomUtil.create('div', 'leaflet-control-fullscreen leaflet-bar leaflet-control') this.link = L.DomUtil.create('a', 'leaflet-control-fullscreen-button leaflet-bar-part', container) this.link.href = '#' this._map = map this._map.on('fullscreenchange', this._toggleTitle, this) this._toggleTitle() L.DomEvent.on(this.link, 'click', this._click, this) return container }, _click: function (e) { L.DomEvent.stopPropagation(e) L.DomEvent.preventDefault(e) this._map.toggleFullscreen(this.options) }, _toggleTitle: function () { this.link.title = this.options.title[this._map.isFullscreen()] } }) L.Map.include({ isFullscreen: function () { return this._isFullscreen || false }, toggleFullscreen: function (options) { var container = this.getContainer() if (this.isFullscreen()) { if (options && options.pseudoFullscreen) { this._disablePseudoFullscreen(container) } else if (document.exitFullscreen) { document.exitFullscreen() } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen() } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen() } else if (document.msExitFullscreen) { document.msExitFullscreen() } else { this._disablePseudoFullscreen(container) } } else { if (options && options.pseudoFullscreen) { this._enablePseudoFullscreen(container) } else if (container.requestFullscreen) { container.requestFullscreen() } else if (container.mozRequestFullScreen) { container.mozRequestFullScreen() } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT) } else if (container.msRequestFullscreen) { container.msRequestFullscreen() } else { this._enablePseudoFullscreen(container) } } }, _enablePseudoFullscreen: function (container) { L.DomUtil.addClass(container, 'leaflet-pseudo-fullscreen') this._setFullscreen(true) this.fire('fullscreenchange') }, _disablePseudoFullscreen: function (container) { L.DomUtil.removeClass(container, 'leaflet-pseudo-fullscreen') this._setFullscreen(false) this.fire('fullscreenchange') }, _setFullscreen: function (fullscreen) { this._isFullscreen = fullscreen var container = this.getContainer() if (fullscreen) { L.DomUtil.addClass(container, 'leaflet-fullscreen-on') } else { L.DomUtil.removeClass(container, 'leaflet-fullscreen-on') } this.invalidateSize() }, _onFullscreenChange: function (e) { var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement if (fullscreenElement === this.getContainer() && !this._isFullscreen) { this._setFullscreen(true) this.fire('fullscreenchange') } else if (fullscreenElement !== this.getContainer() && this._isFullscreen) { this._setFullscreen(false) this.fire('fullscreenchange') } } }) L.Map.mergeOptions({ fullscreenControl: false }) L.Map.addInitHook(function () { if (this.options.fullscreenControl) { this.fullscreenControl = new L.Control.Fullscreen(this.options.fullscreenControl) this.addControl(this.fullscreenControl) } var fullscreenchange if ('onfullscreenchange' in document) { fullscreenchange = 'fullscreenchange' } else if ('onmozfullscreenchange' in document) { fullscreenchange = 'mozfullscreenchange' } else if ('onwebkitfullscreenchange' in document) { fullscreenchange = 'webkitfullscreenchange' } else if ('onmsfullscreenchange' in document) { fullscreenchange = 'MSFullscreenChange' } if (fullscreenchange) { var onFullscreenChange = L.bind(this._onFullscreenChange, this) this.whenReady(function () { L.DomEvent.on(document, fullscreenchange, onFullscreenChange) }) this.on('unload', function () { L.DomEvent.off(document, fullscreenchange, onFullscreenChange) }) } }) L.control.fullscreen = function (options) { return new L.Control.Fullscreen(options) } })) } export default { init } src/views/MapTemplate.vue
@@ -10,7 +10,7 @@ </sgis-layer-controller> <monitor-panel></monitor-panel> <!-- <top-enterprise-panel></top-enterprise-panel>--> <tool-box-panel></tool-box-panel> <tool-box-panel :map="this.map"></tool-box-panel> <menu-special></menu-special> <legend-panel></legend-panel> </div> @@ -153,4 +153,4 @@ border-top: 1px solid #0661AE; } } </style>> </style>
