| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
- <title></title>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="main">
- <sm-web-map
- style="background: #081f30;"
- :map-options="mapOptions"
- @load="mapLoaded"
- @click="mapClicked"
- ></sm-web-map>
- <div id="group">
- <sm-radio-group class="radio-group" v-model="type" default-value="world-confirmedIncrement" size="large">
- <sm-radio-button
- value="world-confirmedIncrement"
- data-i18n="resources.text_ncp_incrementConfirmed"
- ></sm-radio-button>
- <sm-radio-button value="world-confirmed" data-i18n="resources.text_ncp_confirmed"></sm-radio-button>
- <sm-radio-button value="world-incidence" data-i18n="resources.text_ncp_incidence"></sm-radio-button>
- </sm-radio-group>
- <br />
- <sm-indicator :title="title" unit="" mode="horizontal" :num="num" font-size="44px" font-weight="400">
- </sm-indicator>
- <sm-text
- :title="time"
- text-color="rgba(255, 255, 255, 0.6)"
- :font-style='{ fontSize: "18px", fontWeight: "400" ,display: "block"}'
- >
- </sm-text>
- </div>
- <sm-image
- repeat="noRepeat"
- src="../img/online-qr.png"
- style="position: absolute; bottom: 32px;right: 16px;z-index: 1000;height: 88px;width: 88px;"
- ></sm-image>
- </div>
- <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
- <script
- include="iclient-mapboxgl-vue,mapbox-gl-enhance"
- src="../../dist/mapboxgl/include-mapboxgl.js"
- ></script>
- <script src="../data/ncp/Country_Region.js"></script>
- <script src="../data/ncp/Country_Center.js"></script>
- <script src="../data/ncp/CountriesPopulation.js"></script>
- <style>
- #main {
- margin: 0 auto;
- width: 100%;
- height: 100%;
- }
- #group {
- position: absolute;
- left: 10px;
- top: 10px;
- z-index: 1000;
- }
- .sm-component-radio-button-wrapper {
- color: #fff;
- background: #333333;
- }
- .sm-component-radio-button-wrapper-checked {
- color: #0081e2 !important;
- border-color: #0081e2 !important;
- box-shadow: -1px 0 0 0 #0081e2 !important;
- background: #333333 !important;
- }
- .mapboxgl-popup-content {
- border: solid 1px #464646;
- background-color: #464646;
- border-radius: 7px;
- padding: 16px;
- z-index: 3;
- font-size: 20px;
- text-align: center;
- color: #ffffff;
- line-height: 30px;
- }
- .mapboxgl-popup-tip {
- display: none;
- }
- @media screen and (max-width: 768px) {
- .sm-component-count-to__numItem {
- font-size: 32px !important;
- }
- .sm-component-indicator__title {
- font-size: 20px !important;
- }
- .sm-component-indicator__num {
- font-size: 32px !important;
- }
- .sm-component-text {
- font-size: 16px !important;
- }
- .sm-component-radio-group-large .sm-component-radio-button-wrapper {
- height: 32px;
- line-height: 30px;
- font-size: 14px;
- padding: 0 10px;
- }
- }
- </style>
- <script>
- var styles = {
- 'world-confirmedIncrement': {
- tooltip: function(properties) {
- return resources.text_ncp_incrementConfirmed_tooltip
- .replace('{name}', properties['areaName'])
- .replace('{confirmedAdd}', properties['confirmedIncrement']);
- },
- title: resources.text_ncpworld_incrementConfirmed_title,
- 'fill-color': '#002F4E',
- 'text-field': ['case', ['>', ['get', 'confirmedIncrement'], 0], ['get', 'confirmedIncrement'], ''],
- 'line-color': '#0C4B68',
- 'circle-visibility': 'visible',
- 'label-visibility': 'none'
- },
- 'world-confirmed': {
- tooltip: function(properties) {
- return resources.text_ncp_confirmed_tooltip
- .replace('{name}', properties['areaName'])
- .replace('{confirmed}', properties['confirmed']);
- },
- title: resources.text_ncpworld_confirmed_title,
- 'fill-color': [
- 'case',
- ['has', 'confirmed'],
- [
- 'case',
- ['>=', ['get', 'confirmed'], 1000000],
- '#580000',
- ['>=', ['get', 'confirmed'], 100000],
- '#900000',
- ['>=', ['get', 'confirmed'], 10000],
- '#ef6548',
- ['>=', ['get', 'confirmed'], 1000],
- '#fc8d59',
- ['>=', ['get', 'confirmed'], 100],
- '#fdbb84',
- ['>=', ['get', 'confirmed'], 10],
- '#fdd49e',
- ['>=', ['get', 'confirmed'], 1],
- '#fee8c8',
- '#F4F4F4'
- ],
- '#F4F4F4'
- ],
- 'text-field': [
- 'concat',
- ['get', 'areaName'],
- ' ',
- ['case', ['>', ['get', 'confirmed'], 0], ['get', 'confirmed'], '']
- ],
- 'line-color': '#83838D',
- 'circle-visibility': 'none',
- 'label-visibility': 'visible'
- },
- 'world-incidence': {
- tooltip: function(properties) {
- return resources.text_ncp_incidence_tooltip
- .replace('{name}', properties['areaName'])
- .replace('{incidence}', properties['worldIncidence'])
- .replace('{confirmed}', properties['confirmed'])
- .replace('{population}', parseInt(properties['population'] / 10000));
- },
- title: resources.text_ncpworld_incidence_title,
- 'fill-color': [
- 'case',
- ['has', 'worldIncidence'],
- [
- 'case',
- ['>=', ['get', 'worldIncidence'], 20],
- '#47366D',
- ['>=', ['get', 'worldIncidence'], 10],
- '#6a51a3',
- ['>=', ['get', 'worldIncidence'], 5],
- '#7f7dba',
- ['>=', ['get', 'worldIncidence'], 1],
- '#9e9ac8',
- ['>=', ['get', 'worldIncidence'], 0.1],
- '#dadaeb',
- '#efedf5'
- ],
- '#F4F4F4'
- ],
- 'text-field': ['get', 'areaName'],
- 'line-color': '#83838D',
- 'circle-visibility': 'none',
- 'label-visibility': 'visible'
- }
- };
- new Vue({
- el: '#main',
- data() {
- var attribution =
- "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
- " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
- " Map Data <span>© <a href='https://www.supermapol.com/' target='_blank'>SuperMap Online</a></span> ";
- return {
- type: 'world-confirmedIncrement',
- nums: { 'world-confirmedIncrement': 0, 'world-confirmed': 0, 'world-incidence': 0 },
- chinaConfirmed: 0,
- chinaConfirmedIncrement: 0,
- time: '',
- // mapOptions是sm-map组件的props
- mapOptions: {
- container: 'map', // container id
- style: {
- version: 8,
- glyphs: 'https://ncov.supermapol.com/statichtml/font/{fontstack}/{range}.pbf',
- sources: {
- 'raster-tiles': {
- attribution: attribution,
- type: 'raster',
- tiles: [
- 'https://maptiles.supermapol.com/iserver/services/map-China-2/rest/maps/China_DarkBlue_Nolable'
- ],
- prjCoordSys: { epsgCode: 4326 },
- rasterSource: 'iserver',
- tileSize: 256
- }
- },
- layers: [
- {
- id: 'simple-tiles',
- type: 'raster',
- source: 'raster-tiles',
- minzoom: 0,
- maxzoom: 22
- }
- ]
- },
- center: [101.58, 33.11],
- maxZoom: 5,
- zoom: 2,
- crs: 'EPSG:4326'
- }
- };
- },
- created() {
- SuperMap.Components.setTheme({
- textColor: 'rgba(255, 255, 255, 0.85)',
- background: 'rgba(0, 0, 0,0)',
- colorGroup: ['rgb(225, 2, 0)']
- });
- $.get('https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ui.json?time=' + new Date().getTime(), function(response) {
- document.title = getTitle(response);
- });
- },
- computed: {
- num() {
- if (this.type === 'world-incidence') {
- return this.nums['world-incidence'];
- }
- if (this.type === 'world-confirmedIncrement') {
- return this.nums['world-confirmedIncrement'] - this.chinaConfirmedIncrement;
- }
- if (this.type === 'world-confirmed') {
- return this.nums['world-confirmed'] - this.chinaConfirmed;
- }
- return '';
- },
- title() {
- return styles[this.type].title;
- }
- },
- watch: {
- type(val) {
- if (this.popup) {
- this.popup.remove();
- }
- this.map.setPaintProperty('china', 'fill-color', styles[val]['fill-color']);
- this.map.setPaintProperty('world-strokeLine', 'line-color', styles[val]['line-color']);
- this.map.setLayoutProperty('world-label', 'text-field', styles[val]['text-field']);
- this.map.setLayoutProperty('world-clusters', 'visibility', styles[val]['circle-visibility']);
- this.map.setLayoutProperty(
- 'world-label-clusters',
- 'visibility',
- styles[val]['circle-visibility']
- );
- this.map.setLayoutProperty(
- 'world-label-area-clusters',
- 'visibility',
- styles[val]['circle-visibility']
- );
- this.map.setLayoutProperty('world-serious', 'visibility', styles[val]['circle-visibility']);
- this.map.setLayoutProperty(
- 'world-label-area-serious',
- 'visibility',
- styles[val]['circle-visibility']
- );
- this.map.setLayoutProperty(
- 'world-label-serious',
- 'visibility',
- styles[val]['circle-visibility']
- );
- this.map.setLayoutProperty('world-label', 'visibility', styles[val]['label-visibility']);
- }
- },
- methods: {
- mapLoaded(e) {
- this.map = e.map;
- $.get(
- 'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/worldNcp.json?time=' +
- new Date().getTime(),
- function(response) {
- this.time = resources.text_ncp_time.replace('{time}', response.time);
- var latestProvinceData = this.getLatestWorldData(response);
- this.map.addSource('china', {
- type: 'geojson',
- data: CountryData
- });
- this.map.addLayer({
- id: 'china',
- type: 'fill',
- source: 'china',
- layout: {},
- paint: {
- 'fill-color': styles[this.type]['fill-color']
- }
- });
- this.map.addLayer({
- id: 'world-strokeLine',
- type: 'line',
- source: 'china',
- layout: {},
- paint: {
- 'line-width': 0.5,
- 'line-color': styles[this.type]['line-color'],
- 'line-opacity': 1
- }
- });
- this.map.addSource('world-label-clusters', {
- type: 'geojson',
- data: CountryCenterData,
- cluster: true,
- clusterRadius: 10
- });
- this.map.addSource('world-label', {
- type: 'geojson',
- data: CountryCenterData
- });
- this.map.addLayer({
- id: 'world-clusters',
- type: 'circle',
- source: 'world-label-clusters',
- filter: [
- 'all',
- ['<', ['get', 'confirmedIncrement'], 1000],
- ['>', ['get', 'confirmedIncrement'], 0]
- ],
- layout: {
- visibility: styles[this.type]['circle-visibility']
- },
- paint: {
- 'circle-color': [
- 'case',
- ['>=', ['get', 'confirmedIncrement'], 1000],
- '#F35735',
- ['>=', ['get', 'confirmedIncrement'], 100],
- '#F39146',
- ['>=', ['get', 'confirmedIncrement'], 50],
- '#F9B657',
- ['>=', ['get', 'confirmedIncrement'], 10],
- '#E2B06A',
- '#ADB37E'
- ],
- 'circle-radius': [
- 'case',
- ['>=', ['get', 'confirmedIncrement'], 1000],
- 18,
- ['>=', ['get', 'confirmedIncrement'], 100],
- 15,
- ['>=', ['get', 'confirmedIncrement'], 50],
- 12,
- ['>=', ['get', 'confirmedIncrement'], 10],
- 10,
- 7
- ],
- 'circle-stroke-width': 1,
- 'circle-stroke-color': '#fff',
- 'circle-stroke-opacity': 0.8
- }
- });
- this.map.addLayer({
- id: 'world-label-area-clusters',
- type: 'symbol',
- source: 'world-label-clusters',
- filter: [
- 'all',
- ['<', ['get', 'confirmedIncrement'], 1000],
- ['>', ['get', 'confirmedIncrement'], 0]
- ],
- layout: {
- visibility: styles[this.type]['circle-visibility'],
- 'text-field': '{areaName}',
- 'text-font': ['Microsoft YaHei Regular'],
- 'text-size': 12,
- 'text-letter-spacing': 0,
- 'text-offset': [0, -2]
- },
- paint: {
- 'text-color': 'white',
- 'text-opacity': 1,
- 'text-halo-color': '#696868',
- 'text-halo-width': 1.5
- }
- });
- this.map.addLayer({
- id: 'world-label-clusters',
- type: 'symbol',
- source: 'world-label-clusters',
- filter: [
- 'all',
- ['<', ['get', 'confirmedIncrement'], 1000],
- ['>', ['get', 'confirmedIncrement'], 0]
- ],
- layout: {
- visibility: styles[this.type]['circle-visibility'],
- 'text-field': styles[this.type]['text-field'],
- 'text-font': ['Microsoft YaHei Regular'],
- 'text-size': 12,
- 'text-letter-spacing': 0
- },
- paint: {
- 'text-color': '#000',
- 'text-opacity': 1
- }
- });
- this.map.addLayer({
- id: 'world-serious',
- type: 'circle',
- source: 'world-label',
- filter: ['>=', ['get', 'confirmedIncrement'], 1000],
- layout: {
- visibility: styles[this.type]['circle-visibility']
- },
- paint: {
- 'circle-color': '#F35735',
- 'circle-radius': 18,
- 'circle-stroke-width': 1,
- 'circle-stroke-color': '#fff',
- 'circle-stroke-opacity': 0.8
- }
- });
- this.map.addLayer({
- id: 'world-label-area-serious',
- type: 'symbol',
- source: 'world-label',
- filter: ['>=', ['get', 'confirmedIncrement'], 1000],
- layout: {
- visibility: styles[this.type]['circle-visibility'],
- 'text-field': '{areaName}',
- 'text-font': ['Microsoft YaHei Regular'],
- 'text-size': 12,
- 'text-allow-overlap': false,
- 'text-ignore-placement': false,
- 'text-letter-spacing': 0,
- 'text-offset': [0, -2],
- 'symbol-sort-key': 9
- },
- paint: {
- 'text-color': 'white',
- 'text-opacity': 1,
- 'text-halo-color': '#696868',
- 'text-halo-width': 1.5
- }
- });
- this.map.addLayer({
- id: 'world-label-serious',
- type: 'symbol',
- source: 'world-label',
- filter: ['>=', ['get', 'confirmedIncrement'], 1000],
- layout: {
- visibility: styles[this.type]['circle-visibility'],
- 'text-field': styles[this.type]['text-field'],
- 'text-font': ['Microsoft YaHei Regular'],
- 'text-size': 12,
- 'text-letter-spacing': 0,
- 'symbol-sort-key': 10
- },
- paint: {
- 'text-color': '#000',
- 'text-opacity': 1
- }
- });
- this.map.addLayer({
- id: 'world-label',
- type: 'symbol',
- source: 'world-label',
- layout: {
- visibility: styles[this.type]['label-visibility'],
- 'text-field': styles[this.type]['text-field'],
- 'text-font': ['Microsoft YaHei Regular'],
- 'text-size': 12,
- 'text-allow-overlap': false,
- 'text-letter-spacing': 0
- },
- paint: {
- 'text-color': 'white',
- 'text-opacity': 1,
- 'text-halo-color': '#696868',
- 'text-halo-width': 1.5
- }
- });
- }.bind(this)
- );
- },
- mapClicked(e) {
- var bbox = [
- [e.mapboxEvent.point.x - 5, e.mapboxEvent.point.y - 5],
- [e.mapboxEvent.point.x + 5, e.mapboxEvent.point.y + 5]
- ];
- var features = this.map.queryRenderedFeatures(bbox);
- if (features[0] && features[0].properties.areaName) {
- this.popup = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' })
- .setLngLat(e.mapboxEvent.lngLat)
- .setHTML(styles[this.type].tooltip(features[0].properties))
- .addTo(this.map);
- }
- },
- getLatestWorldData(result) {
- var countrys = [];
- var confirmeds = [];
- worldTime = result.time;
- worldDataUpdateTime = result.updateTime;
- // 最新当天的数据
- todayWorldData = result.data.worldHistory[0].historyList[0];
- var unit = 100000; //单位为10万
- result.data.worldList.forEach(data => {
- // 砖石号游轮不计算发病率
- // 计算各国报告发病率
- var confirmed = data.confirmed;
- var name = data.areaName;
- if (name === '日本本土') {
- name = data.areaName = '日本';
- }
- var countryName = CountriesNameEn[name];
- if (CountriesPopulation[countryName]) {
- data.population = CountriesPopulation[countryName] * 1000; //联合国数以千计
- }
- // 大于等于10万 才计算发病率
- if (data.population >= 100000) {
- var incidence = (confirmed / data.population) * unit;
- incidence = Number(incidence.toFixed(2));
- // 地图使用
- data.worldIncidence = incidence;
- }
- if (!isNaN(data.confirmedIncrement)) {
- this.nums['world-confirmedIncrement'] += parseInt(data.confirmedIncrement);
- if (name === '中国') {
- this.chinaConfirmedIncrement = data.confirmedIncrement;
- }
- }
- if (!isNaN(data.confirmed)) {
- this.nums['world-confirmed'] += parseInt(data.confirmed);
- if (name === '中国') {
- this.chinaConfirmed = data.confirmed;
- }
- }
- if (!isNaN(data.worldIncidence)) {
- this.nums['world-incidence'] = (
- (this.nums['world-confirmed'] / 7751396374) *
- unit
- ).toFixed(2);
- }
- var country = CountryData.features.find(function(item) {
- return (
- item.properties.Country === name ||
- (name === '中国' && item.properties.Country === '中华人民共和国')
- );
- });
- var countryLabel = CountryCenterData.features.find(function(item) {
- return (
- item.properties.Country === name ||
- (name === '中国' && item.properties.Country === '中华人民共和国')
- );
- });
- if (country && countryLabel) {
- country.properties = Object.assign(country.properties, countryLabel.properties, data, {
- areaName: getareaName(name)
- });
- countryLabel.properties = Object.assign(
- country.properties,
- countryLabel.properties,
- data,
- { areaName: getareaName(name) }
- );
- }
- });
- CountryCenterData.features = CountryCenterData.features.sort(function(val1, val2) {
- return (val2.properties.confirmed || 0) - (val1.properties.confirmed || 0);
- });
- }
- }
- });
- function getareaName(name) {
- if (utils.getLanguage() === 'en-US') {
- return CountriesNameEn[name];
- }
- return name;
- }
- function getTitle(response) {
- var titles = response[utils.getLanguage()];
- if (titles) {
- if (titles.firstPriorityTitle) {
- return titles.firstPriorityTitle;
- }
- if (titles.title && titles.title.indexOf('{') < 0) {
- return titles.title;
- }
- }
- return resources.text_ncp_world;
- }
- </script>
- </body>
- </html>
|
