继续使用功能中

src/views/modules/visual/test/l7.vue

@@ -21,6 +21,7 @@ import {
   LineLayer,
   CityBuildingLayer,
   RasterLayer,
+  Popup,
 } from "@antv/l7";
 import { GaodeMap, Map } from "@antv/l7-maps";
 // import { DrawEvent, DrawPolygon } from "@antv/l7-draw";
@@ -116,8 +117,10 @@ export default {
       const { srcMapData } = this;
         scene = new Scene({
           id: "map",
+          logoVisible: false,
           map: new GaodeMap({
-          pitch: 45,
+            // viewMode: "3D",
+            pitch: 35.210526315789465,
             style: "dark",
             //   style: "light",
             center: [srcMapData.longitude, srcMapData.latitude],
@@ -127,7 +130,57 @@ export default {
           }),
         });
 
+    //   scene = new Scene({
+    //     id: "map",
+    //     map: new Map({
+    //       pitch: 35.210526315789465,
+    //       style: "dark",
+    //       //   style: "light",
+    //       center: [srcMapData.longitude, srcMapData.latitude],
+    //       //   token: "xxxx - token",
+    //       zoom: 18,
+    //       minZoom: 10,
+    //     }),
+    //   });
+
       scene.on("loaded", () => {
+        // 底图服务
+        // const baseLayer = new RasterLayer({
+        //   zIndex: 1,
+        // });
+        // baseLayer.source(
+        //   "https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd",
+        //   {
+        //     parser: {
+        //       type: "rasterTile",
+        //       tileSize: 256,
+        //       // minZoom: 6,
+        //       // maxZoom: 15,
+        //       zoomOffset: 0,
+        //     },
+        //   }
+        // );
+
+        // // 注记服务
+        // const annotionLayer = new RasterLayer({
+        //   zIndex: 2,
+        // });
+        // annotionLayer.source(
+        //   "https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd",
+        //   {
+        //     parser: {
+        //       type: "rasterTile",
+        //       tileSize: 256,
+        //       // minZoom: 6,
+        //       // maxZoom: 15,
+        //       zoomOffset: 0,
+        //     },
+        //   }
+        // );
+
+        // scene.addLayer(baseLayer);
+        // scene.addLayer(annotionLayer);
+
         const polygon = [
           ...srcMapData.children
             .filter((item) => item.coordinates.length > 0)
@@ -235,9 +288,9 @@ export default {
         })
           .source({ type: "FeatureCollection", features: polygon })
           .shape("name", ["pos-red", "pos-green", "pos-yellow"])
-          .size(14)
+          .size(12)
           .style({
-            offsets: [0, 10], // 文本相对锚点的偏移量 [水平, 垂直]
+            offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直]
             // rotation: 60,
             layerType: "fillImage",
           });
@@ -256,7 +309,7 @@ export default {
           .size(16)
           .style({
             textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-            textOffset: [0, 45], // 文本相对锚点的偏移量 [水平, 垂直]
+            textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
             spacing: 2, // 字符间距
             padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
             stroke: "#ffffff", // 描边颜色
@@ -389,6 +442,17 @@ export default {
           rotation: 0,
           layerType: "fillImage",
         });
+
+      dotLayer.on("mousemove", (e) => {
+        console.log(e);
+        const popup = new Popup({
+          offsets: [0, -0],
+          closeButton: false,
+        })
+          .setLnglat(e.feature.geometry.coordinates)
+          .setHTML(`<span>类型: ${e.feature.properties.categoryKey}</span>`);
+        scene.addPopup(popup);
+      });
       scene.addLayer(dotLayer);
     },