riku
2024-02-27 7578c3ff65329b2269f099475eb687e963efac1c
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 (this._sector != undefined) {
      this.clearSector3();
    }
    var sector = new AMap.Object3D.Mesh();
@@ -364,6 +395,207 @@
      geometry.faces.push(index + 3, index + 4, index + 5);
      geometry.faces.push(index + 4, index + 5, index + 6);
    }
    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分钟扇形
    var text15 = new AMap.ElasticMarker({
      zoom: [14, 20],
      position: list[2],
      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.ElasticMarker({
      zoom: [14, 20],
      position: list[1],
      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;
    MapUtil._map.add(MapUtil._sectorViews3['text10']);
    MapUtil._map.add(MapUtil._sectorViews3['textM']);
    //5分钟扇形
    pList = list2;
    path = [
      [pList[0].lng, pList[0].lat],
      [pList[1].lng, pList[1].lat, pList[2].lng, pList[2].lat],
    ];
    var text5 = new AMap.ElasticMarker({
      position: pList[1],
      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.ElasticMarker({
      position: pList[0],
      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;
    MapUtil._map.add(MapUtil._sectorViews3['textM5']);
    MapUtil._map.add(MapUtil._sectorViews3['text5']);
    // 查询范围内的监测站点
    SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
  },
  drawSector4: function (lnglat, windDir, windSpeed) {
    if (windSpeed > 10) {
      return;
    }
    var sector = new AMap.Object3D.Mesh();
    sector.transparent = true;
    sector.backOrFront = 'both';
    var unit = 5;
    var sDeg = windDir - this._defaultDeg; //扇形起始角度(以上方作为0度)
    var eDeg = windDir + this._defaultDeg; //扇形结束角度
    var distance = windSpeed * 10 * 60; //半径(风速*时间)
    var lnglat2 = this._getLatLon(lnglat, distance, sDeg);
    var lnglat3 = this._getLatLon(lnglat, distance, windDir);
    var lnglat4 = this._getLatLon(lnglat, distance, eDeg);
    var list = this.parse2LngLat([lnglat, lnglat2, lnglat3, lnglat4]);
    var distance2 = windSpeed * 5 * 60; //半径(风速*时间)
    var lnglat2_2 = this._getLatLon(lnglat, distance2, sDeg);
    var lnglat2_3 = this._getLatLon(lnglat, distance2, windDir);
    var lnglat2_4 = this._getLatLon(lnglat, distance2, eDeg);
    var list2 = this.parse2LngLat([lnglat2_2, lnglat2_3, lnglat2_4]);
    var p0 = this.lngLatToGeodeticCoord([lnglat])[0];
    var geometry = sector.geometry;
    var count = distance / unit;
    var unitDeg = (eDeg - sDeg) / count;
    for (let i = 0; i < count; i++) {
      var angle1 = sDeg + unitDeg * i;
      var angle2 = sDeg + unitDeg * (i + 1);
      var l1 = this._getLatLon(lnglat, distance, angle1);
      var l2 = this._getLatLon(lnglat, distance, angle2);
      var l3 = this._getLatLon(lnglat, distance2, angle1);
      var l4 = this._getLatLon(lnglat, distance2, angle2);
      var coors = this.lngLatToGeodeticCoord([l1, l2, l3, l4]);
      l1 = coors[0];
      l2 = coors[1];
      l3 = coors[2];
      l4 = coors[3];
      // 内测扇形
      geometry.vertices.push(p0.x, p0.y, 0);
      geometry.vertices.push(l3.x, l3.y, 0);
      geometry.vertices.push(l4.x, l4.y, 0);
      // 外侧扇形
      geometry.vertices.push(l3.x, l3.y, 0);
      geometry.vertices.push(l4.x, l4.y, 0);
      geometry.vertices.push(l1.x, l1.y, 0);
      geometry.vertices.push(l2.x, l2.y, 0);
      // 内测扇形颜色
      geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
      geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
      geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
      //外侧扇形颜色
      geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
      geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
      geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
      geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
      var index = i * 7;
      geometry.faces.push(index, index + 1, index + 2);
      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);
@@ -374,42 +606,53 @@
    distance = distance.toFixed(0);
    distance2 = distance2.toFixed(0);
    //10分钟扇形
    if (MapUtil._sectorViews3['text10'] == undefined) {
    if (MapUtil._sectorViews3['text10-a'] == undefined) {
      var text15 = new AMap.Text({
        text: '10分钟',
        position: list[2],
        // animation: "AMAP_ANIMATION_DROP"
        style: {
          'font-size': '13px',
          'text-align': 'center',
          color: 'white',
          'background-color': 'transparent',
          'text-shadow': 'black 2px 2px 2px',
          'border-radius': '2px',
          border: '0px',
          padding: '4px',
        },
      });
      MapUtil._sectorViews3['text10'] = text15;
      MapUtil._map.add(text15);
      MapUtil._sectorViews3['text10-a'] = text15;
      var textM = new AMap.Text({
        text: distance + 'm',
        position: list[1],
        // animation: "AMAP_ANIMATION_DROP"
        style: {
          'font-size': '13px',
          'text-align': 'center',
          color: 'white',
          'background-color': 'transparent',
          'text-shadow': 'black 2px 2px 2px',
          'border-radius': '2px',
          border: '0px',
          padding: '4px',
        },
      });
      MapUtil._sectorViews3['textM'] = textM;
      MapUtil._map.add(textM);
      MapUtil._sectorViews3['text10M-a'] = textM;
    } else {
      MapUtil._sectorViews3['text10'].setPosition(list[2]);
      MapUtil._sectorViews3['textM'].setPosition(list[1]);
      MapUtil._sectorViews3['textM'].setText(distance + 'm');
      MapUtil._sectorViews3['text10-a'].setPosition(list[2]);
      MapUtil._sectorViews3['text10M-a'].setPosition(list[1]);
      MapUtil._sectorViews3['text10M-a'].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) {
    if (MapUtil._sectorViews3['textM5-a'] == undefined) {
      var bezierCurve = new AMap.BezierCurve({
        path: path,
        // isOutline: true,
@@ -432,26 +675,43 @@
      var text5 = new AMap.Text({
        text: '5分钟',
        position: pList[1],
        style: {
          'font-size': '13px',
          'text-align': 'center',
          color: 'white',
          'background-color': 'transparent',
          'text-shadow': 'black 2px 2px 2px',
          'border-radius': '2px',
          border: '0px',
          padding: '4px',
        },
        // animation: "AMAP_ANIMATION_DROP"
      });
      MapUtil._sectorViews3['text5'] = text5;
      MapUtil._map.add(text5);
      MapUtil._sectorViews3['text5-a'] = text5;
      var textM5 = new AMap.Text({
        text: distance2 + 'm',
        position: pList[0],
        style: {
          'font-size': '13px',
          'text-align': 'center',
          color: 'white',
          'background-color': 'transparent',
          'text-shadow': 'black 2px 2px 2px',
          'border-radius': '2px',
          border: '0px',
          padding: '4px',
        },
        // animation: "AMAP_ANIMATION_DROP"
      });
      MapUtil._sectorViews3['textM5'] = textM5;
      MapUtil._map.add(textM5);
      MapUtil._sectorViews3['textM5-a'] = 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._sectorViews3['text5-a'].setPosition(pList[1]);
      MapUtil._sectorViews3['textM5-a'].setPosition(pList[0]);
      MapUtil._sectorViews3['textM5-a'].setText(distance2 + 'm');
    }
    MapUtil._map.add(MapUtil._sectorViews3['textM5']);
    MapUtil._map.add(MapUtil._sectorViews3['text5']);
    // 查询范围内的监测站点
    SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
  },
  clearSector3: function () {
@@ -459,8 +719,13 @@
    for (const key in this._sectorViews3) {
      list.push(this._sectorViews3[key]);
    }
    this.removeViews(list);
    this._object3Dlayer.remove(this._sector);
    if (list.length > 0) {
      this.removeViews(list);
      this._sectorViews3 = {};
    }
    if (this._sector) {
      this._object3Dlayer.remove(this._sector);
    }
  },
  parse2LngLat: function (lnglats) {
@@ -902,7 +1167,7 @@
   */
  _getScale(minH, maxH) {
    var zoom = MapUtil._map.getZoom();
    console.log(`zoom: ${zoom}`);
    // console.log(`zoom: ${zoom}`);
    if (this._lastZoom == -1) {
      this._lastZoom = zoom;
    } else if (this._lastZoom <= 8) {