gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-653 feat: 地图初始化

Browse Source
This commit is contained in:
chenjinsong
2022-07-26 22:07:53 +08:00
parent 77afe3fe65
commit b7a7ec5e86
9 changed files with 757 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/css/components/index.scss
View File

@@ -53,4 +53,5 @@
@import './views/charts2/npmNetworkQuantity';
@import './views/charts2/networkOverviewApps';
@import './views/charts2/npmTabs';
@import './views/charts2/npmMap';
//@import '../chart';

12
src/assets/css/components/views/charts2/npmMap.scss Normal file
View File

@@ -0,0 +1,12 @@
.cn-chart__map {
height: 100%;
width: 100%;
border-radius: 4px;
overflow: hidden;
.map-canvas {
height: 100%;
width: 100%;
background-color: #CAD2D3;
}
}

3
src/views/charts/charts/ChartMap.vue
View File

@@ -39,7 +39,6 @@ export default {
data () {
return {
unitTypes,
mapPictureUrl: '/Tiles/{z}/{x}/{y}.png',
showMapBackButton: false,
polygonSeries: null, // 世界地图series
countrySeries: null, // 下钻国家series
@@ -247,7 +246,7 @@ export default {
},
imageSeriesFactory (dataField) {
const vm = this
// emcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
// amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
// 指定接口数据中哪个字段名代表数值
imageSeries.dataFields.value = dataField || 'count'

1
src/views/charts/charts/IpBasicInfo.vue
View File

@@ -29,7 +29,6 @@ export default {
data () {
return {
myChart: null,
mapPictureUrl: '/Tiles/{z}/{x}/{y}.png',
entityDetectionsIpUrl: api.entityDetectionsIp,
detectionsData: {}
}

6
src/views/charts2/Chart.vue
View File

@@ -38,6 +38,10 @@
v-else-if="chart.type === typeMapping.npm.npmMap"
:chart="chart"
></npm-map>
<npm-line
v-else-if="chart.type === typeMapping.npm.npmLine"
:chart="chart"
></npm-line>
</div>
</template>
@@ -54,9 +58,11 @@ import NpmTabs from '@/views/charts2/charts/NpmTabs'
import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity'
import NpmAppCategoryScore from '@/views/charts2/charts/NpmAppCategoryScore'
import NpmMap from '@/views/charts2/charts/NpmMap'
import NpmLine from '@/views/charts2/charts/NpmLine'
export default {
name: 'Chart',
components: {
NpmLine,
NpmMap,
NpmAppCategoryScore,
Loading,

1
src/views/charts2/chart-tools.js
View File

@@ -8,6 +8,7 @@ export const typeMapping = {
},
npm: {
npmMap: 1,
npmLine: 101,
npmAppCategoryScore: 702,
npmTabs: 704,
npmNetworkQuantity: 703

9
src/views/charts2/charts/NpmLine.vue Normal file
View File

@@ -0,0 +1,9 @@
<template>
<div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
</template>
<script>
export default {
name: 'NpmLine'
}
</script>

99
src/views/charts2/charts/NpmMap.vue
View File

@@ -1,9 +1,104 @@
<template>
<div style="height: 100%;width: 100%;border: 1px solid #f0f0f0"></div>
<div class="cn-chart__map">
<div class="map-canvas" id="npmMap"></div>
</div>
</template>
<script>
import mapTestData from '@/views/charts2/charts/mapTestData'
import { shallowRef } from 'vue'
import * as am4Core from '@amcharts/amcharts4/core'
import * as am4Maps from '@amcharts/amcharts4/maps'
import { getGeoData } from '@/utils/tools'
import { storageKey } from '@/utils/constants'
export default {
name: 'NpmMap'
name: 'NpmMap',
data () {
return {
mapTestData,
myChart: null,
polygonSeries: null
}
},
methods: {
initMap () {
// 初始化插件
const chart = am4Core.create('npmMap', am4Maps.MapChart)
chart.geodata = getGeoData(storageKey.iso36112WorldLow)
chart.projection = new am4Maps.projections.Miller()
chart.homeZoomLevel = 2
chart.homeGeoPoint = {
latitude: 21,
longitude: 0
}
this.myChart = shallowRef(chart)
this.polygonSeries = shallowRef(this.polygonSeriesFactory())
},
polygonSeriesFactory () {
const polygonSeries = this.myChart.series.push(new am4Maps.MapPolygonSeries())
polygonSeries.useGeodata = true
polygonSeries.exclude = ['AQ'] // 排除南极洲
polygonSeries.tooltip.getFillFromObject = false
polygonSeries.tooltip.background.fill = am4Core.color('#41495D')
polygonSeries.tooltip.background.filters.clear()
polygonSeries.tooltip.background.stroke = '#41495D'
const polygonTemplate = polygonSeries.mapPolygons.template
polygonTemplate.nonScalingStroke = true
polygonTemplate.strokeWidth = 0.5
polygonTemplate.stroke = am4Core.color('#CAD2D3')
polygonTemplate.fill = am4Core.color('#EFEFEF')
return polygonSeries
},
imageSeriesFactory (dataField) {
const vm = this
// amcharts实例中增加地图图案series（用来在地图上画圆点、方块、连线等）
const imageSeries = this.myChart.series.push(new am4Maps.MapImageSeries())
// 指定接口数据中哪个字段名代表数值
imageSeries.dataFields.value = dataField || 'count'
// 取出图案的默认模板，用来接下来做自定义更改
const imageTemplate = imageSeries.mapImages.template
imageTemplate.nonScaling = true
// 通过地区ID来获取经纬度，设置后无需自己提供经纬度
imageTemplate.adapter.add('latitude', function (latitude, target) {
const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
if (polygon) {
return polygon.visualLatitude
}
return latitude
})
imageTemplate.adapter.add('longitude', function (longitude, target) {
const polygon = vm.polygonSeries.getPolygonById(target.dataItem.dataContext.id)
if (polygon) {
return polygon.visualLongitude
}
return longitude
})
// 设置图案样式
const circle = imageTemplate.createChild(am4Core.Circle)
circle.propertyFields.fill = 'color'
circle.propertyFields.stroke = 'border'
circle.strokeWidth = 1
circle.tooltipHTML = this.generatePolygonTooltipHTML()
imageSeries.tooltip.getFillFromObject = false
imageSeries.tooltip.background.fill = am4Core.color('#41495D')
imageSeries.tooltip.background.filters.clear()
imageSeries.tooltip.background.stroke = '#41495D'
imageSeries.heatRules.push({
target: circle,
property: 'radius',
min: 6,
max: 25,
dataField: 'value'
})
return imageSeries
}
},
mounted () {
this.initMap()
}
}
</script>

630
src/views/charts2/charts/mapTestData.js Normal file
View File

@@ -0,0 +1,630 @@
export default {
"msg": "OK",
"code": 200,
"data": {
"result": [
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Paraguay",
"serverId": "PY",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "27435",
"sessions": "119",
"serverCountry": "Sweden",
"serverId": "SE",
"packets": "339",
"bytes": "53044",
"sentBytes": "25609"
},
{
"receivedBytes": "40925",
"sessions": "60",
"serverCountry": "Malaysia",
"serverId": "MY",
"packets": "888",
"bytes": "77424",
"sentBytes": "36499"
},
{
"receivedBytes": "25755",
"sessions": "52",
"serverCountry": "Russia",
"serverId": "",
"packets": "305",
"bytes": "50811",
"sentBytes": "25056"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Nigeria",
"serverId": "NG",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "0",
"sessions": "11",
"serverCountry": "Romania",
"serverId": "RO",
"packets": "11",
"bytes": "898",
"sentBytes": "898"
},
{
"receivedBytes": "3840",
"sessions": "2",
"serverCountry": "Bahrain",
"serverId": "BH",
"packets": "180",
"bytes": "11040",
"sentBytes": "7200"
},
{
"receivedBytes": "8006",
"sessions": "7",
"serverCountry": "Chile",
"serverId": "CL",
"packets": "35",
"bytes": "11307",
"sentBytes": "3301"
},
{
"receivedBytes": "1313470",
"sessions": "229",
"serverCountry": "Japan",
"serverId": "JP",
"packets": "3391",
"bytes": "1505018",
"sentBytes": "191548"
},
{
"receivedBytes": "504",
"sessions": "11",
"serverCountry": "Turkey",
"serverId": "TR",
"packets": "19",
"bytes": "2016",
"sentBytes": "1512"
},
{
"receivedBytes": "1086",
"sessions": "11",
"serverCountry": "Finland",
"serverId": "FI",
"packets": "31",
"bytes": "2495",
"sentBytes": "1409"
},
{
"receivedBytes": "0",
"sessions": "3",
"serverCountry": "Mongolia",
"serverId": "MN",
"packets": "3",
"bytes": "318",
"sentBytes": "318"
},
{
"receivedBytes": "1064",
"sessions": "8",
"serverCountry": "Hungary",
"serverId": "HU",
"packets": "27",
"bytes": "2331",
"sentBytes": "1267"
},
{
"receivedBytes": "17568",
"sessions": "101",
"serverCountry": "Brazil",
"serverId": "BR",
"packets": "240",
"bytes": "40517",
"sentBytes": "22949"
},
{
"receivedBytes": "4564",
"sessions": "3",
"serverCountry": "Kuwait",
"serverId": "KW",
"packets": "46",
"bytes": "7100",
"sentBytes": "2536"
},
{
"receivedBytes": "46123",
"sessions": "95",
"serverCountry": "Viet Nam",
"serverId": "VN",
"packets": "387",
"bytes": "72673",
"sentBytes": "26550"
},
{
"receivedBytes": "126",
"sessions": "3",
"serverCountry": "Belgium",
"serverId": "BE",
"packets": "4",
"bytes": "394",
"sentBytes": "268"
},
{
"receivedBytes": "0",
"sessions": "2",
"serverCountry": "Ecuador",
"serverId": "EC",
"packets": "2",
"bytes": "212",
"sentBytes": "212"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Morocco",
"serverId": "MA",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "70985",
"sessions": "140",
"serverCountry": "India",
"serverId": "IN",
"packets": "558",
"bytes": "123995",
"sentBytes": "53010"
},
{
"receivedBytes": "0",
"sessions": "2",
"serverCountry": "Israel",
"serverId": "IL",
"packets": "2",
"bytes": "212",
"sentBytes": "212"
},
{
"receivedBytes": "279",
"sessions": "3",
"serverCountry": "Norway",
"serverId": "NO",
"packets": "12",
"bytes": "1054",
"sentBytes": "775"
},
{
"receivedBytes": "0",
"sessions": "3",
"serverCountry": "Peru",
"serverId": "PE",
"packets": "3",
"bytes": "318",
"sentBytes": "318"
},
{
"receivedBytes": "61410",
"sessions": "42",
"serverCountry": "Thailand",
"serverId": "TH",
"packets": "404",
"bytes": "90757",
"sentBytes": "29347"
},
{
"receivedBytes": "2683",
"sessions": "9",
"serverCountry": "Ireland",
"serverId": "IE",
"packets": "31",
"bytes": "5553",
"sentBytes": "2870"
},
{
"receivedBytes": "49653235083",
"sessions": "103792",
"serverCountry": "China",
"serverId": "CN",
"packets": "49636392",
"bytes": "51157081522",
"sentBytes": "1503846439"
},
{
"receivedBytes": "773",
"sessions": "18",
"serverCountry": "Portugal",
"serverId": "PT",
"packets": "29",
"bytes": "2614",
"sentBytes": "1841"
},
{
"receivedBytes": "12687",
"sessions": "29",
"serverCountry": "Canada",
"serverId": "CA",
"packets": "249",
"bytes": "35918",
"sentBytes": "23231"
},
{
"receivedBytes": "18779",
"sessions": "79",
"serverCountry": "France",
"serverId": "FR",
"packets": "296",
"bytes": "40830",
"sentBytes": "22051"
},
{
"receivedBytes": "3660",
"sessions": "5",
"serverCountry": "Poland",
"serverId": "PL",
"packets": "44",
"bytes": "7635",
"sentBytes": "3975"
},
{
"receivedBytes": "18177",
"sessions": "51",
"serverCountry": "Italy",
"serverId": "IT",
"packets": "218",
"bytes": "41307",
"sentBytes": "23130"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Greece",
"serverId": "GR",
"packets": "1",
"bytes": "159",
"sentBytes": "159"
},
{
"receivedBytes": "9896",
"sessions": "8",
"serverCountry": "Cambodia",
"serverId": "KH",
"packets": "59",
"bytes": "13885",
"sentBytes": "3989"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Iraq",
"serverId": "IQ",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "5802",
"sessions": "1",
"serverCountry": "Iran",
"serverId": "",
"packets": "21",
"bytes": "6814",
"sentBytes": "1012"
},
{
"receivedBytes": "15514",
"sessions": "37",
"serverCountry": "Spain",
"serverId": "ES",
"packets": "133",
"bytes": "30255",
"sentBytes": "14741"
},
{
"receivedBytes": "0",
"sessions": "2",
"serverCountry": "Colombia",
"serverId": "CO",
"packets": "2",
"bytes": "212",
"sentBytes": "212"
},
{
"receivedBytes": "0",
"sessions": "27",
"serverCountry": "Mexico",
"serverId": "MX",
"packets": "27",
"bytes": "2580",
"sentBytes": "2580"
},
{
"receivedBytes": "247",
"sessions": "2",
"serverCountry": "Myanmar",
"serverId": "MM",
"packets": "28",
"bytes": "2216",
"sentBytes": "1969"
},
{
"receivedBytes": "0",
"sessions": "8",
"serverCountry": "Slovakia",
"serverId": "SK",
"packets": "8",
"bytes": "620",
"sentBytes": "620"
},
{
"receivedBytes": "1171",
"sessions": "20",
"serverCountry": "Austria",
"serverId": "AT",
"packets": "23",
"bytes": "2757",
"sentBytes": "1586"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Algeria",
"serverId": "DZ",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Oman",
"serverId": "OM",
"packets": "1",
"bytes": "148",
"sentBytes": "148"
},
{
"receivedBytes": "91671",
"sessions": "187",
"serverCountry": "Germany",
"serverId": "DE",
"packets": "1321",
"bytes": "147323",
"sentBytes": "55652"
},
{
"receivedBytes": "335",
"sessions": "2",
"serverCountry": "Bulgaria",
"serverId": "BG",
"packets": "3",
"bytes": "615",
"sentBytes": "280"
},
{
"receivedBytes": "498",
"sessions": "1",
"serverCountry": "Laos",
"serverId": "",
"packets": "9",
"bytes": "919",
"sentBytes": "421"
},
{
"receivedBytes": "90",
"sessions": "1",
"serverCountry": "Denmark",
"serverId": "DK",
"packets": "2",
"bytes": "180",
"sentBytes": "90"
},
{
"receivedBytes": "19981",
"sessions": "58",
"serverCountry": "United Kingdom",
"serverId": "",
"packets": "214",
"bytes": "45834",
"sentBytes": "25853"
},
{
"receivedBytes": "998",
"sessions": "4",
"serverCountry": "Venezuela",
"serverId": "",
"packets": "8",
"bytes": "1311",
"sentBytes": "313"
},
{
"receivedBytes": "0",
"sessions": "6",
"serverCountry": "Argentina",
"serverId": "AR",
"packets": "6",
"bytes": "553",
"sentBytes": "553"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Luxembourg",
"serverId": "LU",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "7188",
"sessions": "189",
"serverCountry": "Switzerland",
"serverId": "CH",
"packets": "243",
"bytes": "23417",
"sentBytes": "16229"
},
{
"receivedBytes": "0",
"sessions": "3",
"serverCountry": "Sri Lanka",
"serverId": "LK",
"packets": "3",
"bytes": "318",
"sentBytes": "318"
},
{
"receivedBytes": "8672",
"sessions": "38",
"serverCountry": "Philippines",
"serverId": "PH",
"packets": "339",
"bytes": "23214",
"sentBytes": "14542"
},
{
"receivedBytes": "48638",
"sessions": "66",
"serverCountry": "Indonesia",
"serverId": "ID",
"packets": "448",
"bytes": "86156",
"sentBytes": "37518"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Bangladesh",
"serverId": "BD",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Lithuania",
"serverId": "LT",
"packets": "15",
"bytes": "1950",
"sentBytes": "1950"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Guatemala",
"serverId": "GT",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "40098",
"sessions": "173",
"serverCountry": "South Korea",
"serverId": "",
"packets": "628",
"bytes": "88407",
"sentBytes": "48309"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "New Zealand",
"serverId": "NZ",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "32446",
"sessions": "29",
"serverCountry": "Australia",
"serverId": "AU",
"packets": "209",
"bytes": "51532",
"sentBytes": "19086"
},
{
"receivedBytes": "30462468",
"sessions": "1150",
"serverCountry": "United States",
"serverId": "US",
"packets": "34301",
"bytes": "31632321",
"sentBytes": "1169853"
},
{
"receivedBytes": "0",
"sessions": "1",
"serverCountry": "Uzbekistan",
"serverId": "UZ",
"packets": "1",
"bytes": "106",
"sentBytes": "106"
},
{
"receivedBytes": "2285",
"sessions": "6",
"serverCountry": "Czech Republic",
"serverId": "CZ",
"packets": "47",
"bytes": "5457",
"sentBytes": "3172"
},
{
"receivedBytes": "15064",
"sessions": "11",
"serverCountry": "South Africa",
"serverId": "ZA",
"packets": "118",
"bytes": "29107",
"sentBytes": "14043"
},
{
"receivedBytes": "0",
"sessions": "2",
"serverCountry": "Costa Rica",
"serverId": "CR",
"packets": "2",
"bytes": "212",
"sentBytes": "212"
},
{
"receivedBytes": "20961",
"sessions": "81",
"serverCountry": "The Netherlands",
"serverId": "",
"packets": "231",
"bytes": "41709",
"sentBytes": "20748"
},
{
"receivedBytes": "663000",
"sessions": "355",
"serverCountry": "Singapore",
"serverId": "SG",
"packets": "3065",
"bytes": "894750",
"sentBytes": "231750"
},
{
"receivedBytes": "0",
"sessions": "3",
"serverCountry": "United Arab Emirates",
"serverId": "AE",
"packets": "3",
"bytes": "238",
"sentBytes": "238"
}
],
"resultType": "table"
}
}