feat:绘制地图

ZhangXianQiang

2024-04-01 bd9cb65c8ee634f1f7bad5a69e891e3a4f46b768

feat:绘制地图

 package.json

@@ -41,6 +41,7 @@
    "axios": "0.24.0",
    "clipboard": "2.0.8",
    "core-js": "3.25.3",
    "d3": "^7.9.0",
    "echarts": "5.4.0",
    "echarts-gl": "^2.0.9",
    "element-ui": "2.15.14",

 src/assets/map/zigong1.json

@@ -13724,7 +13724,7 @@
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "type": "MultiPolygon",
        "coordinates": [
          [
            [
@@ -15232,35 +15232,7 @@
              29.3673757219045,
              0
            ]
          ]
        ]
      },
      "properties": {
        "name": "自流井",
        "styleUrl": "#msn_ylw-pushpin",
        "fill-opacity": 0.7019607843137254,
        "fill": "#323232",
        "stroke-opacity": 1,
        "stroke": "#686868",
        "stroke-width": 5,
        "icon-scale": 1.1,
        "icon-offset": [
          20,
          2
        ],
        "icon-offset-units": [
          "pixels",
          "pixels"
        ],
        "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)"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          ],
          [
            [
              104.734902857524,
@@ -20511,6 +20483,7 @@
        "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)"
      }
    },

    {
      "type": "Feature",
      "geometry": {

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

@@ -1,24 +1,90 @@
import * as THREE from 'three';
import * as d3 from 'd3';
import mapData from '@/assets/map/zigong.json';

export default class Test {

const projection = d3.geoMercator().center([104.779307, 29.33924]).translate([0, 0, 0]);
export default class Map {
    constructor(experience) {
        this.experience = experience;
        this.scene = this.experience.scene;
        this.operationData(mapData);
    }
    operationData(jsondata) {
        this.map = new THREE.Object3D();
        // geo信息
        const features = jsondata.features;
        features.forEach((feature) => {
            // 单个省份 对象
            const province = new THREE.Object3D();
            // 地址
            province.properties = feature.properties.name;
            const coordinates = feature.geometry.coordinates;

        this.setGeometry();
        this.setMaterial();
        this.setMesh();
    }
    setGeometry() {
        this.geometry = new THREE.BoxGeometry(2,2,2);
    }
    setMaterial() {
        this.geometryMaterial = new THREE.MeshStandardMaterial({
            color: '#db929d'
            // 多个情况
            if (feature.geometry.type === "MultiPolygon") {
                coordinates.forEach((coordinate) => {
                    coordinate.forEach((rows) => {
                        const line = this.drawBoundary(rows);
                        const mesh = this.drawExtrudeMesh(rows);
                        province.add(line);
                        province.add(mesh);
                    });
                });
            }

            // 单个情况
            if (feature.geometry.type === "Polygon") {
                coordinates.forEach((coordinate) => {
                    const line = this.drawBoundary(coordinate);
                    const mesh = this.drawExtrudeMesh(coordinate);
                    province.add(line);
                    province.add(mesh);
                });
            }
            this.map.add(province);
            this.map.position.set(0, 0, 0);
        });
        this.scene.add(this.map);
    }
    setMesh() {
        this.geometrytMesh = new THREE.Mesh(this.geometry, this.geometryMaterial);
        this.scene.add(this.geometrytMesh);
    drawBoundary(polygon) {
        const points = [];
        for (let i = 0; i < polygon.length; i++) {
            const [x, y] = projection(polygon[i]);
            points.push(new THREE.Vector3(x, -y, 0));
        }
        const lineGeometry = new THREE.BufferGeometry().setFromPoints(points);
        const lineMaterial = new THREE.LineBasicMaterial({
            color: 'yellow'
        });

        return new THREE.Line(lineGeometry, lineMaterial);
    }

    drawExtrudeMesh(polygon) {
        const shape = new THREE.Shape();

        for (let i = 0; i < polygon.length; i++) {
            const [x, y] = projection(polygon[i]);

            if (i === 0) {
                shape.moveTo(x, -y);
            }

            shape.lineTo(x, -y);
        }

        const geometry = new THREE.ExtrudeGeometry(shape, {
            depth: 0,
            bevelEnabled: false
        });

        const material = new THREE.MeshBasicMaterial({
            color: '#fff',
            transparent: true,
            opacity: 0.2,
        })

        return new THREE.Mesh(geometry, material);
    }
}

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

@@ -1,13 +1,13 @@
import EventEmitter from '../utils/eventEmitter';

import Test from "./test";
import Map from './map';

export default class World extends EventEmitter  {
  constructor(experience) {
    super();
    this.experience = experience;
    this.scene = this.experience.scene;
    this.Test = new Test(this.experience);
    this.Map = new Map(this.experience);
  }

  update() {