bbj-screen-widget 2.4.62 → 2.4.63

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

@@ -1,690 +0,0 @@
-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() {}
-}