jinx 8 月之前
父節點
當前提交
b498f4716d

二進制
src/assets/images/anserHome.png


二進制
src/assets/images/effect/boat.png


二進制
src/assets/images/effect/cloud1.png


二進制
src/assets/images/effect/cloud2.png


二進制
src/assets/images/homeText4.png


二進制
src/assets/images/homeText5.png


二進制
src/assets/images/homeText6.png


二進制
src/assets/images/homeTitle.png


二進制
src/assets/images/modelBtn.png


+ 38 - 1
src/views/home/index.vue

@@ -8,8 +8,13 @@
       <div class="logo"></div>
     </div>
     <div class="frist-box" v-show="showFrist">
+      <div class="effect">
+        <div class="boat-icon"></div>
+        <div class="cloud-1"></div>
+        <div class="cloud-2"></div>
+      </div>
       <div class="title"></div>
-      <div class="btn" @click="enter">即刻游览</div>
+      <div class="btn" @click="enter"><span class="animate__animated animate__infinite animate__pulse animate__slow">即刻游览</span></div>
     </div>
   </div>
 </template>
@@ -251,6 +256,37 @@ const goItem = (type) => {
   top: 0;
   left: 0;
   z-index: 9999;
+  .effect {
+    .boat-icon {
+      width: 2.3467rem;
+      height: 2.08rem;
+      background: url("@/assets/images/effect/boat.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 20%;
+      left: 12%;
+      transform: scale(0.8);
+    }
+    .cloud-1 {
+      width: 8.7733rem;
+      height: 5.3333rem;
+      background: url("@/assets/images/effect/cloud1.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 40%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    .cloud-2 {
+      width: 6.3733rem;
+      height: 4.8267rem;
+      background: url("@/assets/images/effect/cloud2.png") no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      bottom: 10%;
+      right: -10%;
+    }
+  }
   .title {
     width: 7.6267rem;
     height: 7.88rem;
@@ -268,6 +304,7 @@ const goItem = (type) => {
     background-size: 100% 100%;
     position: absolute;
     bottom: 12%;
+    z-index: 10;
     left: 50%;
     transform: translateX(-50%);
     font-weight: bold;

+ 150 - 318
src/views/map/index.vue

@@ -176,27 +176,27 @@ const chat = ref({ content: "", role: "user" });
 let AMap = null;
 let map = null;
 let imageLayer = null;
-const test = () => {
-  let item = markers.find((i) => i.getExtData().id == 1);
-  let data = item.getExtData();
-  var infoWindow = new AMap.InfoWindow({
-    content: `<div class="map-window">
-      <div class="img-box"><img src="./static/image/全部/${data.images[0]}"></div></div>`, // 设置弹窗内容为自定义的HTML元素
-    offset: new AMap.Pixel(0, -30), // 设置弹窗偏移量,可根据需要调整
-  });
-  // infoWindow.open(map, e.target.getPosition());
-  infoWindow.open(map, item.getPosition());
-};
-function getMarkerByPosition(position) {
-  var markers = map.getOverlays(); // 获取地图上的所有覆盖物,包括 Marker
-  for (var i = 0; i < markers.length; i++) {
-    if (AMap.isPointInArea(position, markers[i].getPosition())) {
-      // 检查位置是否匹配
-      return markers[i]; // 返回找到的 Marker
-    }
-  }
-  return null; // 如果没有找到,返回 null
-}
+// const test = () => {
+//   let item = markers.find((i) => i.getExtData().id == 1);
+//   let data = item.getExtData();
+//   var infoWindow = new AMap.InfoWindow({
+//     content: `<div class="map-window">
+//       <div class="img-box"><img src="./static/image/全部/${data.images[0]}"></div></div>`, // 设置弹窗内容为自定义的HTML元素
+//     offset: new AMap.Pixel(0, -30), // 设置弹窗偏移量,可根据需要调整
+//   });
+//   // infoWindow.open(map, e.target.getPosition());
+//   infoWindow.open(map, item.getPosition());
+// };
+// function getMarkerByPosition(position) {
+//   var markers = map.getOverlays(); // 获取地图上的所有覆盖物,包括 Marker
+//   for (var i = 0; i < markers.length; i++) {
+//     if (AMap.isPointInArea(position, markers[i].getPosition())) {
+//       // 检查位置是否匹配
+//       return markers[i]; // 返回找到的 Marker
+//     }
+//   }
+//   return null; // 如果没有找到,返回 null
+// }
 const showDialog = ref(false);
 const tabType = ref(1);
 let openaiA = new OpenAI({
@@ -307,7 +307,6 @@ const switchChat = () => {
 // });
 const hanlderMakerEvent = (e) => {
   console.log("click", e.target.getExtData());
-  // showDialog.value = true;
   let data = e.target.getExtData();
   dialogData.value = data;
   // console.error(e);
@@ -384,124 +383,124 @@ const setMarker = () => {
     map.add(marker);
   }
 };
-const setSingleMarker = (data) => {
-  console.error(data);
-  let scale = 0.2;
-  let iconW = 50;
-  let iconH = 50;
-  let customIcon = null;
-  let offset = [0, 0];
-  if (data.iconSize) {
-    iconW = (data.iconSize[0] - 0) * scale;
-    iconH = (data.iconSize[1] - 0) * scale;
-    customIcon = new AMap.Icon({
-      // size: new AMap.Size(50, 50),
-      image: `./static/image/景点地标切图/${data.name}.png`,
-      imageSize: new AMap.Size(iconW, iconH),
-    });
-    offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
-  } else {
-    offset = 0;
-  }
-
-  let pos = data.location.split(",");
-  let extData = data;
-  let marker = new AMap.Marker({
-    // position: new AMap.LngLat(106.837106, 29.712762),
-
-    position: new AMap.LngLat(pos[0], pos[1]),
-    // content: markerContent, //将 html 传给 content
-    offset: offset,
-    icon: customIcon, //添加 icon 图标 URL
-    // title: data[i].name,
-    zooms: [9, 20], // 设置可见级别,[最小级别,最大级别]
-    extData: {
-      //自定义数据
-      ...extData,
-    },
-    clickable: true,
-  });
-  markers.push(marker);
-  marker.on("mousedown", hanlderMakerEvent);
-  // marker.off("mousedown", hanlderMakerEvent);
-  map.add(marker);
-};
-
-const setMarkerCluster = () => {
-  let pointers = [];
-
-  let data = mapData.filter((item) => {
-    if (item.type == tabType.value) {
-      let pos = item.location.split(",");
-      pointers.push({ weight: 1, lnglat: [pos[0], pos[1]], info: item });
-      return true;
-    }
-  });
-  console.error(data);
-  let cluster = new AMap.MarkerCluster(
-    map, // 地图实例
-    pointers, // 海量点数据,数据中需包含经纬度信息字段 lnglat
-    {
-      gridSize: 30,
-      clusterByZoomChange: true,
-      // styles: {
-      //   // url: `./static/image/景点地标切图/${data.name}.png`,
-      //   url: `//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png`,
-      //   size: new AMap.Size(50, 50),
-      // },
-
-      renderMarker: function (cluster) {
-        let data = cluster.data[0].info;
-        if (data.iconSize) {
-          // setSingleMarker(data);
-          cluster.marker.setContent(`<img style="width:${(data.iconSize[0] - 0) * 0.2}px;height:${(data.iconSize[1] - 0) * 0.2}px;" src="./static/image/景点地标切图/${data.name}.png">`);
-        }
-        // console.error(cluster);
-        // const { marker } = cluster;
-
-        // if (data.iconSize) {
-        //   marker.setIcon(`./static/image/景点地标切图/${data.name}.png`); // imgSrc是自定义图标的路径或
-        //   let iconW = (data.iconSize[0] - 0) * 0.2;
-        //   let iconH = (data.iconSize[1] - 0) * 0.2;
-        //   marker.setSize(new AMap.Size(iconW, iconH));
-        // }
-
-        // URL
-        // 设置标签
-        // const info = data.info;
-        // marker.setLabel({
-        //   content: data.name,
-        //   direction: "center",
-        //   offset: [0, 20], // 标签偏移量
-        // });
-      },
-    }
-  );
-
-  cluster.on("click", (e) => {
-    if (e.clusterData.length == 1) {
-      dialogData.value = e.clusterData[0].info;
-    } else {
-      // console.error(map.getZoom());
-      setTimeout(() => {
-        // map.setZoomAndCenter(map.getZoom() + 2);
-        let center = e.clusterData[0].info.location.split(",");
-        console.error(center);
-        map.setZoomAndCenter(map.getZoom() + 2, center, false, 300);
-      }, 0);
-      // console.error(map.getZoom());
-    }
-  });
-};
-const goLocation = (index) => {
-  wx.openLocation({
-    latitude: 22.545538, // 纬度,浮点数,范围为90 ~ -90
-    longitude: 114.054565, // 经度,浮点数,范围为180 ~ -180。
-    name: "这里填写位置名", // 位置名
-    address: "", // 地址详情说明
-    scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
-  });
-};
+// const setSingleMarker = (data) => {
+//   console.error(data);
+//   let scale = 0.2;
+//   let iconW = 50;
+//   let iconH = 50;
+//   let customIcon = null;
+//   let offset = [0, 0];
+//   if (data.iconSize) {
+//     iconW = (data.iconSize[0] - 0) * scale;
+//     iconH = (data.iconSize[1] - 0) * scale;
+//     customIcon = new AMap.Icon({
+//       // size: new AMap.Size(50, 50),
+//       image: `./static/image/景点地标切图/${data.name}.png`,
+//       imageSize: new AMap.Size(iconW, iconH),
+//     });
+//     offset = new AMap.Pixel(-(iconW / 2), -(iconH / 2));
+//   } else {
+//     offset = 0;
+//   }
+
+//   let pos = data.location.split(",");
+//   let extData = data;
+//   let marker = new AMap.Marker({
+//     // position: new AMap.LngLat(106.837106, 29.712762),
+
+//     position: new AMap.LngLat(pos[0], pos[1]),
+//     // content: markerContent, //将 html 传给 content
+//     offset: offset,
+//     icon: customIcon, //添加 icon 图标 URL
+//     // title: data[i].name,
+//     zooms: [9, 20], // 设置可见级别,[最小级别,最大级别]
+//     extData: {
+//       //自定义数据
+//       ...extData,
+//     },
+//     clickable: true,
+//   });
+//   markers.push(marker);
+//   marker.on("mousedown", hanlderMakerEvent);
+//   // marker.off("mousedown", hanlderMakerEvent);
+//   map.add(marker);
+// };
+
+// const setMarkerCluster = () => {
+//   let pointers = [];
+
+//   let data = mapData.filter((item) => {
+//     if (item.type == tabType.value) {
+//       let pos = item.location.split(",");
+//       pointers.push({ weight: 1, lnglat: [pos[0], pos[1]], info: item });
+//       return true;
+//     }
+//   });
+//   console.error(data);
+//   let cluster = new AMap.MarkerCluster(
+//     map, // 地图实例
+//     pointers, // 海量点数据,数据中需包含经纬度信息字段 lnglat
+//     {
+//       gridSize: 30,
+//       clusterByZoomChange: true,
+//       // styles: {
+//       //   // url: `./static/image/景点地标切图/${data.name}.png`,
+//       //   url: `//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png`,
+//       //   size: new AMap.Size(50, 50),
+//       // },
+
+//       renderMarker: function (cluster) {
+//         let data = cluster.data[0].info;
+//         if (data.iconSize) {
+//           // setSingleMarker(data);
+//           cluster.marker.setContent(`<img style="width:${(data.iconSize[0] - 0) * 0.2}px;height:${(data.iconSize[1] - 0) * 0.2}px;" src="./static/image/景点地标切图/${data.name}.png">`);
+//         }
+//         // console.error(cluster);
+//         // const { marker } = cluster;
+
+//         // if (data.iconSize) {
+//         //   marker.setIcon(`./static/image/景点地标切图/${data.name}.png`); // imgSrc是自定义图标的路径或
+//         //   let iconW = (data.iconSize[0] - 0) * 0.2;
+//         //   let iconH = (data.iconSize[1] - 0) * 0.2;
+//         //   marker.setSize(new AMap.Size(iconW, iconH));
+//         // }
+
+//         // URL
+//         // 设置标签
+//         // const info = data.info;
+//         // marker.setLabel({
+//         //   content: data.name,
+//         //   direction: "center",
+//         //   offset: [0, 20], // 标签偏移量
+//         // });
+//       },
+//     }
+//   );
+
+//   cluster.on("click", (e) => {
+//     if (e.clusterData.length == 1) {
+//       dialogData.value = e.clusterData[0].info;
+//     } else {
+//       // console.error(map.getZoom());
+//       setTimeout(() => {
+//         // map.setZoomAndCenter(map.getZoom() + 2);
+//         let center = e.clusterData[0].info.location.split(",");
+//         console.error(center);
+//         map.setZoomAndCenter(map.getZoom() + 2, center, false, 300);
+//       }, 0);
+//       // console.error(map.getZoom());
+//     }
+//   });
+// };
+// const goLocation = (index) => {
+//   wx.openLocation({
+//     latitude: 22.545538, // 纬度,浮点数,范围为90 ~ -90
+//     longitude: 114.054565, // 经度,浮点数,范围为180 ~ -180。
+//     name: "这里填写位置名", // 位置名
+//     address: "", // 地址详情说明
+//     scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
+//   });
+// };
 const initMap = async () => {
   window._AMapSecurityConfig = {
     securityJsCode: "2d0885f937e5fa6d093830e1765f593d",
@@ -542,148 +541,8 @@ const initMap = async () => {
 
     // center: [116.397428, 39.90923], //地图中心点
     resizeEnable: true, // 是否监控地图容器尺寸变化
-    // layers: [layer, imageLayer],
-    // layers: [layer],
-    // features: ["bg", "point", "road"],
   });
 
-  // map.add(tilerLayer);
-  // 当前示例的目标是展示如何根据规划结果绘制路线,因此walkOption为空对象
-  // var walkingOption = { policy: 0 };
-
-  // // 步行导航
-  // var walking = new AMap.Walking(walkingOption);
-
-  // var waypoints = [
-  //   // 途经点数组,格式为 [经度, 纬度]
-  //   [116.403953, 39.915378],
-  //   [116.410837, 39.910887],
-  // ];
-
-  // //根据起终点坐标规划步行路线
-  // walking.search([116.403953, 39.915378], [116.436281, 39.880719], function (status, result) {
-  //   console.error(result);
-  //   if (status === "complete") {
-  //     if (result.routes && result.routes.length) {
-  //       drawRoute(result.routes[0]);
-  //       // log.success('绘制步行路线完成')
-  //     }
-  //   } else {
-  //     // log.error('步行路线数据查询失败' + result)
-  //   }
-  // });
-
-  // var driving = new AMap.Driving({
-  //   //驾车路线规划策略,0是速度优先的策略
-  //   policy: AMap.DrivingPolicy.LEAST_TIME,
-  //   //map 指定将路线规划方案绘制到对应的 AMap.Map 对象上
-  //   // map: map,
-  //   //panel 指定将结构化的路线详情数据显示的对应的 DOM 上,传入值需是 DOM 的 ID
-  //   // panel: "panel",
-  // });
-  // var startLngLat = [116.379028, 39.865042]; //起始点坐标
-  // var endLngLat = [116.427281, 39.903719]; //终点坐标
-  // var opts = {
-  //   waypoints: [
-  //     [116.397455, 39.909187],
-  //     [116.410837, 39.910887],
-  //   ], //途经点参数,最多支持传入16个途经点
-  // };
-  // //搜索完成后,将自动绘制路线到地图上
-  // driving.search(startLngLat, endLngLat, opts, function (status, result) {
-  //   if (status === "complete") {
-  //     if (result.routes && result.routes.length) {
-  //       console.error(result);
-  //       drawRoute(result);
-  //       // log.success('绘制步行路线完成')
-  //     }
-  //   } else {
-  //     // log.error('步行路线数据查询失败' + result)
-  //   }
-  // });
-
-  function drawRoute(route) {
-    var path = parseRouteToPath(route.routes[0]);
-
-    var startMarker = new AMap.Marker({
-      position: startLngLat,
-      icon: "https://webapi.amap.com/theme/v1.3/markers/n/start.png",
-      map: map,
-      anchor: "bottom-center",
-    });
-
-    var endMarker = new AMap.Marker({
-      position: path[path.length - 1],
-      icon: "https://webapi.amap.com/theme/v1.3/markers/n/end.png",
-      map: map,
-      anchor: "bottom-center",
-    });
-
-    var routeLine = new AMap.Polyline({
-      path: path,
-      isOutline: true,
-      outlineColor: "#fff",
-      borderWeight: 1,
-      strokeWeight: 4,
-      strokeColor: "red",
-      strokeOpacity: 0.9,
-      showDir: true,
-      lineJoin: "round",
-    });
-
-    map.add(routeLine);
-
-    // 调整视野达到最佳显示区域
-    map.setFitView([startMarker, endMarker, routeLine]);
-  }
-
-  // 解析WalkRoute对象,构造成AMap.Polyline的path参数需要的格式
-  // WalkRoute对象的结构文档 https://lbs.amap.com/api/javascript-api/reference/route-search#m_WalkRoute
-  function parseRouteToPath(route) {
-    var path = [];
-
-    for (var i = 0, l = route.steps.length; i < l; i++) {
-      var step = route.steps[i];
-
-      for (var j = 0, n = step.path.length; j < n; j++) {
-        path.push(step.path[j]);
-      }
-    }
-
-    return path;
-  }
-
-  // map.setFeatures(["bg", "road", "building"]);
-
-  // map.setFeatures(["bg", "road", "roadLabel"], true); // 显示背景、道路和建筑物
-  // map.setFeatures(['roadLabel'], false); // 关闭道路名称显示
-
-  // var circle = new AMap.Rectangle({
-  //   bounds: new AMap.Bounds(
-  //     [106.837106, 29.712762], // 左下  手绘图左下相对于地图的经纬度
-  //     [106.848727, 29.720554] // 右上  手绘图右上相对于地图的经纬度
-  //   ), //矩形的范围
-  //   strokeColor: "red", //轮廓线颜色
-  //   strokeWeight: 6, //轮廓线宽度
-  //   strokeOpacity: 0.5, //轮廓线透明度
-  //   strokeStyle: "dashed", //轮廓线样式,dashed 虚线,还支持 solid 实线
-  //   strokeDasharray: [30, 10], //勾勒形状轮廓的虚线和间隙的样式,30代表线段长度 10代表间隙长度
-  //   fillColor: "blue", //矩形填充颜色
-  //   fillOpacity: 0.5, //矩形填充透明度
-  //   cursor: "pointer", //指定鼠标悬停时的鼠标样式
-  //   zIndex: 1001, //矩形在地图上的层级
-
-  //   extData: {
-  //     //自定义数据
-  //     name: "北京",
-  //   },
-  // });
-  //单独将点标记和矢量圆形添加到地图上
-  // circle.on("click", (e) => {
-  //   console.error("click", e.target.getExtData());
-  //   showDialog.value = true;
-  // });
-  // map.add(circle);
   // tilerLayer.setMap(map);
   tilerLayer.on("click", () => {
     console.error("click");
@@ -704,20 +563,20 @@ const initMap = async () => {
   setMarker();
   // setMarkerCluster();
 
-  map.on("click", (ev) => {
-    //触发事件的对象
-    var target = ev.target;
+  // map.on("click", (ev) => {
+  //   //触发事件的对象
+  //   var target = ev.target;
 
-    //触发事件的地理坐标,AMap.LngLat 类型
-    var lnglat = ev.lnglat;
+  //   //触发事件的地理坐标,AMap.LngLat 类型
+  //   var lnglat = ev.lnglat;
 
-    //触发事件的像素坐标,AMap.Pixel 类型
-    var pixel = ev.pixel;
+  //   //触发事件的像素坐标,AMap.Pixel 类型
+  //   var pixel = ev.pixel;
 
-    //触发事件类型
-    var type = ev.type;
-    console.error(pixel);
-  });
+  //   //触发事件类型
+  //   var type = ev.type;
+  //   // console.error(pixel);
+  // });
 
   map.add(imageLayer);
   // map.add(marker);
@@ -741,34 +600,7 @@ const addImageLayer = () => {
   });
 };
 
-const weixinConfig = () => {
-  let name = "岳阳楼";
-  name = encodeURIComponent(name);
-  let uri = encodeURIComponent(location.href.split("#")[0]);
-  jsonp(
-    // "//www.4dage.com/wechat/jssdk/share?name=" + name + "&uri=" + uri,
-    "http://192.168.0.12:8000/share?name=" + name + "&uri=" + uri,
-    {
-      param: "callback",
-    },
-    function (err, data) {
-      console.log(data);
-      wx.config({
-        debug: false,
-        appId: data.appId,
-        timestamp: data.timestamp,
-        nonceStr: data.nonceStr,
-        signature: data.signature,
-        jsApiList: ["openLocation"],
-        openTagList: ["wx-open-launch-weapp"],
-      });
-    }
-  );
 
-  wx.ready(() => {
-    console.log("config初始化正确");
-  });
-};
 //*
 // *effect 是否false 需要过渡
 // /