从零开始的VUE项目-07（围绕地图做一些功能：恢复默认地图、键盘导航、放大，缩小、清除临时图层、图层管理，通过周期函数模拟实时Echart曲线变化）_openlayers地图放在vue里实现移动和复位缩小放大按钮

作者：花生_TL007 | 2024-02-18 19:12:03

踩

openlayers地图放在vue里实现移动和复位缩小放大按钮

代码svn地址（用户名：liu，密码;123）

这一篇我们继续来围绕地图做一些功能。

我们来做一下地图工具

在这里插入图片描述

恢复默认地图、键盘导航、放大，缩小、清除临时图层、图层管理

图层管理里有这么几个图层：

在这里插入图片描述

其中，模拟实时数据，通过周期函数(setInterval)+随机数，模拟了一下实时数据曲线

需要的一些图片在里面：

链接：https://pan.baidu.com/s/1sevu45p9-Tiho-OPNJ6viQ
提取码：gkjs
在components文件夹里新建tool.vue文件，代码如下：

<!--地图工具-->
<template>
  <div class="tools">
    <div v-for="(item, i) in tools"
         :key="i"
         type="primary"
         size="mini"
         @mouseenter="addPoint(i)"
         @mouseleave="removePoint()"
         :title="item.text"
         @click="handleClick(item.excuteScript)">
      <img v-if="i == toolHighLightInex || i == toolClick"
           :src="item.hover_bg"
           :alt="item.text"
           width="24px"
           height="24px"
           style="padding: 2px 0 0 0" />
      <img v-else
           :src="item.icon"
           :alt="item.text"
           width="24px"
           height="24px"
           style="padding: 2px 0 0 0" />
    </div>
  </div>
</template>
<script>
import layerControl from "./layerControl";

export default {
  data () {
    return {
      layerControlIndex: "",
      mapLocationIndex: "",
      legendIndex: "",
      toolHighLightInex: -1,
      toolClick: -1,
      tools: [
        {
          hover_bg: require("../assets/images/gjl-7-quanpingxianshi_h.png"),
          icon: require("../assets/images/gjl-7-quanpingxianshi.png"),
          text: "恢复默认地图",
          excuteScript: "zoom2Fullextent",
        },
        {
          hover_bg: require("../assets/images/gjl-6-manyou_h.png"),
          icon: require("../assets/images/gjl-6-manyou.png"),
          text: "键盘导航",
          excuteScript: "keyboardNavigation",
        },
        {
          hover_bg: require("../assets/images/gjl-2-fangda_h.png"),
          icon: require("../assets/images/gjl-2-fangda.png"),
          text: "放大",
          excuteScript: "zoomOut",
        },
        {
          hover_bg: require("../assets/images/gjl-3-suoxiao_h.png"),
          icon: require("../assets/images/gjl-3-suoxiao.png"),
          text: "缩小",
          excuteScript: "zoomIn",
        },
        {
          hover_bg: require("../assets/images/gjl-1-qingchu_h.png"),
          icon: require("../assets/images/gjl-1-qingchu.png"),
          text: "清除临时图层",
          excuteScript: "clearTempLayer",
        },
        {
          hover_bg: require("../assets/images/gjl-8-tuceng_h.png"),
          icon: require("../assets/images/gjl-8-tuceng.png"),
          text: "图层管理",
          excuteScript: "layerControl",
        },
      ],
    };
  },
  methods: {
    handleClick (method) {
      this[method]();
    },
    //恢复默认地图
    zoom2Fullextent: function () {
      this.toolClick = -1;
      let map = window.map
      //var layer = map.getLayer(map.layerIds[0]);
      // map.setExtent(layer && layer.fullExtent);
      var extent = new esri.geometry.Extent({
        "xmax": 117.14737621710205,
        "xmin": 117.10197178289795,
        "ymax": 36.67250943927002,
        "ymin": 36.641524560729984,
        "spatialReference": { "wkid": 4490 }
      });
      map.setExtent(extent);
      this.toolClick = 0;
    },
    //键盘导航
    keyboardNavigation: function () {
      if (this.toolClick == -1) {
        let map = window.map
        map.enableKeyboardNavigation()
        this.toolClick = 0
      }
      else {
        let map = window.map
        map.disableKeyboardNavigation()
        this.toolClick = -1
      }

    },
    //放大
    zoomOut: function () {
      this.toolClick = -1;
      let map=window.map
      var extent =map.extent;
      var newExtent = extent.expand(0.5);
      map.setExtent(newExtent);
      this.toolClick = 2;
    },
    //缩小
    zoomIn: function () {
      this.toolClick = -1;
      let map=window.map
      var extent = map.extent;
      var newExtent = extent.expand(2);
      map.setExtent(newExtent);
      this.toolClick = 3;
    },
    //隐藏图层
    clearTempLayer: function () {
      this.toolClick = -1;
      let map=window.map
      //隐藏地图弹窗
      map.infoWindow.hide()
      //遍历图层隐藏
      let layerIds = map.graphicsLayerIds;
      for (var i = 0; i < layerIds.length; i++) {
        let layer = map.getLayer(layerIds[i]);
        if (layer.visible == true) {
          layer.setVisibility(false);
        }
      }
      this.toolClick = 6;
    },
    //图层管理
    layerControl: function () {
      this.toolClick = -1;
      if (this.layerControlIndex != "") {
      } else {
        this.layerControlIndex = this.$layer.iframe({
          content: {
            content: layerControl,
            parent: this,
          },
          area: ["200px", "300px"],
          offset: [window.screenLeft + document.body.clientWidth - 140, 300],
          title: "图层管理",
          maxmin: false,
          shade: false,

          shadeClose: false,
          cancel: () => {
            //关闭事件
            (this.layerControlIndex = ""), this.$layer.close(this.layerid);
            if (this.toolClick == 7) {
              this.toolClick = -1;
            }
          },
        });
      }
      this.toolClick = 7;
    },
    addPoint: function (i) {
      let _this = this;
      _this.toolHighLightInex = i;
    },
    removePoint: function () {
      let _this = this;
      _this.toolHighLightInex = -1;
    },
  },
};
</script>
<style scoped>
.tools {
  display: flex;
  justify-content: center;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
  width: 29px;
  margin: 0;
  padding: 0;
}
.tools > div {
  padding: 3px 8px;
  background-color: #1f5f9a;
  border-left: 1px solid #3f77a5;
}
.tools > div:first-child {
  border-radius: 4px 0 0 4px;
  border-left: none;
}
.tools > div:last-child {
  border-radius: 0 4px 4px 0;
}
.tools > div:hover {
  cursor: pointer;
  background-color: #539ae2;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216

同样在此文件夹中，新建layerControl.vue文件，代码如下：

<!--图层控制-->
<template>
  <div>
    <el-tree :data="data"
             show-checkbox
             node-key="id"
             @check="CheckLayer"
             :default-expanded-keys="[1,2]"
             :default-checked-keys="CheckedLayers"
             :props="defaultProps">
    </el-tree>
  </div>
</template>
<script>
export default {
  data () {
    return {
      CheckedLayers:window.checkedLayers,    //默认选中节点
      data: [{
        id: 1,
        label: '热力图',
        excutScript: 'checkedRLT'
      }, {
        id: 2,
        label: '天地图',
        children: [{
          id: 21,
          label: '地形数据',
          excutScript: 'checkedDX'
        }, {
          id: 22,
          label: '矢量标注',
          excutScript: 'checkedBZ'
        }]
      },{
        id:3,
        label:'模拟实时数据监测',
        excutScript: 'checkedMONITOR'
      }
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      }
    }
  },
  components:{
  },
  methods: {
    /**
     * 选中/取消选中图层
     * @ node 点击节点
     * @ selected 当前选中的所有节点
     */
    CheckLayer (node, selected) {
      let _this = this;
      window.checkedLayers=selected.checkedKeys;
      if (node.children) {
        node.children.forEach(function (item) {       
          _this.applyEvent(item, selected.checkedKeys.indexOf(item.id) != -1)
        })
      } else {
        _this.applyEvent(node, selected.checkedKeys.indexOf(node.id) != -1)
      }
    },
    /**
     * 触发事件
     * @ treeNode 点击节点
     * @ visible  图层是否显示
     */
    applyEvent (treeNode, visible) {
      let eventName=treeNode.excutScript
      let _this = this;
        if(eventName=='checkedRLT'||eventName=='checkedDX'||eventName=='checkedBZ'||eventName=='checkedMONITOR'){
          _this[eventName](visible);
        }
    },
    //热力图
    checkedRLT (visible) {
      let map = window.map
      var layer_rlt = map && map.getLayer('rlt')
      layer_rlt && layer_rlt.setVisibility(visible)
    },
    //天地图地形
    checkedDX (visible) {
      var map = window.map;
      var layer_dx = map.getLayer("Tianditu");
      layer_dx&&layer_dx.setVisibility(visible);  
    },
    //天地图标注
    checkedBZ (visible) {
      var map = window.map;
      var layer_bz = map.getLayer("Tianditu2");
      layer_bz&&layer_bz.setVisibility(visible);
    },
    //模拟实时数据
    checkedMONITOR (visible) {
      var map = window.map;
      var layer_monitor = map.getLayer("monitor");
      layer_monitor&&layer_monitor.setVisibility(visible);
    },
    
  },
  mounted(){
  }
}
</script>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

config.js里添加一句代码：

window.checkedLayers=[2,21,22]

Home.vue修改为：

<template>
  <div class="home">
    <header class="header">
      <div class="header_menu">
        <Menu ref="Menu"></Menu>
      </div>
      <div class="header_logout">
        <LogoutPartial />
      </div>
    </header>
    <main class="main">
      <mapView></mapView>
    </main>
    <footer>
      <toolsView/>
    </footer>
  </div>
</template>

<script>
import Menu from './Menu.vue'    //导航菜单组件
import mapView from './Map.vue'  //地图组件
import LogoutPartial from './LogoutPartial.vue'    //退出登录组件
import toolsView from './tool.vue'     //地图工具组件
export default {
  components: {
    Menu,
    mapView,
    LogoutPartial,
    toolsView
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header{
  margin:0;height:85px;width:100%;position:fixed;z-index: 10;
}
.header_logout {
  right: 0px;
}
.home,
main {
  height: 100%;
}
.main,.header_menu{
  position:relative;
}
footer {
  text-align: center;
  position: absolute;
  bottom: 10px;
  left: 10px;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

Map.vue修改为：

<template>
  <div class="mapContainer">
    <!-- 地图容器 -->
    <div ref="viewDiv"
         class="view">
    </div>
    <!--地图要素-->
    <div class="infoBox">
      <span v-text="mouseposition"
            class="positionInfo">地图级别---</span>
      <span v-text="mapextent"
            class="positionInfo">坐标---</span>
    </div>
  </div>
</template>
<script>
import { getData } from '../api/api'
import esriLoader from 'esri-loader'  //地图加载器
import moniterVue from '../views/DataMonitor.vue'
import monitor_png from '../assets/images/video.png'
export default {
  data () {
    return {
      mouseX: null,
      mouseY: null,
      extent: null,
      dataList_rlt: [],
      monitor_png: monitor_png,
    };
  },
  computed: {
    mouseposition: function () {
      return "坐标：" + this.mouseX + "," + this.mouseY;
    },
    mapextent: function () {
      return "地图级别：" + this.extent;
    }
  },
  mounted () {
    //初始化地图
    this.arcgisInit(this.$refs.viewDiv);
  },
  methods: {
    /**
     * 初始化地图
     */
    arcgisInit (div) {
      var that = this;
      //arcgis api js文件
      const options =
      {
        url: window.arcjsUrl
      };
      //加载arcgis api css文件
      esriLoader.loadCss(window.arcCssUrl);
      //加载模块
      esriLoader
        .loadModules(
          [
            "esri/map",
            "esri/layers/TileInfo",
            "esri/layers/WebTiledLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
          ],
          options
        )
        .then(([
          Map
        ]) => {
          //地图中心点
          var mapPoint = new esri.geometry.Point([117.124674, 36.657017], new esri.SpatialReference({ wkid: 4490 }));
          //地图参数
          var config = {
            width: "100%",
            logo: false,
            zoom: 4,
            slider: false,
            fadeOnZoom: true,
            center: mapPoint
            //force3DTransforms: true
          };
          //创建地图
          var map = new esri.Map(div, config); //ersi.Map类是一种容器，其中可以放置图层等。div为显示地图的DIV；config为地图相关参数设置
          //window属性上定义变量map,内容为新创建的地图对象map
          window.map = map
          //通过瓦片形式加载天地图，设定瓦片信息
          var tileInfo = new esri.layers.TileInfo({
            "rows": 256,//瓦片行编号
            "cols": 256,//瓦片列编号
            "compressionQuality": 0,
            "origin": {
              "x": -180,
              "y": 90
            },
            "spatialReference": {
              "wkid": 4490
            },
            "lods": [
              {
                "level": 2,//level:当前缩放级别,包括两个参数：resolution:比例尺和scale:分辨率
                "resolution": 0.3515625,
                "scale": 147748796.52937502
              },

              {
                "level": 3,
                "resolution": 0.17578125,
                "scale": 73874398.264687508
              },

              {
                "level": 4,
                "resolution": 0.087890625,
                "scale": 36937199.132343754
              },

              {
                "level": 5,
                "resolution": 0.0439453125,
                "scale": 18468599.566171877
              },

              {
                "level": 6,
                "resolution": 0.02197265625,
                "scale": 9234299.7830859385
              },

              {
                "level": 7,
                "resolution": 0.010986328125,
                "scale": 4617149.8915429693
              },

              {
                "level": 8,
                "resolution": 0.0054931640625,
                "scale": 2308574.9457714846
              },

              {
                "level": 9,
                "resolution": 0.00274658203125,
                "scale": 1154287.4728857423
              },

              {
                "level": 10,
                "resolution": 0.001373291015625,
                "scale": 577143.73644287116
              },

              {
                "level": 11,
                "resolution": 0.0006866455078125,
                "scale": 288571.86822143558
              },

              {
                "level": 12,
                "resolution": 0.00034332275390625,
                "scale": 144285.93411071779
              },

              {
                "level": 13,
                "resolution": 0.000171661376953125,
                "scale": 72142.967055358895
              },

              {
                "level": 14,
                "resolution": 8.58306884765625e-005,
                "scale": 36071.483527679447
              },

              {
                "level": 15,
                "resolution": 4.291534423828125e-005,
                "scale": 18035.741763839724
              },

              {
                "level": 16,
                "resolution": 2.1457672119140625e-005,
                "scale": 9017.8708819198619
              },

              {
                "level": 17,
                "resolution": 1.0728836059570313e-005,
                "scale": 4508.9354409599309
              },

              {
                "level": 18,
                "resolution": 5.3644180297851563e-006,
                "scale": 2254.4677204799655
              }
            ]
          });
          /**
           * 添加底图
           * @baseMap 矢量底图
           * @baseMapMarker 地图标注
           */
          //经纬度矢量地图瓦片的URL: http://t4.tianditu.com/DataServer?T=vec_c&X=27&Y=3&L=5
          //域名中的 t4 部分代表子域字段，X是列编号，Y是行编号 ，L是当前缩放级别。对这几个部分用列表里的参数替换，后面再加上key,就变成了下面的样子
          var baseMap = new esri.layers.WebTiledLayer("http://{subDomain}.tianditu.com/DataServer?T=vec_c&X={col}&Y={row}&L={level}&tk=01d49b21f6fe3cc75c89d1b23de98fe0", {
            "copyright": "Tianditu",
            "id": "Tianditu",
            "subDomains": ["t0", "t1", "t2"],//经查询天地图瓦片分别有t0,t1,t2,t3,t4,t5,t6,t7八个子域
            "tileInfo": tileInfo
          });
          //添加矢量底图
          map.addLayer(baseMap);
          //同上
          var baseMapMarker = new esri.layers.WebTiledLayer("http://{subDomain}.tianditu.com/DataServer?T=cva_c&X={col}&Y={row}&L={level}&tk=01d49b21f6fe3cc75c89d1b23de98fe0", {
            "copyright": "Tianditu",//版权，Web平铺层提供程序的归属。它显示在网络地图的归属中。将图层添加到Web地图时用户所需的输入。
            "id": "Tianditu2",//图层的唯一标识字符串。
            "subDomains": ["t0", "t1", "t2"],//子域，如果检测到子域，则必须指定它们。地图查看器通过解析{subDomain}的templateURL值来检测Web Tiled图层是否具有子域。
            "tileInfo": tileInfo //包含空间参考和图层的平铺方案。通常从WMTS OGC Web服务检索。如果缺少该图层，则必须使用WGS 1984 Web Mercator（辅助球）拼贴方案。
          });
          //添加矢量标注
          map.addLayer(baseMapMarker);
          //设置地图中心点
          map.centerAt(new esri.geometry.Point({
            "x": 117.124674,
            "y": 36.657017,
            "spatialReference": {
              "wkid": 4490
            }
          }), 13);
          //设置地图级别
          map.setLevel(13);
          let para = {}
          //新建实时数据图层
          var layer_monitor = new esri.layers.GraphicsLayer({ id: 'monitor' })
          //热力图及实时数据图层
          getData(para).then((res) => {
            this.dataList_rlt = res.data.response.AllData
            var features = []
            for (let i = 0; i < this.dataList_rlt.length; i++) {
              //如果要显示标注，需要有坐标信息
              if (this.dataList_rlt[i].X != 0 && this.dataList_rlt[i].Y != 0) {
                //创建几何点
                var pt_monitor = new esri.geometry.Point([this.dataList_rlt[i].X, this.dataList_rlt[i].Y], new esri.SpatialReference({ wkid: 4490 }));
                var pointSymbol = new esri.symbol.PictureMarkerSymbol(monitor_png, 20, 20);
                //定义graphic的名称-值对
                var attr = {
                  "Name": this.dataList_rlt[i].Name,
                  "Num": this.dataList_rlt[i].Num,
                  "Note": this.dataList_rlt[i].Note,
                }
                var graphic_monitor = new esri.Graphic(pt_monitor, pointSymbol, attr);
                layer_monitor.add(graphic_monitor);
                //手动构建热力图所用几何对象(和注释部分同等效果)
                var graphic_rlt = {
                  "attributes": {
                    "OBJECTID": i,
                    "X": this.dataList_rlt[i].X,
                    "Y": this.dataList_rlt[i].Y,
                    "LEVEL": this.dataList_rlt[i].Num,
                  },
                  "geometry": {
                    "x": this.dataList_rlt[i].X,
                    "y": this.dataList_rlt[i].Y
                  }
                };
                //将标注点对象添加到features数组里
                features.push(graphic_rlt);
              }

            }
            /**
              * 构建数量热力图
              * @param {Object} features 点图形数组
              * @param {Object} spatialReference 空间参考
              * */
            //一、手动构建FeatureLayer
            //1，构建fields
            var fields = [
              { name: "OBJECTID", type: "esriFieldTypeOID", alias: "OBJECTID", editable: true },
              { name: "X", type: "esriFieldTypeDouble", alias: "X", length: 20, editable: true },
              { name: "Y", type: "esriFieldTypeDouble", alias: "Y", length: 20, editable: true },
              { name: "LEVEL", type: "esriFieldTypeDouble", alias: "LEVEL", length: 20, editable: true }
            ];
            //2,定义空间参考 
            var spatialReference = new esri.SpatialReference({ wkid: 4490 });
            //3,构建featureSetJson
            var featureSetJson = {
              displayFieldName: "",
              geometryType: "esriGeometryPoint",
              fieldAliases: {
                OBJECTID: "OBJECTID",
                X: "X",
                Y: "Y",
                LEVEL: "LEVEL"
              },
              fields: fields,
              spatialReference: spatialReference,
              features: features
            };
            //4，构建FeatureSet
            var featuresSet = new esri.tasks.FeatureSet(featureSetJson);
            //5，构建layerDefinition
            var layerDefinition = {
              "geometryType": "esriGeometryPoint",
              "fields": fields
            };
            //6，构建featureCollection
            var featureCollection = {
              layerDefinition: layerDefinition,
              featureSet: featuresSet
            };
            //创建featureLayer
            var featureLayer = new esri.layers.FeatureLayer(featureCollection, {
              showLabels: true,
              id: "rlt",          //图层id
              outFields: ["*"],
            });
            //二、渲染
            //创建热力图渲染器
            var heatmapRenderer = new esri.renderer.HeatmapRenderer({
              //colors: ["rgba(255, 0, 0, 0)", "rgb(0, 255, 0)", "rgb(255, 255, 0)", "rgb(255, 0, 0)"],
              blurRadius: 24,
              //field: "LEVEL",     //作为数据点权重值的属性字段，根据其进行渲染
              colorStops: [
                { ratio: 0, color: "rgb(250, 250, 0,0)" },
                { ratio: 0.5, color: "rgb(250, 150, 0)" },
                { ratio: 0.85, color: "rgb(255, 50, 0)" }],
            });
            //设置渲染方式
            featureLayer.setRenderer(heatmapRenderer);
            //将热力图featureLayer图层添加到地图上
            window.map.addLayer(featureLayer);
            window.map.addLayer(layer_monitor);
            //为模拟实时数据图层添加单击事件
            var timer = null;
            var L = this.$layer;
            var T = this;
            //单击事件(弹窗)
            layer_monitor.on('click', (e) => {
              console.log(e)
              //清除第一次的单击事件
              clearTimeout(timer);
              //给单击事件添加一个计时器,当单击事件还没有触发时,取消这个事件,最后就只有双击事件的内容触发了
              //setTimeout 计时器(延时器)
              timer = setTimeout(function () {
                //在弹出窗体前关闭所有layer窗体
                //L.closeAll();
                //弹出窗体
                L.iframe({
                  content: {
                    content: moniterVue,  //传递的组件对象
                    parent: T,           //当前的组件对象
                    data: {                  //传递的参数
                      info: { data: e.graphic.attributes }
                    }
                  },
                  area: ["510px", "510px"],
                  title: e.graphic.attributes.Name + "-数据监测",
                  //offset: 'right top',
                  maxmin: true,
                  shade: false,
                  shadeClose: false,
                  resize: true,

                });
              }, 500, e)    //将参数e传递到setTimeout函数里
            })
            layer_monitor.setVisibility(false)
            featureLayer.setVisibility(false)
          })
          //关闭键盘导航
          map.disableKeyboardNavigation()
          //监听地图缩放事件
          map.on('extent-change', that.onExtentChange);
          //监听鼠标移动事件
          map.on('mouse-move', that.mapMouseMove);
        })


    },
    /**
     * 获取地图坐标
     */
    mapMouseMove (evt) {
      [this.mouseY, this.mouseX] = [evt.mapPoint.y.toFixed(3), evt.mapPoint.x.toFixed(3)];
    },
    /**
     * 获取地图地图级别
     */
    onExtentChange (evt) {
      this.extent = evt.lod.level
    }
  },
};
</script>

<style scoped>
.mapContainer {
  width: 100%;
  height: 100%;
}
.view {
  width: 100%;
  height: 100%;
}
.infoBox {
  position: absolute;
  bottom: 20px;
  right: 10px;
  height: 30px;
  background-color: #1f5f9a;
  opacity: 0.95;
}

.infoBox .positionInfo {
  color: white;
  font-size: 0.5em;
  line-height: 30px;
  margin: 0 10px;
}
.infoBox .map-legend {
  cursor: pointer;
}
.blurInfo {
  display: none;
  position: absolute;
  top: 10px;
  right: 5px;
  font-size: 1.25em;
  font-family: monospace;
  color: #4c4c4c;
  width: 240px;
  background-color: #ffffff;
  padding: 10px;
  border: 2px solid #57585a;
  border-radius: 20px;
}
.blurInfo p span {
  background-color: #ffffff;
  padding: 0 5px;
  border-radius: 5px;
}
.blurInfo input[type="range"] {
  width: 100%;
  display: block;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454

在views文件夹里新建DataMonitor.vue文件，代码如下：

<!-- 数据监测 -->
<template>
  <section>
    <el-tabs type="border-card">
      <el-tab-pane label="数据监测实时曲线">
        <!-- 图表 -->
        <div ref="chart"
             style="width:460px;height:375px;">
          <PieChart ref="echarts"></PieChart>
        </div>
      </el-tab-pane>
      <el-tab-pane label="在线视频"><video controls="controls"
               width="460px"
               height="375px">
          <source src='../assets/testVideo.mp4'
                  type="video/mp4">
        </video></el-tab-pane>
    </el-tabs>
  </section>
</template>

<script>
import PieChart from "./MonitorChart.vue"; //引入自定义Echart饼图组件
export default {
  components: {  PieChart },
  data () {
    return {
      pieChart: {
        radius: '25%',
        pieData: [],
        pieDataName: [],

      },
      form: {}
    }
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    layerid: {
      type: String,
      default: ""
    },
    lydata: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  methods: {
  },
  mounted () {
    //传递来的数据
    this.form = this.info;
    //把你所需要数据赋值给data中的pieChart对象，然后获取对象中的键值
    var { radius, pieData, pieDataName } = this.pieChart;
    pieData = this.form.data;
    pieDataName = this.form.data.NAME;
    //数据渲染图表
    this.$refs.echarts.initChart(radius, pieData, pieDataName)
  }
}

</script>

<style scoped>
.el-range-editor--mini.el-input__inner {
  height: 28px;

  left: 20px;
  top: 30px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

同样在此文件夹中，新建MonitorChart.vue文件，代码如下：

<!--自定义Echart折线图组件(水质实时)-->
<template>
  <div :class="className"
       :id="chart"
       :style="{width: '450px', height: '300px'}"></div>
</template>

<script>
import echarts from 'echarts';
require('echarts/theme/macarons'); // echarts 主题
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },

  },
  data () {
    return {
      legendData: [],
      chart: null,

    };
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart (radius, pieData, pieDataName) {
      //基于准备好的dom，初始化echarts实例
      let chart = echarts.init(this.$el, 'macarons');
      //y轴
      //这里定义折线,用于图表
      var ydata =
        [{
          name: pieData.Name,
          //line为折线类型
          type: 'line',
          data: [],
        },
        ];
      //x轴
      //定义数组
      var xdata = new Array();
      var arrtitle = [pieData.Name];//标题
      var now = new Date();//获取当前时间
      xdata.push(now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
      //开始模拟实时数据
      start()
      //图表停止
      function stop () {
        clearInterval(dt);
      }
      //图表开始
      function start () {
        dt = setInterval(function () {
          //为x值数组赋值
          var now = new Date();
          xdata.push(now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
          //当x值数组长度大于5就去除数组中第一个数组
          if (xdata.length > 5) {
            xdata.shift();
          }
          //为y值数组赋值
          for (var i = 0; i < arrtitle.length; i++) {

            if (ydata[i].name == pieData.Name) {
              ydata[i].data.push(pieData.Num + Math.random() * 100);
            }
          }
          //当y值数组长度大于5就去除数组中第一个元素
          if (ydata[0].data.length > 5) {
            ydata[0].data.shift();
          }
          //日期文本
          var dateText = now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日";
          //渲染
          chart.setOption({
            //标题组件
            title: [
              //第一个标题
              {
                left: '10%',
                top: '5%',
                textStyle: {
                  fontSize: 10
                },
                text: pieData.Name
              },
              //日期标题
              {
                top: '0%',
                left: '80%',
                textStyle: {
                  fontSize: 10
                },
                text: dateText
              }
            ],
            //鼠标提示
            tooltip: {
              trigger: 'axis',
              formatter: function (params) {
                return params[0].value
              },
              axisPointer: {
                animation: false
              }
            },
            //工具栏
            toolbox: {
              show: true,
              feature: {
                //数据视图
                dataView: { readOnly: false },
                //保存为图片
                saveAsImage: {}
              },
              top: '5%',
              left: '80%',
            },
            //图例
            legend: {
              data: [pieData.Name]
            },
            //x轴
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: xdata
              },
            ],
            //y轴
            yAxis: [
              {
                type: 'value',
                data: ydata,
                boundaryGap: true,
              },
            ],
            //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
            grid: [{
              bottom: '60%'
            }, {
              top: '60%'
            }],
            //系列列表。每个系列通过 type 决定自己的图表类型
            series:
              [{
                type: ydata[0].type,
                data: ydata[0].data,
                name: ydata[0].name
              },
              ],
          });
        }, 1000);

      }
      //周期函数，周期为1秒
      var dt = setInterval(function () {
        //为x值数组赋值
        var now = new Date();
        xdata.push(now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
        //当x值数组长度大于5就去除数组中第一个数组
        if (xdata.length > 5) {
          xdata.shift();
        }
        //为y值数组赋值
        for (var i = 0; i < arrtitle.length; i++) {

          if (ydata[i].name == pieData.Name) {
            ydata[i].data.push(pieData.Num+ Math.random() * 100);     //(+ + Math.random() * 100)
          }
        }
        //当y值数组长度大于5就去除数组中第一个元素
        if (ydata[0].data.length > 5) {
          ydata[0].data.shift();
        }
        //日期文本
        var dateText = now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日";
        //渲染
        chart.setOption({
          //标题组件
          title: [
            //第一个标题
            {
              left: '10%',
              top: '5%',
              textStyle: {
                fontSize: 10
              },
              text: pieData.Name
            },
            //日期标题
            {
              top: '0%',
              left: '80%',
              textStyle: {
                fontSize: 10
              },
              text: dateText
            }
          ],
          //鼠标提示
          tooltip: {
            trigger: 'axis',
          },
          //工具栏
          toolbox: {
            show: true,
            feature: {
              //数据视图
              dataView: { readOnly: false },
              //保存为图片
              saveAsImage: {}
            },
            top: '5%',
            left: '80%',
          },
          //图例
          legend: {
            data: [pieData.Name]
          },
          //x轴
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: xdata
            },
          ],
          //y轴
          yAxis: [
            {
              type: 'value',
              data: ydata,
              boundaryGap: true,
            },
          ],
          //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴
          grid: [{
            bottom: '10%'
          }, {
            top: '10%'
          }],
          //系列列表。每个系列通过 type 决定自己的图表类型
          series:
            [
              //监测项1
              {
                type: ydata[0].type,
                data: ydata[0].data,
                name: ydata[0].name,
                symbolSize: 10,
                markLine: {
                  symbol: ['none', 'arrow'], //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头
                  label: {
                    position: "end", //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束
                    formatter: '警戒值'
                  },
                }
              },
            ],
        });
      }, 1000);
    },
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279

效果：

在这里插入图片描述

最后补充一个vue-router规则下 history模式在iis服务器上配置的问题

https://www.cnblogs.com/LMJBlogs/p/7988900.html

好，这一篇就到这里吧，再见

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/109970