|
|
@@ -1,6 +1,7 @@
|
|
|
import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
|
|
|
import { CommonModule } from '@angular/common';
|
|
|
import * as echarts from 'echarts';
|
|
|
+import * as jiangxiMap from '../../../../assets/中华人民共和国.json';
|
|
|
|
|
|
@Component({
|
|
|
selector: 'app-page-co-creation',
|
|
|
@@ -135,42 +136,169 @@ export class PageCoCreation implements AfterViewInit {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- private initArchaeologyMap(): void {
|
|
|
- const chart = echarts.init(this.archaeologyMap.nativeElement);
|
|
|
- chart.setOption({
|
|
|
- tooltip: { trigger: 'item' },
|
|
|
- visualMap: {
|
|
|
- min: 0,
|
|
|
- max: 100,
|
|
|
- calculable: true,
|
|
|
- inRange: { color: ['#f6efa6', '#d88273', '#bf444c'] }
|
|
|
+ private initArchaeologyMap(): void {
|
|
|
+ echarts.registerMap('江西', jiangxiMap as any);
|
|
|
+ const chart = echarts.init(this.archaeologyMap.nativeElement);
|
|
|
+
|
|
|
+ // 更精准的考古遗址数据（含经纬度）
|
|
|
+ const siteData = [
|
|
|
+ {name: '海昏侯墓', value: 95, lng: 115.92, lat: 28.82, period: '汉代', level: '国家级'},
|
|
|
+ {name: '滕王阁遗址', value: 88, lng: 115.88, lat: 28.68, period: '唐代', level: '省级'},
|
|
|
+ {name: '湖田古窑址', value: 92, lng: 117.22, lat: 29.32, period: '宋代', level: '国家级'},
|
|
|
+ {name: '庐山石刻群', value: 85, lng: 115.98, lat: 29.52, period: '唐宋时期', level: '国家级'},
|
|
|
+ {name: '通天岩石窟', value: 82, lng: 114.95, lat: 25.82, period: '唐宋时期', level: '省级'},
|
|
|
+ {name: '龙虎山悬棺', value: 90, lng: 116.98, lat: 28.12, period: '春秋战国', level: '国家级'},
|
|
|
+ {name: '吉州窑遗址', value: 78, lng: 114.97, lat: 27.12, period: '宋代', level: '国家级'},
|
|
|
+ {name: '婺源古村落', value: 82, lng: 117.85, lat: 29.25, period: '明清时期', level: '省级'},
|
|
|
+ {name: '安源煤矿遗址', value: 75, lng: 113.85, lat: 27.63, period: '近代', level: '省级'},
|
|
|
+ {name: '瑞昌铜矿遗址', value: 70, lng: 115.65, lat: 29.68, period: '商周时期', level: '省级'}
|
|
|
+ ];
|
|
|
+
|
|
|
+ // 生成热力数据（含涟漪效果）
|
|
|
+ const heatData = siteData.map(item => ({
|
|
|
+ ...item,
|
|
|
+ ripple: {
|
|
|
+ period: Math.random() * 4 + 4,
|
|
|
+ scale: Math.random() * 0.5 + 1.2
|
|
|
+ }
|
|
|
+ }));
|
|
|
+
|
|
|
+ const option = {
|
|
|
+ title: {
|
|
|
+ text: '江西考古遗址热力图',
|
|
|
+ left: 'center',
|
|
|
+ textStyle: {
|
|
|
+ color: '#2a5daa',
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: function(params: any) {
|
|
|
+ const data = params.data;
|
|
|
+ return `<div class="tooltip-title">${data.name}</div>
|
|
|
+ <div class="tooltip-content">
|
|
|
+ <div><span>历史时期：</span><span>${data.period}</span></div>
|
|
|
+ <div><span>保护等级：</span><span>${data.level}</span></div>
|
|
|
+ <div><span>遗址热度：</span><span>${data.value}</span></div>
|
|
|
+ </div>`;
|
|
|
},
|
|
|
- series: [{
|
|
|
- name: '考古遗址',
|
|
|
- type: 'map',
|
|
|
- map: 'china',
|
|
|
- roam: true,
|
|
|
- zoom: 7,
|
|
|
- center: [115.8, 28.5], // 江西中心坐标
|
|
|
- label: { show: true },
|
|
|
- data: [
|
|
|
- { name: '樟树市', value: 95 },
|
|
|
- { name: '南昌市', value: 85 },
|
|
|
- { name: '九江市', value: 78 },
|
|
|
- { name: '景德镇市', value: 90 },
|
|
|
- { name: '鹰潭市', value: 65 },
|
|
|
- { name: '新余市', value: 50 },
|
|
|
- { name: '萍乡市', value: 60 },
|
|
|
- { name: '赣州市', value: 82 },
|
|
|
- { name: '吉安市', value: 75 },
|
|
|
- { name: '宜春市', value: 70 },
|
|
|
- { name: '抚州市', value: 68 },
|
|
|
- { name: '上饶市', value: 80 }
|
|
|
- ],
|
|
|
- emphasis: { label: { show: true } }
|
|
|
- }]
|
|
|
+ backgroundColor: 'rgba(255,255,255,0.95)',
|
|
|
+ borderColor: '#e8c34d',
|
|
|
+ textStyle: { color: '#333' }
|
|
|
+ },
|
|
|
+ visualMap: {
|
|
|
+ min: 70,
|
|
|
+ max: 100,
|
|
|
+ calculable: true,
|
|
|
+ realtime: false,
|
|
|
+ inRange: {
|
|
|
+ color: ['#f6efa6', '#e8c34d', '#d88273', '#bf444c']
|
|
|
+ },
|
|
|
+ textStyle: { color: '#333' },
|
|
|
+ left: 'left',
|
|
|
+ bottom: '30px',
|
|
|
+ orient: 'horizontal'
|
|
|
+ },
|
|
|
+ geo: {
|
|
|
+ map: '江西',
|
|
|
+ roam: true,
|
|
|
+ zoom: 6.5,
|
|
|
+ center: [116.3, 27.5],
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ color: '#2a5daa',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: 'rgba(42, 93, 170, 0.05)',
|
|
|
+ borderColor: '#2a5daa',
|
|
|
+ borderWidth: 1
|
|
|
+ },
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ areaColor: 'rgba(232, 195, 77, 0.2)'
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ color: '#c1272d',
|
|
|
+ fontWeight: 'bold'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '热力分布',
|
|
|
+ type: 'heatmap',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ data: heatData.map(item => [item.lng, item.lat, item.value]),
|
|
|
+ pointSize: 15,
|
|
|
+ blurSize: 25,
|
|
|
+ minOpacity: 0.4,
|
|
|
+ maxOpacity: 0.8
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '遗址标记',
|
|
|
+ type: 'effectScatter',
|
|
|
+ coordinateSystem: 'geo',
|
|
|
+ data: heatData,
|
|
|
+ symbolSize: function(val: any) {
|
|
|
+ return val[2] / 4;
|
|
|
+ },
|
|
|
+ showEffectOn: 'render',
|
|
|
+ rippleEffect: {
|
|
|
+ period: function(index: number) {
|
|
|
+ return heatData[index].ripple.period;
|
|
|
+ },
|
|
|
+ scale: function(index: number) {
|
|
|
+ return heatData[index].ripple.scale;
|
|
|
+ },
|
|
|
+ brushType: 'fill'
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.5,
|
|
|
+ colorStops: [
|
|
|
+ {offset: 0, color: 'rgba(232, 195, 77, 0.8)'},
|
|
|
+ {offset: 1, color: 'rgba(191, 68, 76, 0.3)'}
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowColor: '#e8c34d'
|
|
|
+ },
|
|
|
+ zlevel: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ chart.setOption(option);
|
|
|
+
|
|
|
+ // 添加地图控制功能
|
|
|
+ document.getElementById('zoom-in')?.addEventListener('click', () => {
|
|
|
+ chart.dispatchAction({ type: 'geoRoam', zoom: 0.2 });
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('zoom-out')?.addEventListener('click', () => {
|
|
|
+ chart.dispatchAction({ type: 'geoRoam', zoom: -0.2 });
|
|
|
+ });
|
|
|
+
|
|
|
+ document.getElementById('reset-view')?.addEventListener('click', () => {
|
|
|
+ chart.setOption({
|
|
|
+ geo: { center: [116.3, 27.5], zoom: 6.5 }
|
|
|
});
|
|
|
- }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 添加鼠标滚轮缩放
|
|
|
+ this.archaeologyMap.nativeElement.addEventListener('wheel', (e: WheelEvent) => {
|
|
|
+ e.preventDefault();
|
|
|
+ chart.dispatchAction({
|
|
|
+ type: 'geoRoam',
|
|
|
+ zoom: e.deltaY < 0 ? 0.1 : -0.1
|
|
|
+ });
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
private resizeCharts(): void {
|
|
|
[this.redCultureChart, this.waterCultureChart, this.heritageChart, this.archaeologyMap].forEach(chart => {
|
0235624