bbj-screen-widget 2.4.60 → 2.4.62

package/src/lib/planimetric-map2d/planimetric-map2d.component.ts

@@ -0,0 +1,690 @@
+import {
+  Component,
+  OnInit,
+  forwardRef,
+  ViewChild,
+  ElementRef,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  EventEmitter,
+} from '@angular/core';
+import { Widget, Property, Data, DataOutput, Event } from 'bbj-widget-base';
+import { ParentContainerComponent } from '../parent-container/parent-container.component';
+import { HttpClient } from '@angular/common/http';
+import * as echarts from 'echarts';
+import { NgxEchartsDirective } from 'ngx-echarts';
+import { getEchartsTextStyle } from '../shared/util/echarts.util';
+
+@Component({
+  selector: 'sc-planimetric-map2d',
+  templateUrl: './planimetric-map2d.component.html',
+  styleUrls: ['./planimetric-map2d.component.less'],
+  providers: [{ provide: ParentContainerComponent, useExisting: forwardRef(() => PlanimetricMap2dComponent) }],
+})
+@Widget('2D平面地图', {
+  group: 'component',
+  image: 'assets/img/screen/2dmap.png',
+  icon: 'iconmokuai',
+  children: [
+    {
+      title: '呼吸气泡层',
+      type: 'sc-breathing-bubble-layer',
+      option: {},
+      hidden: true,
+      hideChild: true,
+    },
+  ],
+  childTypes: [
+    'sc-fly-line-layer',
+    'sc-breathing-bubble-layer',
+    'sc-map2d-polyline-layer',
+    'sc-map2d-mark-layer',
+    'sc-map2d-visual-layer',
+  ],
+  description: 'hasChildItem',
+})
+export class PlanimetricMap2dComponent extends ParentContainerComponent implements OnInit, OnDestroy, OnChanges {
+  @Property('地图样式', {
+    ui: {
+      widget: 'myUrlSelect',
+      url: '/assets/mapListItem.json',
+    },
+  })
+  mapStyle = 'china';
+  @Property('地图缩放', {
+    ui: { widget: 'myRange', min: 1, max: 40, step: 1 },
+  })
+  zoom = 1;
+  @Property('区域背景', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  areaColor = '#323c48';
+  @Property('区域描边', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  borderColor = '#404a59';
+  @Property('移动高亮', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  _areaColor = '#2a333d';
+  @Property('地区字体', { ui: { widget: 'myFont' } })
+  areaNamefont: any = {
+    family: '',
+    color: '#FFFFFF',
+    weight: 'normal',
+    size: 12,
+    space: 0,
+    lineHeight: 12,
+  };
+  @Property('显示地名', {
+    type: 'boolean',
+  })
+  showAreaName = true;
+  @Property('触发方式', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '点击', value: 'click' },
+      { label: '鼠标移动', value: 'mousemove' },
+    ],
+  })
+  triggerType = 'mousemove';
+  @Property('选中方式', {
+    ui: { widget: 'select' },
+    enum: [
+      { label: '默认', value: '' },
+      { label: '单选', value: 'single' },
+      { label: '多选', value: 'multiple' },
+    ],
+  })
+  selectedMode = '';
+
+  @Property('缩放开关', {
+    type: 'boolean',
+  })
+  zoomSwitch = 'false';
+  @Property('高亮描边', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  _borderColor = '';
+  @Property('阴影颜色', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  shadowColor = '#2a333d';
+  @Property('边框粗细', {
+    type: 'number',
+  })
+  shadowWidth = 20;
+  @Property('地图渐变开始', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  mapColorStart = '#2a333d';
+  @Property('地图渐变结束', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  mapColorEnd = '#2a333d';
+  @Property('选中渐变开始', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  selectColorStart = '#2a333d';
+  @Property('选中渐变结束', {
+    ui: {
+      widget: 'myColor',
+      example: ['#D0021B', '#F5A623', '#F8E71C', '#50E3C2', '#3285FF', '#B45FFF', '#9B9B9B', '#333333'],
+    },
+  })
+  selectColorEnd = '#2a333d';
+
+  chartOption: any;
+  hasMap = false;
+  @Data({
+    properties: {
+      name: { type: 'string', title: '地名' },
+      lng: { type: 'number', title: '经度' },
+      lat: { type: 'string', title: '纬度' },
+    },
+  })
+  data: any[] = [];
+  @DataOutput(['name', 'lng', 'lat'])
+  @Event('选中', {
+    params: {
+      properties: {
+        name: { type: 'string', title: '值' },
+        lng: { type: 'number', title: '经度' },
+        lat: { type: 'string', title: '纬度' },
+      },
+    },
+  })
+  areaClick = new EventEmitter();
+
+  nameMap: any = {
+    Somalia: '索马里',
+    Liechtenstein: '列支敦士登',
+    Morocco: '摩洛哥',
+    'W. Sahara': '西撒哈拉',
+    Serbia: '塞尔维亚',
+    Afghanistan: '阿富汗',
+    Angola: '安哥拉',
+    Albania: '阿尔巴尼亚',
+    Aland: '奥兰群岛',
+    Andorra: '安道尔',
+    'United Arab Emirates': '阿拉伯联合酋长国',
+    Argentina: '阿根廷',
+    Armenia: '亚美尼亚',
+    'American Samoa': '美属萨摩亚',
+    'Fr. S. Antarctic Lands': '法属南部领地',
+    'Antigua and Barb.': '安提瓜和巴布达',
+    Australia: '澳大利亚',
+    Austria: '奥地利',
+    Azerbaijan: '阿塞拜疆',
+    Burundi: '布隆迪',
+    Belgium: '比利时',
+    Benin: '贝宁',
+    'Burkina Faso': '布基纳法索',
+    Bangladesh: '孟加拉国',
+    Bulgaria: '保加利亚',
+    Bahrain: '巴林',
+    Bahamas: '巴哈马',
+    'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
+    Belarus: '白俄罗斯',
+    Belize: '伯利兹',
+    Bermuda: '百慕大',
+    Bolivia: '玻利维亚',
+    Brazil: '巴西',
+    Barbados: '巴巴多斯',
+    Brunei: '文莱',
+    Bhutan: '不丹',
+    Botswana: '博茨瓦纳',
+    'Central African Rep.': '中非共和国',
+    Canada: '加拿大',
+    Switzerland: '瑞士',
+    Chile: '智利',
+    China: '中国',
+    "Côte d'Ivoire": '科特迪瓦',
+    Cameroon: '喀麦隆',
+    'Dem. Rep. Congo': '刚果（金）',
+    Congo: '刚果（布）',
+    Colombia: '哥伦比亚',
+    Comoros: '科摩罗',
+    'Cape Verde': '佛得角',
+    'Costa Rica': '哥斯达黎加',
+    Cuba: '古巴',
+    Curaçao: '库拉索',
+    'Cayman Is.': '开曼群岛',
+    'N. Cyprus': '北塞浦路斯',
+    Cyprus: '塞浦路斯',
+    'Czech Rep.': '捷克',
+    Germany: '德国',
+    Djibouti: '吉布提',
+    Dominica: '多米尼克',
+    Denmark: '丹麦',
+    'Dominican Rep.': '多米尼加',
+    Algeria: '阿尔及利亚',
+    Ecuador: '厄瓜多尔',
+    Egypt: '埃及',
+    Eritrea: '厄立特里亚',
+    Spain: '西班牙',
+    Estonia: '爱沙尼亚',
+    Ethiopia: '埃塞俄比亚',
+    Finland: '芬兰',
+    Fiji: '斐济',
+    'Falkland Is.': '福克兰群岛',
+    France: '法国',
+    'Faeroe Is.': '法罗群岛',
+    Micronesia: '密克罗尼西亚',
+    Gabon: '加蓬',
+    'United Kingdom': '英国',
+    Georgia: '格鲁吉亚',
+    Ghana: '加纳',
+    Guinea: '几内亚',
+    Gambia: '冈比亚',
+    'Guinea-Bissau': '几内亚比绍',
+    'Eq. Guinea': '赤道几内亚',
+    Greece: '希腊',
+    Grenada: '格林纳达',
+    Greenland: '格陵兰',
+    Guatemala: '危地马拉',
+    Guam: '关岛',
+    Guyana: '圭亚那',
+    'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
+    Honduras: '洪都拉斯',
+    Croatia: '克罗地亚',
+    Haiti: '海地',
+    Hungary: '匈牙利',
+    Indonesia: '印度尼西亚',
+    'Isle of Man': '马恩岛',
+    India: '印度',
+    'Br. Indian Ocean Ter.': '英属印度洋领地',
+    Ireland: '爱尔兰',
+    Iran: '伊朗',
+    Iraq: '伊拉克',
+    Iceland: '冰岛',
+    Israel: '以色列',
+    Italy: '意大利',
+    Jamaica: '牙买加',
+    Jersey: '泽西岛',
+    Jordan: '约旦',
+    Japan: '日本',
+    'Siachen Glacier': '锡亚琴冰川',
+    Kazakhstan: '哈萨克斯坦',
+    Kenya: '肯尼亚',
+    Kyrgyzstan: '吉尔吉斯斯坦',
+    Cambodia: '柬埔寨',
+    Kiribati: '基里巴斯',
+    Korea: '韩国',
+    Kuwait: '科威特',
+    'Lao PDR': '老挝',
+    Lebanon: '黎巴嫩',
+    Liberia: '利比里亚',
+    Libya: '利比亚',
+    'Saint Lucia': '圣卢西亚',
+    'Sri Lanka': '斯里兰卡',
+    Lesotho: '莱索托',
+    Lithuania: '立陶宛',
+    Luxembourg: '卢森堡',
+    Latvia: '拉脱维亚',
+    Moldova: '摩尔多瓦',
+    Madagascar: '马达加斯加',
+    Mexico: '墨西哥',
+    Macedonia: '北马其顿',
+    Mali: '马里',
+    Malta: '马耳他',
+    Myanmar: '缅甸',
+    Montenegro: '黑山',
+    Mongolia: '蒙古',
+    'N. Mariana Is.': '北马里亚纳群岛',
+    Mozambique: '莫桑比克',
+    Mauritania: '毛里塔尼亚',
+    Montserrat: '蒙特塞拉特',
+    Mauritius: '毛里求斯',
+    Malawi: '马拉维',
+    Malaysia: '马来西亚',
+    Namibia: '纳米比亚',
+    'New Caledonia': '新喀里多尼亚',
+    Niger: '尼日尔',
+    Nigeria: '尼日利亚',
+    Nicaragua: '尼加拉瓜',
+    Niue: '纽埃',
+    Netherlands: '荷兰',
+    Norway: '挪威',
+    Nepal: '尼泊尔',
+    'New Zealand': '新西兰',
+    Oman: '阿曼',
+    Pakistan: '巴基斯坦',
+    Panama: '巴拿马',
+    Peru: '秘鲁',
+    Philippines: '菲律宾',
+    Palau: '帕劳',
+    'Papua New Guinea': '巴布亚新几内亚',
+    Poland: '波兰',
+    'Puerto Rico': '波多黎各',
+    'Dem. Rep. Korea': '朝鲜',
+    Portugal: '葡萄牙',
+    Paraguay: '巴拉圭',
+    Palestine: '巴勒斯坦',
+    'Fr. Polynesia': '法属波利尼西亚',
+    Qatar: '卡塔尔',
+    Romania: '罗马尼亚',
+    Russia: '俄罗斯',
+    Rwanda: '卢旺达',
+    'Saudi Arabia': '沙特阿拉伯',
+    Sudan: '苏丹',
+    'S. Sudan': '南苏丹',
+    Senegal: '塞内加尔',
+    Singapore: '新加坡',
+    'S. Geo. and S. Sandw. Is.': '南乔治亚岛和南桑威奇群岛',
+    'Saint Helena': '圣赫勒拿',
+    'Solomon Is.': '所罗门群岛',
+    'Sierra Leone': '塞拉利昂',
+    'El Salvador': '萨尔瓦多',
+    'St. Pierre and Miquelon': '圣皮埃尔和密克隆',
+    'São Tomé and Principe': '圣多美和普林西比',
+    Suriname: '苏里南',
+    Slovakia: '斯洛伐克',
+    Slovenia: '斯洛文尼亚',
+    Sweden: '瑞典',
+    Swaziland: '斯威士兰',
+    Seychelles: '塞舌尔',
+    Syria: '叙利亚',
+    'Turks and Caicos Is.': '特克斯和凯科斯群岛',
+    Chad: '乍得',
+    Togo: '多哥',
+    Thailand: '泰国',
+    Tajikistan: '塔吉克斯坦',
+    Turkmenistan: '土库曼斯坦',
+    'Timor-Leste': '东帝汶',
+    Tonga: '汤加',
+    'Trinidad and Tobago': '特立尼达和多巴哥',
+    Tunisia: '突尼斯',
+    Turkey: '土耳其',
+    Tanzania: '坦桑尼亚',
+    Uganda: '乌干达',
+    Ukraine: '乌克兰',
+    Uruguay: '乌拉圭',
+    'United States': '美国',
+    Uzbekistan: '乌兹别克斯坦',
+    'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
+    Venezuela: '委内瑞拉',
+    'U.S. Virgin Is.': '美属维尔京群岛',
+    Vietnam: '越南',
+    Vanuatu: '瓦努阿图',
+    Samoa: '萨摩亚',
+    Yemen: '也门',
+    'South Africa': '南非',
+    Zambia: '赞比亚',
+    Zimbabwe: '津巴布韦',
+  };
+  _children: any = [];
+  loadedMap: { [name: string]: Promise<any> } = {};
+  provinces: any;
+  stack = [];
+  visualMap: any[];
+  @ViewChild(NgxEchartsDirective)
+  ngxEcharts: NgxEchartsDirective;
+  renderer = 'svg';
+  constructor(protected http: HttpClient) {
+    super();
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.data) {
+      if (this.data && this.data[0]) {
+        this.mapStyle = this.data[0].name;
+        this.stack.push(this.mapStyle);
+      }
+      this.reloadMap();
+    }
+  }
+  async ngOnInit() {
+    // await this.commonService.getMap();
+    // await import('echarts/dist/extension/bmap.js');
+    this.provinces = (await this.http.get('/assets/mapListItem.json').toPromise()) as any;
+    // const map = echarts.getMap(this.mapStyle);
+    // if (map == null) {
+    //   const data = await this.http.get('assets/echarts/map/json/' + this.mapStyle + '.json').toPromise();
+    //   echarts.registerMap(this.mapStyle, data);
+    // }
+    // this.hasMap = true;
+    // this.chartInit();
+  }
+  ngOnDestroy(): void {
+    if (this.ngxEcharts) {
+      (this.ngxEcharts as any).initChart = () => {};
+    }
+  }
+  chartInit() {
+    // this.loadMap(this.mapStyle).then((data) => {
+    let series = [];
+    this.visualMap = [];
+    this.renderer = 'svg';
+    this._children.forEach((child) => {
+      if (child.type === 'visual') {
+        // series = child.series;
+        // series[0].mapType = this.mapStyle;
+        if (child.visualMap && child.item.length) {
+          if (child.visualMap2) {
+            this.visualMap.push(child.visualMap2);
+          }
+          this.visualMap.push(child.visualMap);
+          child.visualMap.seriesIndex = series.length;
+        }
+      }
+      if (Array.isArray(child.item)) {
+        series = [...series, ...child.item];
+      } else {
+        series = [...series, child.item];
+      }
+    });
+    series.forEach((layer, index) => {
+      if (layer.type === 'lines') {
+        delete layer.coordinateSystem;
+        // 飞线层不支持svg渲染
+        this.renderer = 'canvas';
+      }
+      if (layer.type === 'scatter') {
+        layer.coordinateSystem = 'geo';
+        // layer.symbolSize = '10';
+      }
+      // if (layer.type === 'map') {
+      //   this.visualMap.forEach((visualMap) => {
+      //     visualMap['seriesIndex'] = index;
+      //   });
+      // }
+    });
+    const textStyle = getEchartsTextStyle(this.areaNamefont);
+    this.chartOption = {
+      tooltip: {
+        trigger: 'item',
+        triggerOn: this.triggerType ? this.triggerType : 'mousemove',
+      },
+      geo: {
+        label: {
+          normal: {
+            //静态的时候展示样式
+            show: this.showAreaName, //是否显示地图省份得名称
+            textStyle,
+          },
+          emphasis: {
+            show: this.showAreaName,
+            textStyle,
+          },
+        },
+        selectedMode: this.selectedMode,
+        select: {
+          label: {
+            show: this.showAreaName, //是否显示地图省份得名称
+            textStyle: {
+              color: this.areaNamefont?.color || '#fff',
+              fontSize: this.areaNamefont?.size || 12,
+              fontFamily: this.areaNamefont?.family || '',
+              lineHeight: this.areaNamefont?.lineHeight || 12,
+            },
+          },
+          itemStyle: {
+            areaColor: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.8,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: this.selectColorStart ? this.selectColorStart : this._areaColor, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: this.selectColorEnd ? this.selectColorEnd : this._areaColor, // 100% 处的颜色
+                },
+              ],
+              globalCoord: false, // 缺省为 false
+            },
+            borderColor: this._borderColor,
+          },
+        },
+        itemStyle: {
+          normal: {
+            // areaColor: this.areaColor,
+            borderColor: this.borderColor,
+            opacity: 1,
+            areaColor: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.8,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: this.mapColorStart ? this.mapColorStart : this.areaColor, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: this.mapColorEnd ? this.mapColorEnd : this.areaColor, // 100% 处的颜色
+                },
+              ],
+              globalCoord: false, // 缺省为 false
+            },
+            shadowColor: this.shadowColor,
+            shadowBlur: this.shadowWidth,
+            shadowOffsetX: -2,
+            shadowOffsetY: 2,
+          },
+          emphasis: {
+            areaColor: {
+              type: 'radial',
+              x: 0.5,
+              y: 0.5,
+              r: 0.8,
+              colorStops: [
+                {
+                  offset: 0,
+                  color: this.selectColorStart ? this.selectColorStart : this._areaColor, // 0% 处的颜色
+                },
+                {
+                  offset: 1,
+                  color: this.selectColorEnd ? this.selectColorEnd : this._areaColor, // 100% 处的颜色
+                },
+              ],
+              globalCoord: false, // 缺省为 false
+            },
+            borderColor: this._borderColor,
+          },
+        },
+
+        map: this.mapStyle,
+        roam: this.zoomSwitch,
+        nameMap: this.nameMap,
+        zoom: this.zoom,
+      },
+      series,
+    };
+    if (this.visualMap?.length) {
+      this.chartOption.visualMap = this.visualMap;
+    }
+    // });
+  }
+  childInit(child: any) {
+    if (child.id) {
+      const childIndex = this._children.findIndex((s) => s.id === child.id);
+      if (childIndex > -1) {
+        this._children[childIndex] = child;
+      } else {
+        this._children.push(child);
+      }
+      this.chartInit();
+    }
+  }
+  deleteChild(childId: string) {
+    if (childId) {
+      const childIndex = this._children.findIndex((s) => s.id === childId);
+      // this._children.forEach((element) => {
+      //   if (childId === element.id) {
+      //     this.visualMap = null;
+      //   }
+      // });
+      if (childIndex > -1) {
+        this._children.splice(childIndex, 1);
+        this.chartInit();
+      }
+    }
+  }
+
+  // loadMap(name: string) {
+  //   let loadMapPromise = this.loadedMap[name];
+  //   if (!loadMapPromise) {
+  //     loadMapPromise = this.http.get('assets/echarts/map/json/' + name + '.json').toPromise();
+  //     this.loadedMap[name] = loadMapPromise;
+  //   }
+  //   return loadMapPromise;
+  // }
+  async reloadMap() {
+    const mapStyle = this.mapStyle;
+    const map = echarts.getMap(mapStyle);
+    if (map == null) {
+      const data: any = await this.http.get('assets/echarts/map/json/' + mapStyle + '.json').toPromise();
+      echarts.registerMap(mapStyle, data);
+    }
+    this.hasMap = true;
+    this.chartInit();
+  }
+  async markClick(event) {
+    let lng: number;
+    let lat: number;
+    if (event.seriesId) {
+      lng = event.value[0];
+      lat = event.value[1];
+      const child = this._children.find((s) => event.seriesId.startsWith(s.id));
+      if (child && child.onClick) {
+        child.onClick(event);
+      }
+    } else {
+      const map = echarts.getMap(this.mapStyle);
+      if (map) {
+        for (const feature of map.geoJson.features) {
+          const properties = feature.properties;
+          if (properties.name === event.name) {
+            if (properties.cp) {
+              lng = properties.cp[0];
+              lat = properties.cp[1];
+            } else if (properties.center) {
+              lng = properties.center[0];
+              lat = properties.center[1];
+            } else {
+              console.log(properties);
+            }
+            break;
+          }
+        }
+      }
+      const province = this.provinces.find((element) => element.label === event.name);
+      if (province) {
+        this.stack.push(this.mapStyle);
+        this.mapStyle = province.value;
+        this.reloadMap();
+      }
+    }
+    this.areaClick.emit({ name: event.name, lng, lat });
+    // if(event.componentSubType!=null && event.componentSubType==='scatter'){
+    //   const obj=event.data;
+    //   console.log(event);
+    //   this.markerTierClick.emit({
+    //     address: obj.name,
+    //     information: '',
+    //     group: '',
+    //     lng: obj.value[0],
+    //     lat: obj.value[1],
+    //   });
+    // }
+  }
+  rollback(event: MouseEvent) {
+    event.preventDefault();
+    if (this.stack != null && this.stack.length != 0) {
+      this.mapStyle = this.stack.pop();
+      this.reloadMap();
+    }
+  }
+
+  getTextStyle() {}
+}