地图加工

zhsq_qk-ui/src/map3d/drawFunc.js

@@ -12,7 +12,8 @@ import { mapConfig } from "./mapConfig";
 // 绘制挤出的材质
 export function drawExtrudeMesh(
   point,
-  projectionFn
+  projectionFn,
+  featureColor
 ) {
   const shape = new THREE.Shape();
   const pointsArray = [];
@@ -32,8 +33,8 @@ export function drawExtrudeMesh(
   });
 
   const material = new THREE.MeshPhongMaterial({
-    // color: mapConfig.mapColor,
-    color: mapConfig.mapColorGradient[Math.floor(Math.random() * 4)], // 随机颜色
+    color: featureColor,
+    // color: mapConfig.mapColorGradient[Math.floor(Math.random() * 4)], // 随机颜色
     // transparent: mapConfig.mapTransparent,
     // opacity: mapConfig.mapOpacity,
   });
@@ -119,10 +120,12 @@ export function generateMapObject3D(
     // 每个坐标数组
     const featureCoords =
       basicFeatureItem.geometry.coordinates;
+    // 地图每个区块颜色
+    const featureColor = basicFeatureItem.properties.customColor
     // 每个中心点位置
     const featureCenterCoord =
-      basicFeatureItem.properties.centroid &&
-      projectionFn(basicFeatureItem.properties.centroid);
+      basicFeatureItem.properties.centroid 
+      && projectionFn(basicFeatureItem.properties.centroid);
     // 名字
     const featureName = basicFeatureItem.properties.name;
     console.log('featureName',featureName)
@@ -150,7 +153,7 @@ export function generateMapObject3D(
     // Polygon 类型
     if (featureType === "Polygon") {
       featureCoords.forEach((polygon) => {
-        const { mesh, line } = drawExtrudeMesh(polygon, projectionFn);
+        const { mesh, line } = drawExtrudeMesh(polygon, projectionFn,featureColor);
         provinceMapObject3D.add(mesh);
         provinceMapObject3D.add(line);
       });
@@ -167,7 +170,6 @@ export function generateMapLabel2D(label2dData) {
   const labelObject2D = new THREE.Object3D();
   label2dData.forEach((item) => {
     const { featureCenterCoord, featureName } = item;
-    debugger
     const labelObjectItem = draw2dLabel(featureCenterCoord, featureName);
     if (labelObjectItem) {
       labelObject2D.add(labelObjectItem);
@@ -200,12 +202,19 @@ export function generateMapSpot(label2dData) {
 export const draw2dLabel = (coord, proviceName) => {
   if (coord && coord.length) {
     // 模版字符串
-    const innerHTML = `<div class="your-classname" style="color: #fff">${proviceName}</div>`;
+    const innerHTML = `<div class="your-classname" style="color: #fff;text-shadow: 0px 0px 5px #6affff;">${proviceName}</div>`;
     const labelDiv = document.createElement("div");
     labelDiv.innerHTML = innerHTML;
     labelDiv.style.pointerEvents = "none"; // 禁用事件
     const labelObject = new CSS2DObject(labelDiv);
-    labelObject.position.set(coord[0], -coord[1], mapConfig.label2dZIndex);
+    if(proviceName == '东风街道'){
+      // 东风街道
+      labelObject.position.set(coord[0] + 5.5, -coord[1] + 2.5, mapConfig.label2dZIndex)
+    } else if(proviceName == '广兴街道'){
+      labelObject.position.set(coord[0] + 4.75, -coord[1] - 3.5, mapConfig.label2dZIndex)
+    } else{
+      labelObject.position.set(coord[0], -coord[1], mapConfig.label2dZIndex);
+    }
     return labelObject;
   }
 };

zhsq_qk-ui/src/map3d/index.vue

@@ -110,6 +110,41 @@ export default {
      scene.add(mapObject3D);
 
       /**
+      * 绘制 标注折线(东风)
+      */
+      const points = [];
+      points.push(new THREE.Vector3(34, 24.1, 5));
+      points.push(new THREE.Vector3(25, 25, 5));
+      points.push(new THREE.Vector3(19, 20, 5));
+
+      const geometry = new THREE.BufferGeometry().setFromPoints(points);
+
+      // 创建材质
+      const material = new THREE.LineBasicMaterial({ color: '#F4B00D' });
+
+      // 创建线
+      const line = new THREE.Line(geometry, material);
+
+      // 将线添加到场景中
+      scene.add(line);
+
+      //(广兴)
+      const points2 = [];
+      points2.push(new THREE.Vector3(34, 9.7, 5));
+      points2.push(new THREE.Vector3(25, 10.1, 5));
+      points2.push(new THREE.Vector3(20.5, 18, 5));
+
+      const geometry2 = new THREE.BufferGeometry().setFromPoints(points2);
+
+      // 创建材质
+      const material2 = new THREE.LineBasicMaterial({ color: '#F4B00D' });
+
+      // 创建线
+      const line2 = new THREE.Line(geometry2, material2);
+
+      // 将线添加到场景中
+      scene.add(line2);
+      /**
       * 绘制 2D 面板
       */
      const labelObject2D = generateMapLabel2D(label2dData);
@@ -151,6 +186,7 @@ export default {
            -featureCenterCoord[1],
            mapConfig.spotZIndex
          );
+
          // 设置模型大小
          clonedModel.scale.set(0.3, 0.3, 0.6);
          // clonedModel.rotateX(-Math.PI / 8);
@@ -159,7 +195,7 @@ export default {
 
        mapObject3D.add(modelObject3D);
      });
-
+     
      /**
       * 绘制连线（随机生成两个点位）
       */
@@ -289,8 +325,7 @@ export default {
        // 如果存在，则鼠标移出需要重置
        if (lastPick) {
          // lastPick.object.material[0].color.set(mapConfig.mapColor);
-
-         const color = mapConfig.mapColorGradient[Math.floor(Math.random() * 4)];
+         const color = lastPick.object.parent.customProperties.customColor;
          lastPick.object.material[0].color.set(color);
          lastPick.object.material[0].opacity = mapConfig.mapOpacity; // 设置完全不透明
        }

zhsq_qk-ui/src/map3d/mapConfig.js

@@ -10,7 +10,7 @@ export const mapConfig = {
   mapColor: "#1ED760", // 地图原本颜色
   mapHoverColor: "#0B284E", // 地图hover颜色
   // 地图人数渐变
-  mapColorGradient: ["#1ED760", "#3D452B", "#AD9E67", "#556238"],
+  mapColorGradient: ["#1ED760", "#3D452B", "#AD9E67", "#556238","#A7965D"],
   // 地图侧面渐变
   mapSideColor1: "#919154",
   mapSideColor2: "#919154",