CN-1563 feat: 调整逻辑、删除demo
This commit is contained in:
chenjinsong
857
package-lock.json
generated
857
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -13,16 +13,11 @@
|
||||
"@amcharts/amcharts4": "^4.10.38",
|
||||
"@amcharts/amcharts4-geodata": "^4.1.20",
|
||||
"@antv/g6": "^4.8.17",
|
||||
"@deck.gl/mapbox": "^8.9.34",
|
||||
"@deck.gl/geo-layers": "^8.9.34",
|
||||
"@turf/meta": "^6.5.0",
|
||||
"axios": "^0.21.1",
|
||||
"babel-plugin-lodash": "~3.3.0",
|
||||
"codemirror": "^5.65.1",
|
||||
"core-js": "~3.31.0",
|
||||
"d3-array": "^3.2.4",
|
||||
"dayjs": "^1.10.5",
|
||||
"deck.gl": "^8.9.34",
|
||||
"dexie": "~3.2.0",
|
||||
"echarts": "^5.1.1",
|
||||
"element-plus": "~1.0.2-beta.71",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const BASE_CONFIG = {
|
||||
baseUrl: 'http://192.168.44.54:8090/',
|
||||
version: '23.12',
|
||||
version: '24.03',
|
||||
apiVersion: 'v1'
|
||||
}
|
||||
// 默认时间过滤条件，单位分钟. 0表示请求接口时不传时间参数
|
||||
|
||||
167
src/Temp.vue
167
src/Temp.vue
@@ -1,167 +0,0 @@
|
||||
<template>
|
||||
<div class="geo-analysis">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="geo-analysis__container">
|
||||
<div class="analysis-map" id="analysisMap"></div>
|
||||
<div class="analysis-statistics"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.geo-analysis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px;
|
||||
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 0;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
height: 3px;
|
||||
background-color: #046eca;
|
||||
}
|
||||
.el-tabs__item {
|
||||
&.is-active {
|
||||
color: #046eca;
|
||||
}
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
color: #353636;
|
||||
}
|
||||
}
|
||||
|
||||
.geo-analysis__container {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
|
||||
.analysis-map {
|
||||
flex: 1;
|
||||
}
|
||||
.analysis-statistics {
|
||||
width: 330px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { getNowTime } from '@/utils/date-util'
|
||||
import maplibregl from 'maplibre-gl'
|
||||
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import { MapboxOverlay } from '@deck.gl/mapbox'
|
||||
import { HexagonLayer } from '@deck.gl/aggregation-layers'
|
||||
import _data from '@/test/nyc_crashes.json'
|
||||
|
||||
export default {
|
||||
name: 'Temp',
|
||||
data () {
|
||||
return {
|
||||
activeTab: 'locationMap', // locationMap/traceTracking
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const map = new maplibregl.Map({
|
||||
container: 'analysisMap',
|
||||
style: mapStyle,
|
||||
center: this.center,
|
||||
maxZoom: this.maxZoom,
|
||||
minZoom: this.minZoom,
|
||||
zoom: 10
|
||||
})
|
||||
const data = []
|
||||
_data.features.forEach(item => {
|
||||
data.push({
|
||||
coordinates: item.geometry.coordinates,
|
||||
value: Math.random() * 100
|
||||
})
|
||||
})
|
||||
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
|
||||
fetch(`${params.url.split('://')[1]}`)
|
||||
.then(t => {
|
||||
if (t.status == 200) {
|
||||
t.arrayBuffer().then(arr => {
|
||||
callback(null, arr, null, null)
|
||||
})
|
||||
} else {
|
||||
callback(new Error(`Tile fetch error: ${t.statusText}`))
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
callback(new Error(e))
|
||||
})
|
||||
return { cancel: () => { } }
|
||||
})
|
||||
const colorRange = [
|
||||
[1, 152, 189],
|
||||
[73, 227, 206],
|
||||
[216, 254, 181],
|
||||
[254, 237, 177],
|
||||
[254, 173, 84],
|
||||
[209, 55, 78]
|
||||
]
|
||||
const hexagon = new MapboxOverlay({
|
||||
layers: [
|
||||
new HexagonLayer({
|
||||
id: 'hex',
|
||||
colorRange,
|
||||
coverage: 1,
|
||||
radius: 500,
|
||||
extruded: false,
|
||||
data,
|
||||
wireframe: true,
|
||||
stroked: true,
|
||||
getPosition: d => d.coordinates,
|
||||
pickable: true,
|
||||
getLineColor: d => [0, 0, 0],
|
||||
getLineWidth: () => 2,
|
||||
getFillColor: d => [255, 255, 255]
|
||||
})
|
||||
],
|
||||
getTooltip: ({ object }) => object && {
|
||||
html: `<h2>${object.index}</h2><div>${object.position}</div>`,
|
||||
style: {
|
||||
backgroundColor: '#fff',
|
||||
fontSize: '1em'
|
||||
}
|
||||
}
|
||||
})
|
||||
map.addControl(hexagon)
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.init()
|
||||
},
|
||||
setup () {
|
||||
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
|
||||
const timeFilter = ref({ dateRangeValue })
|
||||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||||
timeFilter.value.startTime = startTime
|
||||
timeFilter.value.endTime = endTime
|
||||
const tooltip = ref({
|
||||
showTooltip: false
|
||||
})
|
||||
const myChart = shallowRef({})
|
||||
return {
|
||||
timeFilter,
|
||||
tooltip,
|
||||
myChart,
|
||||
maxZoom: 13,
|
||||
minZoom: 1,
|
||||
center: [-73.94539, 40.841843] // [116.38, 39.9]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
152
src/Temp2.vue
152
src/Temp2.vue
@@ -1,152 +0,0 @@
|
||||
<template>
|
||||
<div class="geo-analysis">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="geo-analysis__container">
|
||||
<div class="analysis-map" id="analysisMap2"></div>
|
||||
<div class="analysis-statistics"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.geo-analysis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px;
|
||||
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 0;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
height: 3px;
|
||||
background-color: #046eca;
|
||||
}
|
||||
.el-tabs__item {
|
||||
&.is-active {
|
||||
color: #046eca;
|
||||
}
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
color: #353636;
|
||||
}
|
||||
}
|
||||
|
||||
.geo-analysis__container {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
|
||||
.analysis-map {
|
||||
flex: 1;
|
||||
}
|
||||
.analysis-statistics {
|
||||
width: 330px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { getNowTime } from '@/utils/date-util'
|
||||
import maplibregl from 'maplibre-gl'
|
||||
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import { MapboxOverlay } from '@deck.gl/mapbox'
|
||||
import { H3HexagonLayer } from '@deck.gl/geo-layers'
|
||||
import _data from '@/test/nyc_crashes.json'
|
||||
import { h3ToGeo, geoToH3, h3ToGeoBoundary } from 'h3-js'
|
||||
|
||||
export default {
|
||||
name: 'Temp',
|
||||
data () {
|
||||
return {
|
||||
activeTab: 'locationMap', // locationMap/traceTracking
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const map = new maplibregl.Map({
|
||||
container: 'analysisMap2',
|
||||
style: mapStyle,
|
||||
center: this.center,
|
||||
maxZoom: this.maxZoom,
|
||||
minZoom: this.minZoom,
|
||||
zoom: 10
|
||||
})
|
||||
const data = []
|
||||
_data.features.forEach(item => {
|
||||
data.push({
|
||||
hex: geoToH3(item.geometry.coordinates[1], item.geometry.coordinates[0], 9),
|
||||
value: Math.random()
|
||||
})
|
||||
})
|
||||
|
||||
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
|
||||
fetch(`${params.url.split('://')[1]}`)
|
||||
.then(t => {
|
||||
if (t.status == 200) {
|
||||
t.arrayBuffer().then(arr => {
|
||||
callback(null, arr, null, null)
|
||||
})
|
||||
} else {
|
||||
callback(new Error(`Tile fetch error: ${t.statusText}`))
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
callback(new Error(e))
|
||||
})
|
||||
return { cancel: () => { } }
|
||||
})
|
||||
const hexagon = new MapboxOverlay({
|
||||
layers: [
|
||||
new H3HexagonLayer({
|
||||
id: 'hex',
|
||||
data: data,
|
||||
elevationScale: 20,
|
||||
extruded: false,
|
||||
filled: true,
|
||||
getFillColor: d => [255, (1 - d.value) * 255, 0, 160],
|
||||
getLineColor: d => [255, (1 - d.value) * 255 * 1.5 > 255 ? 255 : (1 - d.value) * 255 * 1.5, 0],
|
||||
getLineWidth: 20,
|
||||
getHexagon: d => d.hex,
|
||||
wireframe: false,
|
||||
pickable: true
|
||||
})
|
||||
]
|
||||
})
|
||||
map.addControl(hexagon)
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.init()
|
||||
},
|
||||
setup () {
|
||||
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
|
||||
const timeFilter = ref({ dateRangeValue })
|
||||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||||
timeFilter.value.startTime = startTime
|
||||
timeFilter.value.endTime = endTime
|
||||
const tooltip = ref({
|
||||
showTooltip: false
|
||||
})
|
||||
const myChart = shallowRef({})
|
||||
return {
|
||||
timeFilter,
|
||||
tooltip,
|
||||
myChart,
|
||||
maxZoom: 13,
|
||||
minZoom: 1,
|
||||
center: [-73.94539, 40.841843] // [116.38, 39.9]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
1053
src/Temp3.vue
1053
src/Temp3.vue
File diff suppressed because it is too large
Load Diff
197
src/Temp4.vue
197
src/Temp4.vue
@@ -1,197 +0,0 @@
|
||||
<template>
|
||||
<div class="geo-analysis">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="geo-analysis__container">
|
||||
<div class="analysis-map" id="analysisMap4"></div>
|
||||
<div class="analysis-statistics"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
.geo-analysis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0 20px 20px;
|
||||
|
||||
.el-tabs {
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.el-tabs__nav-wrap::after {
|
||||
height: 0;
|
||||
}
|
||||
.el-tabs__active-bar {
|
||||
height: 3px;
|
||||
background-color: #046eca;
|
||||
}
|
||||
.el-tabs__item {
|
||||
&.is-active {
|
||||
color: #046eca;
|
||||
}
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 20px;
|
||||
color: #353636;
|
||||
}
|
||||
}
|
||||
|
||||
.geo-analysis__container {
|
||||
height: calc(100% - 50px);
|
||||
display: flex;
|
||||
|
||||
.analysis-map {
|
||||
flex: 1;
|
||||
}
|
||||
.analysis-statistics {
|
||||
width: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
.geo-analysis__hexagon-tooltip {
|
||||
position: fixed;
|
||||
background-color: rgba(255,255,255,0.80);
|
||||
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
|
||||
border-radius: 2px;
|
||||
|
||||
&.geo-analysis__hexagon-tooltip--hexagon {
|
||||
width: 185px;
|
||||
}
|
||||
.hexagon-tooltip__header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px 0 10px 63px;
|
||||
color: white;
|
||||
|
||||
.header__icon {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 16px;
|
||||
}
|
||||
.header__title {
|
||||
font-size: 16px;
|
||||
}
|
||||
.header__content {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.hexagon-tooltip__body {
|
||||
padding: 8px 18px;
|
||||
|
||||
.body__item {
|
||||
display: flex;
|
||||
.item__label {
|
||||
width: 60px;
|
||||
font-size: 12px;
|
||||
color: #353636;
|
||||
}
|
||||
.item__value {
|
||||
font-size: 12px;
|
||||
color: #233447;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
import { ref, shallowRef } from 'vue'
|
||||
import { getNowTime } from '@/utils/date-util'
|
||||
import maplibregl from 'maplibre-gl'
|
||||
import mapStyle from '@/views/charts2/charts/entityDetail/mapStyle'
|
||||
import 'maplibre-gl/dist/maplibre-gl.css'
|
||||
import _data4 from '@/test/nyc_crashes3.json'
|
||||
import _data2 from '@/test/humanAndStation.json'
|
||||
import _data3 from '@/test/testHex.json'
|
||||
import hexbinDataConverter from '@/utils/hexbinDataConverter'
|
||||
|
||||
export default {
|
||||
name: 'Temp',
|
||||
data () {
|
||||
return {
|
||||
activeTab: 'locationMap', // locationMap/traceTracking
|
||||
// colorRamp: ['#9CAE1D', '#3F85BA', '#253780']
|
||||
colorRamp: ['156,174,29', '63,133,186', '37,55,128'],
|
||||
tooltipType: {
|
||||
hexagon: 'hexagon',
|
||||
baseStation: 'base-station',
|
||||
human: 'human'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init () {
|
||||
const _this = this
|
||||
const map = new maplibregl.Map({
|
||||
container: 'analysisMap4',
|
||||
style: mapStyle,
|
||||
center: this.center,
|
||||
maxZoom: this.maxZoom,
|
||||
minZoom: this.minZoom,
|
||||
zoom: 10
|
||||
})
|
||||
maplibregl.addProtocol('cn', (params, callback) => { // 切片显示接口 防止跨域的问题
|
||||
fetch(`${params.url.split('://')[1]}`)
|
||||
.then(t => {
|
||||
if (t.status == 200) {
|
||||
t.arrayBuffer().then(arr => {
|
||||
callback(null, arr, null, null)
|
||||
})
|
||||
} else {
|
||||
callback(new Error(`Tile fetch error: ${t.statusText}`))
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
callback(new Error(e))
|
||||
})
|
||||
return { cancel: () => { } }
|
||||
})
|
||||
map.on('load', function () {
|
||||
map.addSource('hexGrid', {
|
||||
type: 'geojson',
|
||||
data: _data4
|
||||
})
|
||||
map.addLayer({
|
||||
id: 'crashesHexGrid',
|
||||
type: 'fill',
|
||||
source: 'hexGrid',
|
||||
layout: {},
|
||||
paint: {
|
||||
'fill-color': '#088',
|
||||
'fill-opacity': 0.8
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
async mounted () {
|
||||
this.init()
|
||||
},
|
||||
setup () {
|
||||
const dateRangeValue = DEFAULT_TIME_FILTER_RANGE.dashboard || 60
|
||||
const timeFilter = ref({ dateRangeValue })
|
||||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||||
timeFilter.value.startTime = startTime
|
||||
timeFilter.value.endTime = endTime
|
||||
const tooltip = ref({
|
||||
showTooltip: false,
|
||||
type: ''
|
||||
})
|
||||
const myChart = shallowRef({})
|
||||
const currentPoint = ref({})
|
||||
return {
|
||||
timeFilter,
|
||||
tooltip,
|
||||
myChart,
|
||||
currentPoint,
|
||||
maxZoom: 13,
|
||||
minZoom: 1,
|
||||
center: [-73.94539, 40.841843] // [116.38, 39.9]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -36,24 +36,7 @@ router.beforeEach(async (to, from, next) => {
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: () => import('@/components/layout/Home'),
|
||||
children: [
|
||||
{
|
||||
path: '/temp',
|
||||
component: () => import('@/Temp')
|
||||
},
|
||||
{
|
||||
path: '/temp2',
|
||||
component: () => import('@/Temp2')
|
||||
},
|
||||
{
|
||||
path: '/temp3',
|
||||
component: () => import('@/Temp3')
|
||||
},
|
||||
{
|
||||
path: '/temp4',
|
||||
component: () => import('@/Temp4')
|
||||
}
|
||||
]
|
||||
children: []
|
||||
}
|
||||
handleRoutes(menuList, homeRoute.children)
|
||||
router.addRoute(homeRoute)
|
||||
|
||||
@@ -1,330 +0,0 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.789536,
|
||||
40.666008
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 14703,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-01T00:00:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "human"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.964806,
|
||||
40.759983
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11711,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T22:56:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "human"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.87038,
|
||||
40.673008
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11712,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T22:45:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "human"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.96667,
|
||||
40.617275
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11716,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T22:10:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "human"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.80331,
|
||||
40.66764
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11717,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T22:00:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "human"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.987206,
|
||||
40.61179
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11718,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T22:00:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "human"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-74.00929,
|
||||
40.64266
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11719,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T22:00:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.87207,
|
||||
40.827282
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11720,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T21:55:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.85261,
|
||||
40.70509
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11721,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T21:48:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-74.00578,
|
||||
40.71482
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11723,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T21:30:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.84598,
|
||||
40.739693
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11727,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T21:15:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.84565,
|
||||
40.740017
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11728,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T21:07:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Point",
|
||||
"coordinates": [
|
||||
-73.95311,
|
||||
40.798523
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": {
|
||||
"cartodb_id": 11729,
|
||||
"number_of_pedestrian_killed": 0,
|
||||
"number_of_pedestrian_injured": 0,
|
||||
"number_of_motorist_killed": 0,
|
||||
"number_of_motorist_injured": 0,
|
||||
"number_of_cyclist_killed": 0,
|
||||
"number_of_cyclist_injured": 0,
|
||||
"date_val": "2017-03-06T21:04:00Z",
|
||||
"total_injuries": 0,
|
||||
"total_fatalities": 0,
|
||||
"crash_type": "base-station"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,87 +0,0 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"features": [
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
-74,
|
||||
40
|
||||
],
|
||||
[
|
||||
-73.5,
|
||||
40
|
||||
],
|
||||
[
|
||||
-73.25,
|
||||
40.433
|
||||
],
|
||||
[
|
||||
-73.5,
|
||||
40.866
|
||||
],
|
||||
[
|
||||
-74,
|
||||
40.866
|
||||
],
|
||||
[
|
||||
-74.25,
|
||||
40.433
|
||||
],
|
||||
[
|
||||
-74,
|
||||
40
|
||||
]
|
||||
]
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": "[{\"cartodb_id\":11786,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T18:14:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"},{\"cartodb_id\":11803,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T17:45:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"}]"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "Feature",
|
||||
"geometry": {
|
||||
"type": "Polygon",
|
||||
"coordinates": [
|
||||
[
|
||||
[
|
||||
-74,
|
||||
10
|
||||
],
|
||||
[
|
||||
-73.5,
|
||||
10
|
||||
],
|
||||
[
|
||||
-73.25,
|
||||
10.433
|
||||
],
|
||||
[
|
||||
-73.5,
|
||||
10.866
|
||||
],
|
||||
[
|
||||
-74,
|
||||
10.866
|
||||
],
|
||||
[
|
||||
-74.25,
|
||||
10.433
|
||||
],
|
||||
[
|
||||
-74,
|
||||
10
|
||||
]
|
||||
]
|
||||
]
|
||||
},
|
||||
"properties": {
|
||||
"data": "[{\"cartodb_id\":11786,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T18:14:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"},{\"cartodb_id\":11803,\"number_of_pedestrian_killed\":0,\"number_of_pedestrian_injured\":0,\"number_of_motorist_killed\":0,\"number_of_motorist_injured\":0,\"number_of_cyclist_killed\":0,\"number_of_cyclist_injured\":0,\"date_val\":\"2017-03-06T17:45:00Z\",\"total_injuries\":0,\"total_fatalities\":0,\"crash_type\":\"no_injury_fatality\"}]"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,51 +0,0 @@
|
||||
import turf from 'turf'
|
||||
import { propEach, featureReduce } from '@turf/meta'
|
||||
import simpleStats from 'simple-statistics'
|
||||
import { extent } from 'd3-array'
|
||||
|
||||
// cellSize: 六角网格每一边的大小（公里）
|
||||
export default function hexbinDataConverter (data, cellSize = 0.5) {
|
||||
// 纽约的粗略地理边界框
|
||||
const bbox = [-74.24939, 40.50394, -73.701195, 40.90995]
|
||||
// const bbox = [74, 18, 136, 42]
|
||||
// const bbox = [74, 18, 136, 54]
|
||||
|
||||
// 为给定的 bbox 和cellSize创建 hexbin（六边形） 几何形状
|
||||
const hexGrid = turf.hexGrid(bbox, cellSize)
|
||||
|
||||
// 对我们的六边形几何体和数据点执行“空间连接”
|
||||
const collected = turf.collect(hexGrid, data, 'data', 'data')
|
||||
|
||||
// 为每个六边形设置一个唯一id
|
||||
collected.features.forEach((feature, i) => {
|
||||
feature.id = i
|
||||
})
|
||||
// 过滤掉没有连接数据的多边形
|
||||
collected.features = collected.features.filter(d => d.properties.data.length)
|
||||
|
||||
// 计算每个六边形里点的总数 count
|
||||
propEach(collected, props => {
|
||||
props.count = props.data.reduce((acc, cur) => acc += 1, 0)
|
||||
})
|
||||
|
||||
// 将 count 拎出来
|
||||
const reduced = featureReduce(collected, (acc, cur) => {
|
||||
acc.push(cur.properties.count)
|
||||
return acc
|
||||
}, [])
|
||||
|
||||
// 用 ckmeans 算法将值按大小分成3（设计图中的颜色数量）层
|
||||
const levels = simpleStats.ckmeans(reduced, 3)
|
||||
|
||||
// 将六边形层级和该层的范围添加到数据中
|
||||
propEach(collected, props => {
|
||||
levels.forEach((level, index) => {
|
||||
if (level.indexOf(props.count) > -1) {
|
||||
props.level = index
|
||||
props.levelRange = extent(level)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
return collected
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="geo-analysis">
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane :label="$t('geo.locationMap')" name="locationMap"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('geo.traceTracking')" name="traceTracking"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('location.locationMap')" name="locationMap"></el-tab-pane>
|
||||
<el-tab-pane :label="$t('location.traceTracking')" name="traceTracking"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<!-- 右上角工具栏 -->
|
||||
<div class="geo-tools">
|
||||
@@ -73,7 +73,7 @@
|
||||
<div class="analysis-statistics" v-show="activeTab === 'locationMap'">
|
||||
<div class="analysis-statistics__chart">
|
||||
<simple-loading size="small" placement="top-end" :loading="loading.pieLoading"></simple-loading>
|
||||
<div class="chart__header">{{$t('locationIntelligence.populationDensity')}}</div>
|
||||
<div class="chart__header">{{$t('location.populationDensity')}}</div>
|
||||
<div class="chart__body">
|
||||
<div class="chart__drawing" id="populationDensityChart"></div>
|
||||
<div class="chart__legend">
|
||||
@@ -87,7 +87,7 @@
|
||||
</div>
|
||||
<div class="analysis-statistics__chart">
|
||||
<simple-loading size="small" placement="top-end" :loading="loading.lineLoading"></simple-loading>
|
||||
<div class="chart__header">{{$t('locationIntelligence.activeSubscribers')}}</div>
|
||||
<div class="chart__header">{{$t('location.activeSubscribers')}}</div>
|
||||
<div class="chart__statistics">
|
||||
<div class="statistics-number">{{activeCount}}</div>
|
||||
<div class="statistics-trend">{{activeCountChain === '-' ? '-' : (activeCountChain < 0 ? '-'+valueToRangeValue(Math.abs(activeCountChain), unitTypes.percent).join(' '): valueToRangeValue(activeCountChain, unitTypes.percent).join(' '))}}</div>
|
||||
@@ -272,7 +272,7 @@
|
||||
<div class="item__label">{{$t('overall.location')}}</div>
|
||||
<div class="item__value">China, Shanghai</div>
|
||||
</div>
|
||||
<div class="body__tracking" @click="trackSubscriber(currentSubscriber)">{{$t('geo.traceTracking')}}</div>
|
||||
<div class="body__tracking" @click="trackSubscriber(currentSubscriber)">{{$t('location.traceTracking')}}</div>
|
||||
</template>
|
||||
<template v-else-if="tooltip.type === tooltipType.baseStation">
|
||||
<div class="body__item">
|
||||
@@ -283,18 +283,10 @@
|
||||
<div class="item__label">Mobile Network Code</div>
|
||||
<div class="item__value">1</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">Signal Strength</div>
|
||||
<div class="item__value">4</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">Communication Type</div>
|
||||
<div class="item__value">4G</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">Number of Online</div>
|
||||
<div class="item__value">1442</div>
|
||||
</div>
|
||||
<div class="body__item">
|
||||
<div class="item__label">{{$t('overall.location')}}</div>
|
||||
<div class="item__value">China, Shanghai</div>
|
||||
@@ -599,14 +591,6 @@ export default {
|
||||
}
|
||||
try {
|
||||
const response = await axios.get(api.location.tracking, { params })
|
||||
/*response.data.data.result.forEach(r => {
|
||||
const find = this.trackingSubscribers.find(item => item.subscriberId === r.subscriberId)
|
||||
if (find) {
|
||||
find.trackRecords = r.trackRecords
|
||||
} else {
|
||||
find.trackRecords = []
|
||||
}
|
||||
})*/
|
||||
if (response.data.data.result) {
|
||||
this.trackingSubscribers.forEach(s => {
|
||||
const find = response.data.data.result.find(item => item.subscriberId === s.subscriberId)
|
||||
@@ -644,6 +628,8 @@ export default {
|
||||
} finally {
|
||||
this.loading.trackingMapLoading = false
|
||||
}
|
||||
} else {
|
||||
this.loading.trackingMapLoading = false
|
||||
}
|
||||
},
|
||||
renderTrackingHexagon () {
|
||||
@@ -1002,7 +988,9 @@ export default {
|
||||
}
|
||||
},
|
||||
changeCurrentShowSubscriber (subscriber) {
|
||||
this.currentShowSubscriber = subscriber
|
||||
if (subscriber.subscriberId !== this.currentShowSubscriber.subscriberId) {
|
||||
this.currentShowSubscriber = subscriber
|
||||
}
|
||||
},
|
||||
// 地图上人图标鼠标悬浮框中点击追踪事件
|
||||
trackSubscriber (subscriber) {
|
||||
@@ -1182,6 +1170,12 @@ export default {
|
||||
this.initTraceTrackingTab()
|
||||
}
|
||||
},
|
||||
trackingSubscribers: {
|
||||
deep: true,
|
||||
handler (n) {
|
||||
sessionStorage.setItem(storageKey.trackingSubscriberIds, JSON.stringify(n.map(item => item.subscriberId)))
|
||||
}
|
||||
},
|
||||
// 控制map loading
|
||||
'loading.hexagonLoading': {
|
||||
handler (n) {
|
||||
@@ -1243,11 +1237,11 @@ export default {
|
||||
// 优先级：url > config.js > 默认值。
|
||||
const dateRangeValue = rangeParam ? parseInt(rangeParam) : (DEFAULT_TIME_FILTER_RANGE.dashboard || 60)
|
||||
const timeFilter = ref({ dateRangeValue })
|
||||
if (!startTimeParam || !endTimeParam) {
|
||||
if (!startTimeParam || !endTimeParam || dateRangeValue > -1) {
|
||||
const { startTime, endTime } = getNowTime(dateRangeValue)
|
||||
timeFilter.value.startTime = getSecond(startTime)
|
||||
timeFilter.value.endTime = getSecond(endTime)
|
||||
// 如果没有时间参数，就将参数写入url
|
||||
// 将参数写入url
|
||||
const newUrl = urlParamsHandler(window.location.href, useRoute().query, { startTime: timeFilter.value.startTime, endTime: timeFilter.value.endTime, range: dateRangeValue })
|
||||
overwriteUrl(newUrl)
|
||||
} else {
|
||||
@@ -1280,8 +1274,8 @@ export default {
|
||||
|
||||
// 从localStorage中获取数据
|
||||
const trackingSubscribers = ref([])
|
||||
/*localStorage.getItem(storageKey.trackingSubscriberIds) && (trackingSubscribers.value = JSON.parse(localStorage.getItem(storageKey.trackingSubscriberIds)).map(id => ({ subscriberId: id })))
|
||||
const test = ['gary6411', 'test6431', 'test6430', 'test6422']
|
||||
sessionStorage.getItem(storageKey.trackingSubscriberIds) && (trackingSubscribers.value = JSON.parse(sessionStorage.getItem(storageKey.trackingSubscriberIds)).map(id => ({ subscriberId: id, show: false, showLine: false })))
|
||||
/*const test = ['gary6411', 'test6431', 'test6430', 'test6422']
|
||||
test.forEach(id => {
|
||||
trackingSubscribers.value.push({ subscriberId: id, show: false, showLine: false })
|
||||
})*/
|
||||
|
||||
Reference in New Issue
Block a user