feat:添加地图label

ZhangXianQiang

2024-04-19 cc6994a5858cd662f5904005bbbd9d34b712f76c

feat:添加地图label

 src/assets/map/zigong2.json

@@ -20,6 +20,10 @@
          "pixels",
          "pixels"
        ],
        "center": [
          104.681471408,
          29.41058885
        ],
        "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
        "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:黑体,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
      },
@@ -568,7 +572,11 @@
        "styleUrl": "#msn_ylw-pushpin0",
        "fill-opacity": "0.5",
        "fill": "#000000",
        "stroke-opacity": "1"
        "stroke-opacity": "1",
        "center": [
          104.805193,
          29.348033
        ]
      },
      "geometry": {
        "coordinates": [
@@ -936,6 +944,10 @@
        "icon-offset-units": [
          "pixels",
          "pixels"
        ],
        "center": [
          104.968050,
          29.285946
        ],
        "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
        "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:黑体,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
@@ -2027,6 +2039,10 @@
          "pixels",
          "pixels"
        ],
        "center": [
          104.81804,
          29.440594
        ],
        "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
        "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:黑体,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
      },
@@ -2913,6 +2929,10 @@
          "pixels",
          "pixels"
        ],
        "center": [
          104.599106,
          29.341427
        ],
        "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
        "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:黑体,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
      },
@@ -3734,6 +3754,10 @@
        "icon-offset-units": [
          "pixels",
          "pixels"
        ],
        "center": [
          104.3334,
          29.2938
        ],
        "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
        "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:黑体,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
@@ -5281,6 +5305,10 @@
          "pixels",
          "pixels"
        ],
        "center": [
          105.104762,
          29.518852
        ],
        "icon": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png",
        "Style": "BRUSH(id:ogr-brush-1);PEN(c:#4d90feff,w:1.000000px,id:ogr-pen-0);LABEL(f:黑体,s:11.000000pt,c:#ffffffff,w:100.000000,o:#000000ff)"
      },

 src/views/screen/components/screen-map-three/experience/cssRenderer.js

New file
@@ -0,0 +1,31 @@
import * as THREE from 'three';
import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
export default class CSSRenderer {
  constructor(experience) {
    this.experience = experience;
    this.container = experience.container;
    this.canvas = experience.canvas;
    this.sizes = experience.sizes;
    this.scene = experience.scene;
    this.camera = experience.camera;

    this.setInstance();
  }
  setInstance() {
    this.instance = new CSS2DRenderer();
    this.instance.setSize(this.sizes.width, this.sizes.height);
    this.instance.domElement.style.position = 'absolute';
    this.instance.domElement.style.top = '0px';
    this.instance.domElement.style.left = '0px';
    this.instance.domElement.style.pointerEvents = 'none';
    this.container.appendChild(this.instance.domElement);

  }
  resize() {
    this.instance.setSize(this.sizes.width, this.sizes.height);
    this.instance.setPixelRatio(this.sizes.pixelRatio);
  }
  update() {
    this.instance.render(this.scene, this.camera.instance);
  }
}

 src/views/screen/components/screen-map-three/experience/index.js

@@ -4,6 +4,7 @@
import World from "./world/world";
import Camera from "./camera";
import Renderer from "./renderer";
import CSSRenderer from './cssRenderer';

// 工具类
import Sizes from "./utils/sizes";
@@ -12,11 +13,13 @@
export default class Experience {
  constructor(canvas) {
    this.canvas = canvas;
    this.container = canvas.parentElement;
    this.sizes = new Sizes(this.canvas);
    this.time = new Time();
    this.scene = new Scene();
    this.camera = new Camera(this);
    this.renderer = new Renderer(this);
    this.cssRenderer = new CSSRenderer(this);
    this.world = new World(this);

    // const size = 100;
@@ -40,6 +43,7 @@
    this.camera.update();
    this.world.update();
    this.renderer.update();
    this.cssRenderer.update();
    this.stats.update();
  }
}

 src/views/screen/components/screen-map-three/experience/world/map.js

@@ -1,6 +1,7 @@
import * as THREE from 'three';
import * as d3 from 'd3';
import mapData from '@/assets/map/zigong2.json';
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';

import textureMapImage from '@/assets/map/texture/gz-map.jpg';
import textureMapFxImage from '@/assets/map/texture/gz-map-fx.jpg';
@@ -17,9 +18,11 @@
export default class Map {
    constructor(experience) {
        this.experience = experience;
        this.scene = this.experience.scene;
        this.camera = this.experience.camera;
        this.scene = experience.scene;
        this.camera = experience.camera;

        this.provinceMeshList = [];
        this.labelList = [];
        this.textureLoader = new THREE.TextureLoader();
        this.setTexture();
        this.operationData(mapData);
@@ -66,6 +69,7 @@
            const province = new THREE.Object3D();
            // 地址
            province.properties = feature.properties.name;
            province.isHover = false;
            // 多个情况
            // console.log(feature.geometry.type);
            if (feature.geometry.type === "MultiPolygon") {
@@ -90,7 +94,9 @@
                    this.provinceMeshList.push(mesh);
                });
            }
            province.isHover = false;
            const label = this.drawLabelText(feature);
            this.labelList.push({ name: feature.properties.name, label });
            province.add(label);
            this.map.add(province);
        });
        this.map.position.set(1, 1, -1.5);
@@ -149,6 +155,22 @@
        ]);
    }

    drawLabelText(province) {
        const [x, y] = projection(province.properties.center);
        const div = document.createElement('div');
        div.innerHTML = province.properties.name;
        div.style.padding = '4px 10px';
        div.style.color = '#fff';
        div.style.fontSize = '16px';
        div.style.position = 'absolute';
        div.style.backgroundColor = 'rgba(25,25,25,0.5)';
        div.style.borderRadius = '5px';
        const label = new CSS2DObject(div);
        div.style.pointerEvents = 'none';
        label.position.set(x, y, MAP_DEPTH + 0.05);
        return label;
    }


    setMouseEvent() {
        this.mouseEvent = this.handleEvent.bind(this);
@@ -177,6 +199,7 @@
            if (intersects.length) {
                let temp = intersects[0].object;
                this.animation(temp.parent);
                this.showLabel(temp.parent);
            } else {
                this.animation();
            }
@@ -231,6 +254,16 @@
        })
    }

    showLabel(province) {
        this.labelList.forEach((item) => {
            // if (item.name === province.properties) {
            //     item.label.element.style.visibility = 'visible';
            // } else {
            //     item.label.element.style.visibility = 'hidden';
            // }
        })
    }

    enterAnimation() {
        gsap.to(this.map.scale, {
            z: 10,