主页添加

src/views/home/index.vue

@@ -0,0 +1,670 @@
+<template>
+  <div class="home-container">
+    <div id="mapContainer" style="width: 100%; height: 100%"></div>
+  </div>
+</template>
+<script setup lang="ts">
+import AMapLoader from '@amap/amap-jsapi-loader';
+import { ref, onMounted, reactive } from 'vue';
+const state = reactive({
+  map: null,
+  markers: [
+    {
+      name: '良吉站',
+      position: [103.259895, 36.741046],
+    },
+    {
+      name: '良吉二号站',
+      position: [103.258624, 36.739675],
+    },
+    {
+      name: '万泽站',
+      position: [103.263171, 36.738818],
+    },
+    {
+      name: '一号站',
+      position: [103.261093, 36.738017],
+    },
+    {
+      name: '五号站',
+      position: [103.262666, 36.736043],
+    },
+    {
+      name: '十号锅炉房',
+      position: [103.259629, 36.737354],
+    },
+    {
+      name: '二号站',
+      position: [103.258883, 36.736649],
+    },
+    {
+      name: '六号锅炉房',
+      position: [103.258253, 36.735324],
+    },
+    {
+      name: '八号站',
+      position: [103.265382, 36.736052],
+    },
+    {
+      name: '三号锅炉房',
+      position: [103.261836, 36.733769],
+    },
+    {
+      name: '华悦站',
+      position: [103.260856, 36.733824],
+    },
+    {
+      name: '十一号站',
+      position: [103.260617, 36.732225],
+    },
+    {
+      name: '十五号站',
+      position: [103.25851, 36.729362],
+    },
+    {
+      name: '四号站',
+      position: [103.263528, 36.730173],
+    },
+    {
+      name: '蓝星锅炉房',
+      position: [103.267519, 36.727559],
+    },
+    {
+      name: '西太华3站',
+      position: [103.268513, 36.726115],
+    },
+    {
+      name: '西太华2站',
+      position: [103.267139, 36.72566],
+    },
+    {
+      name: '西太华1站',
+      position: [103.267982, 36.723996],
+    },
+    {
+      name: '华光广场站',
+      position: [103.266893, 36.724245],
+    },
+    {
+      name: '亚新东区',
+      position: [103.266898, 36.723067],
+    },
+    {
+      name: '十四号锅炉房/亚新西区站/华光站',
+      position: [103.266013, 36.723226],
+    },
+    {
+      name: '兴勇站',
+      position: [103.265965, 36.721631],
+    },
+    {
+      name: '兆烽站',
+      position: [103.267177, 36.722396],
+    },
+    {
+      name: '金邦站',
+      position: [103.268727, 36.723063],
+    },
+    {
+      name: '博瑞站',
+      position: [103.270846, 36.724112],
+    },
+    {
+      name: '世纪城站',
+      position: [103.271597, 36.722516],
+    },
+    {
+      name: '西城区锅炉房',
+      position: [103.238322, 36.729221],
+    },
+    {
+      name: '高铁站',
+      position: [103.249563, 36.726556],
+    },
+    {
+      name: '九中站',
+      position: [103.252685, 36.723985],
+    },
+    {
+      name: '中医院综合楼',
+      position: [103.257588, 36.71649],
+    },
+    {
+      name: '中医院住院楼',
+      position: [103.256939, 36.716322],
+    },
+    {
+      name: '残联',
+      position: [103.258945, 36.712834],
+    },
+    {
+      name: '血站',
+      position: [103.258274, 36.712617],
+    },
+    {
+      name: '碧桂园',
+      position: [103.262812, 36.716027],
+    },
+  ],
+  polylines: [
+    {
+      polyline: [
+        [103.267809, 36.723174],
+        [103.266543, 36.725317],
+        [103.265954, 36.726407],
+        [103.265396, 36.727519],
+        [103.265037, 36.728233],
+        [103.264799, 36.728987],
+        [103.264098, 36.730408],
+        [103.263728, 36.731128],
+        [103.263507, 36.731464],
+        [103.263262, 36.731761],
+        [103.262639, 36.732363],
+        [103.262033, 36.73297],
+        [103.260645, 36.734268],
+        [103.259222, 36.735539],
+        [103.257753, 36.736772],
+        [103.262599, 36.74014],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.267847, 36.723297],
+        [103.266746, 36.725134],
+        [103.266223, 36.726073],
+        [103.26573, 36.727024],
+        [103.26512, 36.728206],
+        [103.264872, 36.728989],
+        [103.264734, 36.729285],
+        [103.26416, 36.730414],
+        [103.263866, 36.730972],
+        [103.263546, 36.731494],
+        [103.263317, 36.731775],
+        [103.261724, 36.733336],
+        [103.260086, 36.734847],
+        [103.259095, 36.735697],
+        [103.257727, 36.736859],
+        [103.262482, 36.740199],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.258236, 36.736431],
+        [103.25885, 36.736671],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.258239, 36.736365],
+        [103.258876, 36.736618],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.26088, 36.733815],
+        [103.26094, 36.73372],
+        [103.261066, 36.733778],
+        [103.261181, 36.733833],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.260855, 36.733798],
+        [103.260925, 36.733688],
+        [103.261196, 36.733816],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.260652, 36.732218],
+        [103.260743, 36.732043],
+        [103.262195, 36.732867],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.260604, 36.732192],
+        [103.260703, 36.731981],
+        [103.262196, 36.73281],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.263273, 36.731742],
+        [103.267075, 36.733891],
+        [103.266395, 36.735032],
+        [103.265791, 36.736029],
+        [103.265536, 36.735924],
+        [103.265447, 36.736055],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.263301, 36.731788],
+        [103.26697, 36.733892],
+        [103.266312, 36.735003],
+        [103.265744, 36.735902],
+        [103.265516, 36.735809],
+        [103.265378, 36.736005],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.263507, 36.730155],
+        [103.263624, 36.72999],
+        [103.264177, 36.730247],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.264209, 36.730324],
+        [103.263633, 36.730065],
+        [103.263553, 36.730174],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.263586, 36.731345],
+        [103.261944, 36.730563],
+        [103.258709, 36.728984],
+        [103.258493, 36.729348],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.263615, 36.731388],
+        [103.261176, 36.73022],
+        [103.259957, 36.729626],
+        [103.25934, 36.729331],
+        [103.25874, 36.729043],
+        [103.25854, 36.729376],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.26853, 36.726129],
+        [103.268227, 36.726672],
+        [103.266283, 36.72597],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.266256, 36.725847],
+        [103.268231, 36.726559],
+        [103.268487, 36.726102],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.266498, 36.725403],
+        [103.26714, 36.725637],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.266554, 36.725475],
+        [103.267115, 36.725674],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.263157, 36.73887],
+        [103.262134, 36.739813],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.266872, 36.724233],
+        [103.267202, 36.723672],
+        [103.267986, 36.723973],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.266918, 36.724232],
+        [103.267221, 36.723723],
+        [103.267958, 36.723996],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.265983, 36.721647],
+        [103.265512, 36.722432],
+        [103.271185, 36.724546],
+        [103.271791, 36.722613],
+        [103.271607, 36.722576],
+        [103.271626, 36.722522],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.271575, 36.72252],
+        [103.271548, 36.722603],
+        [103.271686, 36.722635],
+        [103.27113, 36.724418],
+        [103.267212, 36.722961],
+        [103.265522, 36.722334],
+        [103.265937, 36.72164],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.270824, 36.724107],
+        [103.270735, 36.724269],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.27087, 36.724124],
+        [103.270732, 36.724377],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.268702, 36.723054],
+        [103.268481, 36.723431],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.268483, 36.723538],
+        [103.268745, 36.723086],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.267193, 36.722407],
+        [103.266882, 36.72294],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.266876, 36.722835],
+        [103.267144, 36.722388],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.263102, 36.738831],
+        [103.261989, 36.739846],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.261101, 36.738046],
+        [103.260456, 36.738645],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.26107, 36.73802],
+        [103.260346, 36.738693],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.258694, 36.739654],
+        [103.260047, 36.738361],
+        [103.261539, 36.737293],
+        [103.261317, 36.737024],
+        [103.262718, 36.73609],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.258611, 36.739622],
+        [103.259964, 36.738316],
+        [103.261438, 36.737261],
+        [103.261211, 36.736981],
+        [103.262638, 36.736039],
+      ],
+      color: '#0000CD',
+    },
+    {
+      polyline: [
+        [103.259108, 36.739214],
+        [103.260744, 36.740177],
+        [103.260002, 36.740959],
+      ],
+      color: '#B22222',
+    },
+    {
+      polyline: [
+        [103.259927, 36.740943],
+        [103.260628, 36.740198],
+        [103.259799, 36.739708],
+        [103.25899, 36.739226],
+      ],
+      color: '#0000CD',
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.23834, 36.729224],
+        [103.238368, 36.72919],
+        [103.248529, 36.733007],
+        [103.260525, 36.712611],
+        [103.258655, 36.711927],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.238327, 36.729207],
+        [103.238402, 36.72908],
+        [103.248456, 36.732802],
+        [103.260315, 36.712714],
+        [103.25864, 36.712089],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.259052, 36.714848],
+        [103.26261, 36.71639],
+        [103.262838, 36.716041],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.259097, 36.714779],
+        [103.262622, 36.716254],
+        [103.262785, 36.716015],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.251912, 36.727253],
+        [103.249653, 36.726377],
+        [103.249547, 36.726551],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.259334, 36.712172],
+        [103.258923, 36.712818],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.259297, 36.712336],
+        [103.258968, 36.71284],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.257807, 36.716174],
+        [103.257608, 36.716497],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.257858, 36.716002],
+        [103.257562, 36.716485],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.258658, 36.711928],
+        [103.25825, 36.712606],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.253745, 36.724138],
+        [103.252743, 36.723796],
+        [103.252662, 36.723973],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.258187, 36.716322],
+        [103.257207, 36.715945],
+        [103.256959, 36.71633],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.258641, 36.712088],
+        [103.258303, 36.712624],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.253552, 36.724172],
+        [103.252744, 36.723906],
+        [103.252702, 36.72399],
+      ],
+    },
+    {
+      color: '#B22222',
+      polyline: [
+        [103.251718, 36.727271],
+        [103.249649, 36.726452],
+        [103.24959, 36.726549],
+      ],
+    },
+    {
+      color: '#0000CD',
+      polyline: [
+        [103.258409, 36.716211],
+        [103.257261, 36.715775],
+        [103.256921, 36.716309],
+      ],
+    },
+  ],
+});
+onMounted(() => {
+  initMap();
+});
+const initMap = () => {
+  AMapLoader.reset();
+  AMapLoader.load({
+    key: '190ca276eab6a1a369fa80e1f9977a8f', // 此处填入我们注册账号后获取的Key
+    version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    plugins: ['AMap.Marker', 'AMap.ControlBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+  }).then((AMap) => {
+    var GMap = new AMap.Map('mapContainer', {
+      zoom: 25, //  地图显示的缩放级别
+      viewMode: '3D',
+      center: [103.265702, 36.730781], // 初始化地图中心点位置, //  地图中心点坐标 此处填【经度，纬度】
+      // mapStyle: 'amap://styles/normal', //设置地图的显示样式
+      resizeEnable: true, //  是否监控地图容器尺寸变化
+      buildingAnimation: true, //建筑出现的动画
+    });
+    GMap.addControl(
+      new AMap.ControlBar({
+        showZoomBar: false,
+        showControlButton: true,
+        position: {
+          right: '10px',
+          top: '10px',
+        },
+      })
+    );
+    state.map = GMap;
+    // setInterval(() => {
+    state.markers.forEach((element) => {
+      const marker = new AMap.Marker({
+        icon: 'http://demo-demo12.oss-cn-beijing.aliyuncs.com/NewImage/GLF.png',
+        position: [element.position[0], element.position[1]],
+        offset: new AMap.Pixel(-13, -30),
+      });
+      marker.setMap(GMap);
+      marker.setLabel({
+        offset: new AMap.Pixel(0, 30), //设置文本标注偏移量
+        content: "<div class='info'>" + element.name + '</div>', //设置文本标注内容
+        direction: 'down', //设置文本标注方位
+      });
+    });
+    // }, 1000);
+
+    state.polylines.forEach((element) => {
+      // console.log(element)
+      const polyline = new AMap.Polyline({
+        path: element.polyline,
+        strokeColor: element.color,
+        strokeOpacity: 1,
+        strokeWeight: 4,
+      });
+      polyline.setMap(GMap);
+    });
+  });
+};
+</script>
+<style>
+.home-container {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ddd;
+  box-sizing: border-box;
+}
+.amap-icon img {
+  width: 30px;
+  height: 30px;
+}
+</style>