|
|
@@ -1,112 +1,12 @@
|
|
|
<template>
|
|
|
<div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
|
|
|
- <transition-group
|
|
|
- appear
|
|
|
- name="animate__animated animate__bounce"
|
|
|
- enter-active-class="animate__backInLeft"
|
|
|
- leave-active-class="animate__backOutLeft"
|
|
|
- >
|
|
|
- <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary" v-show="mapToolShowBH" key="mapFlash"
|
|
|
- style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
|
|
|
- <div class="panel-heading" id="panelheading">
|
|
|
- <h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
|
|
|
- </div>
|
|
|
- <div class="panel-body content" id="panelbodycontent" style="margin-bottom: .5rem;padding-right: .5rem;">
|
|
|
- <div align="right" class="button-group">
|
|
|
- <el-button type="success" @click="PlottingDrawCancel">取消标绘</el-button>
|
|
|
-
|
|
|
- <el-button type="success" @click="clearLayers">清空标绘</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div id="plottingPanel">
|
|
|
- <div id="plotPanel" style="width: 15rem;height:50%;overflow-y:scroll;">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition-group>
|
|
|
- <div id="toolbar-heat" v-if="isheatPlotting" class="panel panel-primary"
|
|
|
- style="position:absolute;z-index: 9999; padding: 1rem; bottom:3rem;right: 1rem; border-radius: 4px; width: fit-content;height:fit-content;overflow-y:scroll;background:#040b1f">
|
|
|
- <div class="panel-body content">
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">风向</span>
|
|
|
- <select class="form-control" style="width:auto" id="heatNums">
|
|
|
- <option value="1">南风</option>
|
|
|
- <option value="31">西南风</option>
|
|
|
- <option value="41">东南风</option>
|
|
|
- <option value="2">北风</option>
|
|
|
- <option value="32">西北风</option>
|
|
|
- <option value="42">东北风</option>
|
|
|
- <option value="3">西风</option>
|
|
|
- <option value="4">东风</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">风速</span>
|
|
|
- <input type="text" class="form-control" id="heatNums1" value="6"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">温度</span>
|
|
|
- <input type="text" class="form-control" id="heatNums2" value="10℃"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">湿度</span>
|
|
|
- <input type="text" class="form-control" id="heatNums3" value="6%RH"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">持续时间</span>
|
|
|
- <input type="text" class="form-control" id="heatNums4" value="60分钟"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">植被类型</span>
|
|
|
- <select class="form-control" style="width:auto" id="heatNums5">
|
|
|
- <option value="1">针叶林</option>
|
|
|
- <option value="31">落叶林</option>
|
|
|
- </select>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <div class="input-group">
|
|
|
- <span class="input-group-addon">大气压</span>
|
|
|
- <input type="text" class="form-control" id="heatNums6" value="101.325kPa"/>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="panel">
|
|
|
- <el-button type="success" @click="createHeatPoints">分析</el-button>
|
|
|
- <el-button type="success" @click="clearHeatPoints">重置</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
-// import 'leaflet-side-by-side'
|
|
|
-// import '@supermap/iclient-leaflet'
|
|
|
-// import 'leaflet/dist/leaflet.css'
|
|
|
-// import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'
|
|
|
-// import 'leaflet.markercluster/dist/MarkerCluster.css'
|
|
|
-// import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
|
|
|
-// import 'leaflet-draw'
|
|
|
-// import 'leaflet-draw/dist/leaflet.draw.css'
|
|
|
-// import L from 'leaflet'
|
|
|
|
|
|
import {
|
|
|
- // getSuperMap,
|
|
|
iconList
|
|
|
} from '@/api/components/supermap.js'
|
|
|
-// import { selectConfigKey } from "@/api/system/config";
|
|
|
-// import {setToken} from '../plugins/auth'
|
|
|
-// import modal from '@/plugins/modal'
|
|
|
|
|
|
export default {
|
|
|
name: 'sookaSuperMap',
|
|
|
@@ -210,123 +110,15 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- // this.dynamicPlotting()
|
|
|
- // this.getspuerMapHost()
|
|
|
this.initMap()
|
|
|
- //添加画图的提示信息
|
|
|
- window.L.drawLocal.draw.toolbar = {
|
|
|
- actions: {
|
|
|
- title: '取消绘图',
|
|
|
- text: '取消'
|
|
|
- },
|
|
|
- finish: {
|
|
|
- title: '完成绘图',
|
|
|
- text: '完成'
|
|
|
- },
|
|
|
- undo: {
|
|
|
- title: '删除最后绘制的点',
|
|
|
- text: '删除最后一个点'
|
|
|
- },
|
|
|
- buttons: {
|
|
|
- polyline: '绘制折线',
|
|
|
- polygon: '绘制多边形',
|
|
|
- rectangle: '绘制矩形',
|
|
|
- circle: '绘制圆圈',
|
|
|
- marker: '绘制标记',
|
|
|
- circlemarker: '绘制圆圈标记'
|
|
|
- }
|
|
|
- }
|
|
|
- window.L.drawLocal.draw.handlers = {
|
|
|
- circle: {
|
|
|
- tooltip: {
|
|
|
- start: '单击并拖动以绘制圆形'
|
|
|
- },
|
|
|
- radius: '半径'
|
|
|
- },
|
|
|
- circlemarker: {
|
|
|
- tooltip: {
|
|
|
- start: '点击地图放置圆圈标记'
|
|
|
- }
|
|
|
- },
|
|
|
- marker: {
|
|
|
- tooltip: {
|
|
|
- start: '点击地图放置标记'
|
|
|
- }
|
|
|
- },
|
|
|
- polygon: {
|
|
|
- tooltip: {
|
|
|
- start: '点击开始绘制形状',
|
|
|
- cont: '点击继续绘制形状',
|
|
|
- end: '单击第一个点以关闭此形状'
|
|
|
- }
|
|
|
- },
|
|
|
- polyline: {
|
|
|
- error: '<strong>Error:</strong> shape edges cannot cross!',
|
|
|
- tooltip: {
|
|
|
- start: '点击开始画线',
|
|
|
- cont: '点击继续画线',
|
|
|
- end: '单击最后一点以完成线'
|
|
|
- }
|
|
|
- },
|
|
|
- rectangle: {
|
|
|
- tooltip: {
|
|
|
- start: '单击并拖动以绘制矩形'
|
|
|
- }
|
|
|
- },
|
|
|
- simpleshape: {
|
|
|
- tooltip: {
|
|
|
- end: '释放鼠标完成绘图'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- window.L.drawLocal.edit = {
|
|
|
- toolbar: {
|
|
|
- actions: {
|
|
|
- save: {
|
|
|
- title: '保存更改',
|
|
|
- text: '保存'
|
|
|
- },
|
|
|
- cancel: {
|
|
|
- title: '取消编辑，放弃所有更改',
|
|
|
- text: '取消'
|
|
|
- },
|
|
|
- clearAll: {
|
|
|
- title: '清除所有图层',
|
|
|
- text: '清除所有'
|
|
|
- }
|
|
|
- },
|
|
|
- buttons: {
|
|
|
- edit: '编辑图层',
|
|
|
- editDisabled: '没有可编辑的图层',
|
|
|
- remove: '删除图层',
|
|
|
- removeDisabled: '没有可删除的图层'
|
|
|
- }
|
|
|
- },
|
|
|
- handlers: {
|
|
|
- edit: {
|
|
|
- tooltip: {
|
|
|
- text: '拖动手柄或标记以编辑要素',
|
|
|
- subtext: '单击取消以撤消更改'
|
|
|
- }
|
|
|
- },
|
|
|
- remove: {
|
|
|
- tooltip: {
|
|
|
- text: '单击要删除的功能'
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
props: {
|
|
|
mapDiv: null,
|
|
|
codes: null,
|
|
|
mapSite: {},
|
|
|
- isdynamicPlotting: false,//动态标绘表格
|
|
|
- isSideBySide: false,
|
|
|
showLatLng: null,
|
|
|
showAreaLatLng: null,
|
|
|
showLineLatLng: null,
|
|
|
- mapToolShowBH:false
|
|
|
},
|
|
|
methods: {
|
|
|
/** ----------------------------------火势蔓延 开始------------------------------------- */
|
|
|
@@ -723,19 +515,18 @@ export default {
|
|
|
}
|
|
|
// getSuperMap(this.codes).then(resp => {
|
|
|
|
|
|
- const mapList = [{
|
|
|
- url:_that.host +"/iserver/services/map-JiLin/rest/maps/JiLin",
|
|
|
- centerLat:'124.37',
|
|
|
- centerLng:'43.15',
|
|
|
- zoom:9,
|
|
|
- maxZoom:16,
|
|
|
- minZoom:1,
|
|
|
- zoomControl:0,
|
|
|
- attributionControl:0,
|
|
|
- logoControl:0,
|
|
|
- dragging:""
|
|
|
- }]
|
|
|
-
|
|
|
+ const mapList = [
|
|
|
+ {
|
|
|
+ "url": "http://121.36.228.94:8090/iserver/services/map-JiLin/rest/maps/JiLin",
|
|
|
+ "centerLng": "129.518218",
|
|
|
+ "centerLat": "42.912081",
|
|
|
+ "zoom": 9,
|
|
|
+ "maxZoom": 16,
|
|
|
+ "minZoom": 1,
|
|
|
+ "zoomControl": 0,
|
|
|
+ "attributionControl": 0
|
|
|
+ }
|
|
|
+ ]
|
|
|
|
|
|
if (mapList != null && mapList.length > 0) {
|
|
|
let url = mapList[0].url
|
|
|
@@ -765,10 +556,13 @@ export default {
|
|
|
dragging: dragging,
|
|
|
logoControl: logoControl
|
|
|
}
|
|
|
- let loadConfiguration = Object.assign(defaultConfigure, mapSite)
|
|
|
- this.map = window.L.map(this.mapDiv, loadConfiguration)
|
|
|
+ setTimeout(() => {
|
|
|
+ let loadConfiguration = Object.assign(defaultConfigure, mapSite)
|
|
|
+ _that.map = window.L.map(_that.mapDiv, loadConfiguration)
|
|
|
+
|
|
|
+ window.L.supermap.tiledMapLayer(url).addTo(_that.map)
|
|
|
+ },2000)
|
|
|
|
|
|
- window.L.supermap.tiledMapLayer(url).addTo(_that.map)
|
|
|
}
|
|
|
// })
|
|
|
} else { //卷帘地图
|
|
|
@@ -1306,7 +1100,7 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-@import '@/assets/styles/base.scss';
|
|
|
+@import '@/assets/base.scss';
|
|
|
.panel{
|
|
|
margin-bottom: .5rem;
|
|
|
button{
|
