添加成果展示-地图

ruoyi-ui/src/views/map/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <div class="map-index">
+    <div id="mapChart"></div>
+    <div class="map-left">
+      <div class="map-left-top">
+        <div class="left-top-title"></div>
+      </div>
+      <div class="map-left-center">
+        <div class="left-center-title"></div>
+      </div>
+      <div class="map-left-bottom">
+        <div class="left-bottom-title"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import 'ol/css';
+import {ScaleLine, defaults as defaultControls} from 'ol/control';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import TileLayer from "ol/layer/Tile";
+import { XYZ, Vector as VectorSource } from 'ol/source.js';
+import VectorLayer from "ol/layer/Vector";
+import { LineString, Point } from "ol/geom";
+import { Icon, Style, Text,Circle } from 'ol/style';
+import Fill from "ol/style/Fill";
+import Feature from 'ol/Feature';
+import Stroke from "ol/style/Stroke";
+import Overlay from 'ol/Overlay';
+
+const mapChart = ref(null);
+const mapCenter = ref([121.472644, 31.231706]);
+const mapZoom = ref(10);
+const mapCheckbox = ref({
+  wyhChecked: true,
+  tphChecked: true,
+  xmhChecked: false,
+  xmhChecked_js: false,
+  wyhChecked_lh: false,
+  zdChecked: false,
+  lzspChecked: false,
+  thsyChecked: false,
+  thlzChecked: false,
+  zysyChecked: false,
+  wrjzysyChecked: false,
+});
+
+onMounted(() => {
+  initMap();
+});
+
+const initMap = () => { 
+  let vecLayer = new TileLayer({
+    source: new XYZ({
+      url: "http://t0.tianditu.gov.cn/vec_w/wmts?" +
+        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
+        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
+    }),
+  });
+  let cvaLayer = new TileLayer({
+    source: new XYZ({
+      url: "http://t0.tianditu.gov.cn/cva_w/wmts?" +
+        "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
+        "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" +
+        "&tk=9bb941214f10fbf9a3eab43f45cb2b7e",
+    }),
+  });
+  mapChart.value= new Map({
+    target: 'mapChart',
+    view: new View({
+      center: mapCenter.value,
+      zoom: mapZoom.value,
+      minZoom: 3,
+      maxZoom: 16,
+      projection: 'EPSG:4326',
+    }),
+    layers: [vecLayer, cvaLayer],
+    controls: defaultControls({
+      zoom: false,//不显示放大放小按钮
+      rotate: false,//不显示指北针控件
+      attribution: false,//不显示右下角的地图信息控件
+      scaleLine:false,//不显示比例尺控件
+    })
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.map-index{
+  height: 100%;
+  width: 100%;
+  position: relative;
+  #mapChart{
+    height: 100%;
+    width: 100%;
+  }
+  .map-left{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 458px;
+    background: url("@/assets/map/img/left-box.png");
+    background-size: 100% 100%;
+    .map-left-top{
+      width: 100%;
+      height: 33%;
+      .left-top-title{
+        width: 88%;
+        height: 30px;
+        margin: 30px 0 10px 6%;
+        background-image: -webkit-linear-gradient(left, rgba(18, 150, 219, 1), rgba(71, 175, 229, 0));
+      }
+    }
+    .map-left-center{
+      width: 100%;
+      height: 33%;
+      .left-center-title{
+        width: 88%;
+        height: 30px;
+        margin: 0 0 10px 6%;
+        background-image: -webkit-linear-gradient(left, rgba(18, 150, 219, 1), rgba(71, 175, 229, 0));
+      }
+    }
+    .map-left-bottom{
+      width: 100%;
+      height: 33%;
+      .left-bottom-title{
+        width: 88%;
+        height: 30px;
+        margin: 0 0 10px 6%;
+        background-image: -webkit-linear-gradient(left, rgba(18, 150, 219, 1), rgba(71, 175, 229, 0));
+      }
+    }
+  }
+}
+</style>