fix

package.json

@@ -50,6 +50,7 @@
     "jsencrypt": "3.2.1",
     "moment": "^2.29.1",
     "nprogress": "0.2.0",
+    "ol": "^6.12.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",

src/components/map/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div style="width:100%;height:100%">
+    <div id="map" ref="rootmap"></div>
+  </div>
+</template>
+
+<script>
+import "ol/ol.css";
+import Map from "ol/Map";
+// import TileLayer from "ol/layer/Tile";
+// import ImageLayer from "ol/layer/Image";
+import View from "ol/View";
+// import ol from "ol";
+
+// import {getTopLeft, getWidth} from "ol/extent";
+
+// import ImageWMS from "ol/source/ImageWMS";
+// import WMTS from "ol/source/WMTS";
+// import TileWMS from "ol/source/TileWMS";
+// import WMTSTileGrid from "ol/tilegrid/WMTS";
+// ol.source.TileImage
+// ol.layer.Tile
+import {get as getProjection, transform} from "ol/proj";
+import {TileGrid} from "ol/tilegrid/TileGrid";
+import {TileImage} from "ol/source/TileImage";
+import {XYZ} from "ol/source";
+import {Tile} from "ol/layer";
+
+
+
+// import {Vector as SourceVec} from "ol/source";
+// import {Feature} from "ol";
+// import {LineString, Point} from "ol/geom";
+// import {Icon, Stroke, Style} from "ol/style";
+// import {Vector as LayerVec} from "ol/layer";
+
+
+export default {
+  props: {
+
+  },
+  data() {
+    return {
+      map: null,
+    };
+  },
+  mounted() {
+
+    this.initdev();
+
+
+
+    this.map.on("click", function (e) {
+
+
+    });
+
+
+    var view = this.map.getView();
+
+    view.on('change:resolution', function (e) {
+
+    });
+    view.on('change:center', function (e) {
+
+    });
+    this.map.on('moveend', function (e) {
+
+    });
+
+  },
+  methods: {
+    transpoints: function (points, type) {
+      if (false) {
+        return points;
+      } else {
+        if (type == 1) {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
+          });
+          return pp;
+        } else {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
+          });
+          return pp;
+        }
+      }
+    },
+
+    initdev: function () {
+
+      // function getWMTSLayer(url, layer) {
+      //   let key = "98ec3e37b32974c2d58ea1a790640fe7"
+      //   let projection = getProjection("EPSG:3857");
+      //   let projectionExtent = projection.getExtent();
+      //   let size = getWidth(projectionExtent) / 256;
+
+      //   function getResolutions() {
+      //     let resolutions = [];
+      //     for (let z = 1; z < 19; ++z) {
+      //       resolutions[z] = size / Math.pow(2, z);
+      //     }
+      //     return resolutions
+      //   }
+
+      //   return new TileLayer({
+      //     source: new WMTS({
+      //       url: url,
+      //       layer: layer,
+      //       style: "default",
+      //       matrixSet: "w",
+      //       format: "tiles",
+      //       tileGrid: new WMTSTileGrid({
+      //         origin: getTopLeft(projectionExtent),
+      //         resolutions: getResolutions(),
+      //         matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
+      //       }),
+      //     }),
+
+      //   })
+
+      // }
+
+      // var projection = getProjection("EPSG:3857");
+
+
+
+      // const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');
+
+
+
+      // var map = new Map({
+      //   target: 'map',
+      //   layers: [
+      //     ign,
+      //     getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
+      //   ],
+      //   view: new View({
+      //     projection: projection
+      //   })
+      // });
+
+
+      var projection = getProjection("EPSG:3857");
+   const satellite = new Tile({ // 卫星地图
+    visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
+    source: new XYZ({
+      attributions: '',
+      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1&ltype=10'
+    })
+  })
+  const street = new Tile({ // 街道地图
+    visible: true, // 显示或隐藏（用于切换地图图层（卫星切换街道））
+    source: new XYZ({
+      attributions: '',
+      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+    })
+  })
+  // 创建地图
+  const map = new Map({
+    target: 'map',
+    layers: [ // 图层放置（类似有卫星图层，街道图层等）
+      satellite,
+      street
+    ],
+    view: new View({
+      zoom: 11, // 当前缩放
+      maxZoom: 16, // 最大缩放
+      minZoom: 8, // 最小缩放
+      projection: 'EPSG:4326',
+      center: [121.65523,31.892831], // 中心坐标
+    })
+  })
+
+  street.setVisible(false)
+    satellite.setVisible(true)
+
+      // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
+      this.map = map;
+      //  map.getView().setCenter(
+      //     [118.642876, 31.970445]
+      // );
+      // map.getView().setCenter(this.transpoints([
+      //   [118.642876, 31.970445]
+      // ], 0)[0]);
+      // map.getView().setZoom(13);
+    },
+
+  }
+};
+</script>
+
+<style scoped>
+#map {
+  height: 100%;
+}
+
+</style>

src/views/bigscreen/index.vue

@@ -1,5 +1,9 @@
 <template>
-    <div class="header">
+<div style="width:100%;height:100%;position:relative">
+  <div style="width:100%;height:100%;padding-top:5.2rem;position:absolute">
+      <mapdiv></mapdiv>
+    </div>
+   <div class="header">
         <div class="title">
             <img src="../../assets/images/启东市铁路沿线综合治理信息化管理平台@2x.png" />
         </div>
@@ -15,10 +19,16 @@
             <img src="../../assets/images/图层 9@2x.png" /><span>{{ currenttime }}</span>
         </div>
     </div>
+
+
+</div>
+
+
 </template>
 
 <script>
 import moment from "moment";
+import mapdiv from "../../components/map/index.vue"
 
 export default {
     name: "big",
@@ -28,6 +38,10 @@ export default {
             currentindex:1,
         };
     },
+    components:{
+      mapdiv
+
+    },
     mounted() {
         setInterval(() => {
             this.currenttime = moment().format("YYYY-MM-DD HH:mm:ss");
@@ -42,6 +56,7 @@ export default {
     background-size: 100% 100%;
     max-height: 5.2rem;
     position: relative;
+    z-index: 1;
     .title {
         margin-left: 1.4rem;
         img {
@@ -97,4 +112,9 @@ export default {
         }
     }
 }
+.ol-zoom-in,.ol-zoom-out{
+  display: none !important;
+
+}
+
 </style>