优化地图联动相关逻辑

riku

2024-02-05 7607d55d6597d772de1a37598d36e74c4542223e

优化地图联动相关逻辑

 asset/mipmap/scene.png

 css/text.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
.map-marker-label {
  background-color: antiquewhite;
}

 history.mode.js

@@ -455,11 +455,10 @@
          MapUtil.drawSector3(result[0], windDir, windSpeed);

          // 2. ç»˜åˆ¶å¯¹è¯æ¡†
          const window = DialogUtil.createInfoWindow2(factor, () => {
          DialogUtil.openNewWindow2(factor, MapUtil._map, result[0], () => {
            // ç§»é™¤æ‰‡å½¢åŒºåŸŸ
            MapUtil.clearSector3();
            // MapUtil.clearSector3();
          });
          window.open(MapUtil._map, result[0]);
          // 3. è¶‹åŠ¿å›¾è·³è½¬å®šä½
          var f = this.factorDatas.factor[this.factorType + 1 + ''];
          const progress = FChart.locate(

 lib/dialog.js

@@ -1,4 +1,13 @@
var DialogUtil = {
  show: true,
  toggleDataDialog() {
    this.show = !this.show;
    if (this.show) {
      return '数据弹框：开';
    } else {
      return '数据弹框：关';
    }
  },
  /**
   * åˆ›å»ºå¼¹å‡ºæ¡†
   * @param {*} factorDatas ç›‘测数据
@@ -223,4 +232,16 @@
    info.appendChild(bottom);
    return info;
  },

  openNewWindow(factorDatas, i, map, position, onClose) {
    if (!this.show) return
    const window = this.createInfoWindow(factorDatas, i, onClose)
    window.open(map, position);
  },

  openNewWindow2(factorData, map, position, onClose) {
    if (!this.show) return
    const window = this.createInfoWindow2(factorData, onClose)
    window.open(map, position);
  }
};

 lib/map.js

@@ -50,18 +50,49 @@
    this._map.remove(views);
  },

  addMarkers(markers) {
  addElasticMarkers(markers) {
    const zoomStyleMapping = {
      14: 0,
      15: 0,
      16: 0,
      17: 0,
      18: 0,
      19: 0,
      20: 0,
    };
    const mList = [];
    markers.forEach((m) => {
      var marker = new AMap.Marker({
        position: new AMap.LngLat(m.lng, m.lat), // ç»çº¬åº¦å¯¹è±¡ï¼Œä¹Ÿå¯ä»¥æ˜¯ç»çº¬åº¦æž„成的一维数组[116.39, 39.9]
      let name = m.name;
      if (m.name.length > 9) {
        const i = m.name.length / 2;
        const str1 = m.name.slice(0, i + 1);
        const str2 = m.name.slice(i + 1, m.name.length);
        name = `${str1}<br />${str2}`;
      }
      var marker = new AMap.ElasticMarker({
        title: m.name,
        offset: new AMap.Pixel(-13, -12),
        // anchor: 'center',
        icon: new AMap.Icon({
          image: './asset/mipmap/c_level_no.png',
          // imageSize: [12, 12],
        }),
        zoom: [14, 20],
        position: new AMap.LngLat(m.lng, m.lat),
        styles: [
          {
            icon: {
              img: './asset/mipmap/scene.png',
              size: [16, 16], //可见区域的大小
              ancher: [8, 16], //锚点
              fitZoom: 14, //最合适的级别
              scaleFactor: 1.4, //地图放大一级的缩放比例系数
              maxScale: 2, //最大放大比例
              minScale: 1, //最小放大比例
            },
            label: {
              content: `<div>${name}</div>`,
              offset: [-35, 0],
              position: 'BM',
              minZoom: 15,
            },
          },
        ],
        zoomStyleMapping: zoomStyleMapping,
      });
      mList.push(marker);
    });
@@ -180,14 +211,14 @@

    // åˆ›å»ºæ ·å¼å¯¹è±¡
    var styleObject = {
      url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
      // url: './asset/mipmap/ic_up_white.png', // å›¾æ ‡åœ°å€
      size: new AMap.Size(11, 11), // å›¾æ ‡å¤§å°
      anchor: new AMap.Pixel(5, 5), // å›¾æ ‡æ˜¾ç¤ºä½ç½®åç§»é‡ï¼ŒåŸºå‡†ç‚¹ä¸ºå›¾æ ‡å·¦ä¸Šè§’
    };
    var massMarks = new AMap.MassMarks(data, {
      zIndex: 5, // æµ·é‡ç‚¹å›¾å±‚叠加的顺序
      zooms: [3, 18], // åœ¨æŒ‡å®šåœ°å›¾ç¼©æ”¾çº§åˆ«èŒƒå›´å†…展示海量点图层
      zooms: [15, 18], // åœ¨æŒ‡å®šåœ°å›¾ç¼©æ”¾çº§åˆ«èŒƒå›´å†…展示海量点图层
      style: styleObject, // è®¾ç½®æ ·å¼å¯¹è±¡
    });
    massMarks.on('click', (event) => {
@@ -207,11 +238,10 @@
      this.drawSector3(lnglats[i], windDir, windSpeed);

      // 2. ç»˜åˆ¶å¯¹è¯æ¡†
      const window = DialogUtil.createInfoWindow(fDatas, i, () => {
      DialogUtil.openNewWindow(fDatas, i, MapUtil._map, lnglats[i], () => {
        // ç§»é™¤æ‰‡å½¢åŒºåŸŸ
        this.clearSector3();
        // this.clearSector3();
      });
      window.open(MapUtil._map, lnglats[i]);

      // 3. è¶‹åŠ¿å›¾è·³è½¬å®šä½
      const progress = FChart.locate(
@@ -289,10 +319,11 @@
  _sector: undefined,
  _sectorViews3: {},
  drawSector3: function (lnglat, windDir, windSpeed) {
    // this._map.remove(MapUtil._sectorViews)
    // MapUtil._sectorViews = []
    if (windSpeed > 10) {
      return;
    }
    if (MapUtil._sectorViews3['text10'] != undefined) {
      this.clearSector3();
    }

    var sector = new AMap.Object3D.Mesh();
@@ -364,89 +395,129 @@
      geometry.faces.push(index + 3, index + 4, index + 5);
      geometry.faces.push(index + 4, index + 5, index + 6);
    }

    if (this._sector != undefined) {
      this._object3Dlayer.remove(this._sector);
    }
    this._object3Dlayer.add(sector);
    this._sector = sector;

    distance = distance.toFixed(0);
    distance2 = distance2.toFixed(0);
    const zoomStyleMapping = {
      14: 0,
      15: 0,
      16: 0,
      17: 0,
      18: 0,
      19: 0,
      20: 0,
    };
    //10分钟扇形
    if (MapUtil._sectorViews3['text10'] == undefined) {
      var text15 = new AMap.Text({
        text: '10分钟',
    var text15 = new AMap.ElasticMarker({
      zoom: [14, 20],
        position: list[2],
        // animation: "AMAP_ANIMATION_DROP"
      styles: [
        {
          icon: {
            img: './asset/mipmap/location.png',
            size: [16, 16], //可见区域的大小
            ancher: [8, 16], //锚点
            fitZoom: 18, //最合适的级别
            scaleFactor: 1, //地图放大一级的缩放比例系数
            maxScale: 2, //最大放大比例
            minScale: 1, //最小放大比例
          },
          label: {
            content: '<div>10分钟</div>',
            offset: [-35, 0],
            position: 'BM',
            minZoom: 15,
          },
        },
      ],
      zoomStyleMapping: zoomStyleMapping,
      });
      MapUtil._sectorViews3['text10'] = text15;
      var textM = new AMap.Text({
        text: distance + 'm',
    var textM = new AMap.ElasticMarker({
      zoom: [14, 20],
        position: list[1],
        // animation: "AMAP_ANIMATION_DROP"
      styles: [
        {
          icon: {
            img: './asset/mipmap/location.png',
            size: [16, 16], //可见区域的大小
            ancher: [8, 16], //锚点
            fitZoom: 18, //最合适的级别
            scaleFactor: 1, //地图放大一级的缩放比例系数
            maxScale: 2, //最大放大比例
            minScale: 1, //最小放大比例
          },
          label: {
            content: `<div>${distance}m</div>`,
            offset: [-35, 0],
            position: 'BM',
            minZoom: 15,
          },
        },
      ],
      zoomStyleMapping: zoomStyleMapping,
      });
      MapUtil._sectorViews3['textM'] = textM;
    } else {
      MapUtil._sectorViews3['text10'].setPosition(list[2]);
      MapUtil._sectorViews3['textM'].setPosition(list[1]);
      MapUtil._sectorViews3['textM'].setText(distance + 'm');
    }
    MapUtil._map.add(MapUtil._sectorViews3['text10']);
    MapUtil._map.add(MapUtil._sectorViews3['textM']);

    // ç¼©æ”¾åœ°å›¾åˆ°åˆé€‚的视野级别
    // if (animation != false) {
    //     MapUtil._map.setFitView([bezierCurve, line1, line2])
    // }

    //5分钟扇形

    pList = list2;
    // MapUtil._map.setCenter(pList[0])
    path = [
      [pList[0].lng, pList[0].lat],
      [pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat],
    ];

    if (MapUtil._sectorViews3['textM5'] == undefined) {
      var bezierCurve = new AMap.BezierCurve({
        path: path,
        // isOutline: true,
        // outlineColor: '#ffeeff',
        borderWeight: 1,
        strokeColor: '#ffeeff',
        strokeOpacity: 1,
        // strokeWeight: 6,
        // çº¿æ ·å¼è¿˜æ”¯æŒ 'dashed'
        strokeStyle: 'solid',
        // strokeStyle是dashed时有效
        strokeDasharray: [10, 10],
        lineJoin: 'round',
        lineCap: 'round',
        zIndex: 50,
      });
      // bezierCurve.setMap(MapUtil._map)
      // MapUtil._sectorViews3['bezierCurve'] = bezierCurve

      var text5 = new AMap.Text({
        text: '5分钟',
    var text5 = new AMap.ElasticMarker({
        position: pList[1],
        // animation: "AMAP_ANIMATION_DROP"
      styles: [
        {
          icon: {
            img: './asset/mipmap/location.png',
            size: [16, 16], //可见区域的大小
            ancher: [8, 16], //锚点
            fitZoom: 18, //最合适的级别
            scaleFactor: 1, //地图放大一级的缩放比例系数
            maxScale: 2, //最大放大比例
            minScale: 1, //最小放大比例
          },
          label: {
            content: `<div>5分钟</div>`,
            offset: [-35, 0],
            position: 'BM',
            minZoom: 15,
          },
        },
      ],
      zoomStyleMapping: zoomStyleMapping,
      });
      MapUtil._sectorViews3['text5'] = text5;
      var textM5 = new AMap.Text({
        text: distance2 + 'm',
    var textM5 = new AMap.ElasticMarker({
        position: pList[0],
        // animation: "AMAP_ANIMATION_DROP"
      styles: [
        {
          icon: {
            img: './asset/mipmap/location.png',
            size: [16, 16], //可见区域的大小
            ancher: [8, 16], //锚点
            fitZoom: 18, //最合适的级别
            scaleFactor: 1, //地图放大一级的缩放比例系数
            maxScale: 2, //最大放大比例
            minScale: 1, //最小放大比例
          },
          label: {
            content: `<div>${distance2}m</div>`,
            offset: [-35, 0],
            position: 'BM',
            minZoom: 15,
          },
        },
      ],
      zoomStyleMapping: zoomStyleMapping,
      });
      MapUtil._sectorViews3['textM5'] = textM5;
    } else {
      // MapUtil._sectorViews3['bezierCurve'].setPath(path)
      MapUtil._sectorViews3['text5'].setPosition(pList[1]);
      MapUtil._sectorViews3['textM5'].setPosition(pList[0]);
      MapUtil._sectorViews3['textM5'].setText(distance2 + 'm');
    }
    MapUtil._map.add(MapUtil._sectorViews3['textM5']);
    MapUtil._map.add(MapUtil._sectorViews3['text5']);


 lib/scene.js

@@ -31,7 +31,7 @@
            lat: v.latitude,
          };
        });
        this._markList = MapUtil.addMarkers(markers);
        this._markList = MapUtil.addElasticMarkers(markers);
      }
    );
  },

 underway.html

@@ -16,7 +16,8 @@
    <link rel="stylesheet" href="./css/border.css?v=6">
    <link rel="stylesheet" href="./css/component.css?v=3">
    <link rel="stylesheet" href="./css/jackwei.slider.css?v=2">
    <link rel="stylesheet" href="./css//myBootstrap.css">
    <link rel="stylesheet" href="./css/myBootstrap.css">
    <link rel="stylesheet" href="./css/text.css">
    <style type="text/css">
        /* åŽ»é™¤é«˜å¾·åœ°å›¾çš„固定版号图标 */
        .amap-logo {
@@ -28,6 +29,19 @@
        }
        .amap-overlays {
            z-index: 0;
        }
        .amap-marker-label{
            /* width: 100px;
            max-width: 200px; */
            font-size: 13px;
            text-align: center;
            color: white;
            background-color: transparent;
            text-shadow: black 2px 2px 2px;
            border-radius: 2px;
            border:  0px;
            padding: 4px;
            /* white-space: pre-wrap; */
        }
    </style>

@@ -86,6 +100,10 @@
                            <i class="fa fa-compass" aria-hidden="true"></i>
                            <span>数据标记：开</span>
                        </button>
                        <button id="btn_data_dialog" type="button" class="btn btn-outline-info btn-block">
                            <i class="fa fa-compass" aria-hidden="true"></i>
                            <span>数据弹框：开</span>
                        </button>
                    </form>
                </div>
            </div>

 underway.js

@@ -548,6 +548,13 @@
    b.toggleClass('btn-outline-info');
    $(b.children('span').get(0)).text(text);
  });
  $('#btn_data_dialog').on('click', function () {
    var text = DialogUtil.toggleDataDialog();
    var b = $(this);
    b.toggleClass('btn-outline-secondary');
    b.toggleClass('btn-outline-info');
    $(b.children('span').get(0)).text(text);
  });

  /************************历史轨迹动画***********************************/
  $('#btn_stop').on('click', function () {