地图demo

epmet-oper-web/public/index.html

@@ -5,6 +5,8 @@
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico" />
+  <script src="https://map.qq.com/api/gljs?v=1.exp&key=XCUBZ-UYXCP-XZNDB-VI5P3-2Y3RO-6WBYO"></script>
+
   <!-- 站点配置 -->
   <script>
     window.SITE_CONFIG = {}

epmet-oper-web/src/views/modules/demo/mapDemo copy.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="div_total"
+       :style="{height:mapHeight+'px'}">
+    <div class="div_left">
+      <div class="div_search">
+        <el-input placeholder="输入要搜索的名称"></el-input>
+        <el-button type="primary"
+                   icon="el-icon-search"
+                   circle
+                   @click="searchMap"></el-button>
+
+      </div>
+      <div class="map"
+           id="app">
+      </div>
+    </div>
+    <div class="div_right"></div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+//定义事件处理方法
+var clickHandler = function (evt) {
+  var lat = evt.latLng.getLat().toFixed(6);
+  var lng = evt.latLng.getLng().toFixed(6);
+  console.log("您点击的的坐标是：" + lat + "," + lng);
+}
+
+// 定义地图中心点坐标
+var center = new window.TMap.LatLng(39.984120, 116.307484)
+// 定义map变量，调用 TMap.Map() 构造函数创建地图
+var map
+var search
+var markers
+var infoWindowList = Array(10);
+
+
+
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+
+  },
+
+  async mounted () {
+    this.initMap();
+
+  },
+  computed: {
+    mapHeight () {
+
+      return this.clientHeight - 130;
+
+    },
+    ...mapGetters(['clientHeight']),
+  },
+
+  methods: {
+    initMap () {
+      map = new window.TMap.Map(document.getElementById('app'), {
+        center: center, // 设置地图中心点坐标
+        zoom: 17.2, // 设置地图缩放级别
+        viewMode: '2D'
+        // pitch: 43.5, // 设置俯仰角
+        // rotation: 45 // 设置地图旋转角度
+      })
+      // var search = new window.TMap.service.Search({ pageSize: 10 });
+      // var markers = new window.TMap.MultiMarker({
+      //   map: map,
+      //   geometries: [],
+      // });
+      console.log(window.TMap)
+      console.log(window)
+
+      //Map实例创建后，通过on方法绑定点击事件
+      map.on("click", clickHandler)
+    },
+    searchMap () {
+
+    }
+
+
+  },
+  props: {
+
+  }
+}
+</script>
+<style>
+.div_total {
+  width: 100%;
+  display: flex;
+}
+.div_left {
+  width: 70%;
+  height: 100%;
+  position: relative;
+}
+
+.map {
+  height: 100%;
+}
+
+.div_search {
+  z-index: 9999;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+}
+
+/* .map {
+  width: 100%;
+  height: 400px;
+} */
+</style>

epmet-oper-web/src/views/modules/demo/mapDemo.vue

@@ -0,0 +1,122 @@
+<template>
+
+  <div class="div_total"
+       :style="{height:mapHeight+'px'}">
+    <!-- <div class="div_left"> -->
+    <!-- <div class="div_search">
+        <el-input placeholder="输入要搜索的名称"></el-input>
+        <el-button type="primary"
+                   icon="el-icon-search"
+                   circle
+                   @click="searchMap"></el-button>
+
+      </div> -->
+    <div id="map"
+         class="map"></div>
+  </div>
+  <!-- <div class="div_right"></div> -->
+  <!-- </div> -->
+
+</template>
+
+<script>
+import "ol/ol.css";
+import { transform } from 'ol/proj'
+import Map from "ol/Map";
+import OSM from "ol/source/OSM";
+import XYZ from "ol/source/XYZ";
+import TileLayer from "ol/layer/Tile";
+import View from "ol/View";
+
+import { mapGetters } from 'vuex'
+
+
+
+
+export default {
+  data () {
+    return {
+
+    }
+  },
+  components: {
+
+  },
+
+  async mounted () {
+    this.initMap();
+
+  },
+  computed: {
+    mapHeight () {
+
+      return this.clientHeight - 130;
+
+    },
+    ...mapGetters(['clientHeight']),
+  },
+
+  methods: {
+    initMap () {
+      //加载高德地图的数据源
+      var gaodeMapLayer = new TileLayer({
+        title: "高德地图",
+        source: new XYZ({
+          //指定url瓦片
+          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
+          wrapX: true//x方向平铺，也可以选择false
+        })
+      });
+
+      //创建地图容器
+      var map = new Map({
+        layers: [gaodeMapLayer],
+        //加载瓦片图层数据
+        view: new View({
+          //中心点坐标
+          center: [120.38071744447801, 36.059107012804446],
+          // projection: 'EPSG:3857',
+          projection: 'EPSG:4326',
+          zoom: 11,
+          minZoom: 10
+        }),
+        target: 'map'
+        //目标加载到map中
+      })
+
+      map.on('singleclick', function (e) {
+        console.log(e.coordinate)
+        console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
+
+      })
+    }
+
+
+  },
+  props: {
+
+  }
+}
+</script>
+<style>
+.div_total {
+  width: 100%;
+}
+.div_left {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.map {
+  height: 100%;
+}
+
+.div_search {
+  z-index: 9999;
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  display: flex;
+}
+</style>

epmet-oper-web/src/views/modules/productConfig/footbar/FootbarDefault111.vue

@@ -1,50 +0,0 @@
-<template>
-  <div>
-    <el-card shadow="never"
-             class="aui-card--fill">
-      <footbar-list ref="ref_footbarlist"
-                    :showFrom="'default'"
-                    :tableKeywork="'FootBar'"></footbar-list>
-    </el-card>
-  </div>
-</template>
-
-<script>
-
-import FootbarList from './FootbarList'
-
-
-
-
-export default {
-  data () {
-    return {
-
-    }
-  },
-  activated () {
-
-    this.$nextTick(() => {
-
-      this.$refs['ref_footbarlist'].doLayout() // 解决表格错位
-
-    })
-  },
-  components: {
-    FootbarList
-  },
-
-  mounted () {
-
-  },
-  computed: {
-
-  },
-  methods: {
-
-
-  }
-}
-</script>
-<style>
-</style>