diff --git a/src/assets/img/shuju/grid/pos-green2.png b/src/assets/img/shuju/grid/pos-green2.png new file mode 100644 index 00000000..7162005f Binary files /dev/null and b/src/assets/img/shuju/grid/pos-green2.png differ diff --git a/src/assets/img/shuju/grid/pos-red2.png b/src/assets/img/shuju/grid/pos-red2.png new file mode 100644 index 00000000..1f2faa80 Binary files /dev/null and b/src/assets/img/shuju/grid/pos-red2.png differ diff --git a/src/assets/img/shuju/grid/pos-yellow2.png b/src/assets/img/shuju/grid/pos-yellow2.png new file mode 100644 index 00000000..7050f260 Binary files /dev/null and b/src/assets/img/shuju/grid/pos-yellow2.png differ diff --git a/src/views/modules/visual/test/l7.vue b/src/views/modules/visual/test/l7.vue index 9d362327..f1badfd0 100644 --- a/src/views/modules/visual/test/l7.vue +++ b/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"; @@ -114,20 +115,72 @@ export default { methods: { iniMap() { const { srcMapData } = this; - scene = new Scene({ - id: "map", - map: new GaodeMap({ - pitch: 45, - style: "dark", - // style: "light", - center: [srcMapData.longitude, srcMapData.latitude], - // token: "xxxx - token", - zoom: 18, - minZoom: 10, - }), - }); + scene = new Scene({ + id: "map", + logoVisible: false, + map: new GaodeMap({ + // viewMode: "3D", + pitch: 35.210526315789465, + style: "dark", + // style: "light", + center: [srcMapData.longitude, srcMapData.latitude], + // token: "xxxx - token", + zoom: 18, + minZoom: 10, + }), + }); + + // 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", // 描边颜色 @@ -312,7 +365,7 @@ export default { sweepCenter: [120.145319, 30.238915], }, }); - // scene.addLayer(pointLayer); + // scene.addLayer(pointLayer); }); // const textFeatures = [ @@ -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(`类型: ${e.feature.properties.categoryKey}`); + scene.addPopup(popup); + }); scene.addLayer(dotLayer); },