大屏开发

src/assets/fonts/font.less

@@ -15,14 +15,20 @@
 
 @font-face {
   font-family: 'DIN';
-  src: url('../fonts/0.otf') format('woff'); 
+  src: url('../fonts/DIN.otf') format('woff'); 
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'DINBold';
+  src: url('../fonts/DINBold.woff'); 
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Alibaba PuHuiTi';
-  src: url('../fonts/2.otf') format('woff'); 
+  src: url('../fonts/AlibabaPuHuiTi.otf') format('woff'); 
   font-weight: normal;
   font-style: normal;
 }
\ No newline at end of file

src/components/CommonMap.vue

@@ -18,16 +18,16 @@ const emit = defineEmits(["province-selected"]);
 import gansuLine from "./newLine.json";
 let map = null;
 window._AMapSecurityConfig = {
-  securityJsCode: "75a8291a9e8f7c838fc5e4dd0d538f30",
-  // securityJsCode: "7aee6d6553ba9a8178e0c57b60a51481",
+  securityJsCode: "7aee6d6553ba9a8178e0c57b60a51481",
 };
+let geojsonObj = null;
+
 // 初始化地图
 const handleInitMap = () => {
   let selectName = sessionStorage.getItem("selectedContentBtn");
   AMapLoader.load({
-    key: "c691971f068b92c897fb908c4ddef6d4", // 申请好的Web端开发者Key
-    // key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
-    version: "2.0",
+    key: "9a22433229a51dc5114d4bbf92f687ee", // 申请好的Web端开发者Key
+    // version: "2.0",
     plugins: ["AMap.DistrictSearch", "AMap.GeoJSON"],
   })
     .then((AMap) => {
@@ -37,8 +37,7 @@ const handleInitMap = () => {
         zoom: 4, //根据屏幕宽度设置初始化地图级别
         center: [100.808299, 35.791787], //初始化地图中心点位置
         expandZoomRange: true, // 开启显示范围设置
-        mapStyle: "amap://styles/2d017848d08f94f20b6e50aaae661148",
-        // mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
+        mapStyle: "amap://styles/d9cd35cfbd75e272e528a7fde0bcfc53",
         rotateEnable: false, // 是否可以旋转
         copyrightControl: false,
         logoControl: false,
@@ -50,21 +49,31 @@ const handleInitMap = () => {
       //   map.setZoom(3.5);
       // }
       handleDistrict();
-      addPolylines();
-      handleAddMarket(selectName);
+      // addPolylines();
+      // handleAddMarket(selectName);
+      map.on("zoomend", () => {
+        let zoom = map.getZoom();
+        console.log(zoom)
+        if (zoom === 7) {
+          addPolylines();
+        } else if (zoom < 7) {
+          console.log(geojsonObj);
+          geojsonObj && map.remove(geojsonObj);
+        }
+      });
     })
     .catch((e) => {});
 };
 // 高亮和描边
 const handleDistrict = () => {
   let districtSearch = new AMap.DistrictSearch({
-    subdistrict: 0, //获取边界不需要返回下级行政区
+    subdistrict: 1, //获取边界不需要返回下级行政区
     extensions: "all", //返回行政区边界坐标组等具体信息
-    level: "province", //查询行政级别为 市 province-省 district-
+    level: "country", //查询行政级别为 市 province-省 district-
   });
-  let polygons = [];
-  districtSearch.search("中华人民共和国", function (status, result) {
-    map.remove(polygons); //清除上次结果
+  // let polygons = [];
+  districtSearch.search("中国", function (status, result) {
+    // map.remove(polygons); //清除上次结果
     let bounds = result.districtList[0].boundaries;
     // 描边
     for (let i = 0; i < bounds.length; i++) {
@@ -75,14 +84,25 @@ const handleDistrict = () => {
         map: map,
       });
       map.add(outerPolyline);
+      // const chinaBg = new AMap.Polygon({
+      //     path: bounds[i],
+      //     fillColor: "#026CB7",      // 背景色
+      //     fillOpacity: 0.5,          // 透明度
+      //     strokeColor: "#026CB7", // 浅蓝色边框
+      //     strokeWeight: 1,
+      //     strokeOpacity: 1,
+      //     zIndex: 10,
+      //     bubble: false
+      // });
+      // map.add(chinaBg);
     }
-    map.add(polygons);
-    map.setFitView(polygons); //视口自适应
+    // map.add(polygons);
+    // map.setFitView(polygons); //视口自适应
   });
 };
 // 添加新路线
 const addPolylines = () => {
-  let geojsonObj = new AMap.GeoJSON({
+  geojsonObj = new AMap.GeoJSON({
     geoJSON: gansuLine,
     getPolyline: function (geojson, lnglats) {
       // 生成路线
@@ -93,17 +113,17 @@ const addPolylines = () => {
         extData: geojson.properties, // 自定义属性数据
       });
       // 生成新的路线，用于覆盖旧的
-      const newPolyline = new AMap.Polyline({
-        path: lnglats,
-        strokeWeight: 4,
-        strokeColor: "#00DDEB",
-        isOutline: true,
-        borderWeight: 2,
-        outlineColor: "rgba(0, 221, 235, 1)",
-        cursor: "pointer",
-      });
-      map.add(newPolyline);
-      newPolyline.hide();
+      // newPolyline = new AMap.Polyline({
+      //   path: lnglats,
+      //   strokeWeight: 4,
+      //   strokeColor: "#00DDEB",
+      //   isOutline: true,
+      //   borderWeight: 2,
+      //   outlineColor: "rgba(0, 221, 235, 1)",
+      //   cursor: "pointer",
+      // });
+      // map.add(newPolyline);
+      // newPolyline.hide();
 
       // 获取路线数据
       const properties = polylineObj.getExtData();
@@ -136,18 +156,18 @@ const addPolylines = () => {
       });
 
       // 鼠标经过
-      polylineObj.on("mouseover", function (e) {
-        newPolyline.show();
-        infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
-      });
-      // 鼠标移出
-      polylineObj.on("mouseout", function (e) {
-        newPolyline.hide();
-        infoWindow.close();
-      });
+      // polylineObj.on("mouseover", function (e) {
+      //   newPolyline.show();
+      //   infoWindow.open(map, [`${e.lnglat.getLng()}`, `${e.lnglat.getLat()}`]);
+      // });
+      // // 鼠标移出
+      // polylineObj.on("mouseout", function (e) {
+      //   newPolyline.hide();
+      //   infoWindow.close();
+      // });
 
-      // 鼠标双击
-      polylineObj.on("dblclick", function (e) {});
+      // // 鼠标双击
+      // polylineObj.on("dblclick", function (e) {});
       return polylineObj;
     },
   });
@@ -383,7 +403,7 @@ defineExpose({
 onMounted(() => {
   handleInitMap();
   // 监听窗口大小变化
-  window.addEventListener("resize", handleResize);
+  // window.addEventListener("resize", handleResize);
 });
 
 // 处理窗口大小变化