| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541 |
- <!--********************************************************************
- * 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 :map-options="mapOptions" @load="mapLoaded" @click="mapClicked"></sm-web-map>
- <div id="group">
- <sm-radio-group class="radio-group" v-model="type" default-value="china-riskLevel" size="large">
- <sm-radio-button value="china-riskLevel" data-i18n="resources.text_ncp_riskLevel"></sm-radio-button>
- <sm-radio-button
- value="china-incrementConfirmed"
- data-i18n="resources.text_ncp_incrementConfirmed"
- ></sm-radio-button>
- <sm-radio-button
- value="china-nowConfirmed"
- data-i18n="resources.text_ncp_nowConfirmed"
- ></sm-radio-button>
- <sm-radio-button value="china-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/ProvinceData1M.js"></script>
- <script src="../data/ncp/province_center_data.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;
- padding: 0px 10px;
- }
- .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;
- }
- .sm-component-radio-button-wrapper-checked {
- color: #0081e2 !important;
- border-color: #0081e2 !important;
- box-shadow: -1px 0 0 0 #0081e2 !important;
- background: #333333 !important;
- }
- .sm-component-radio-button-wrapper:hover {
- color: #0081e2;
- }
- @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;
- }
- #group {
- margin-top: 28px;
- }
- .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 = {
- 'china-riskLevel': {
- tooltip: function (properties) {
- if (properties.daysNoConfirmedAdd >= 3) {
- return resources.text_ncp_riskLevel_tooltip
- .replace('{name}', properties['省份'])
- .replace('{daysNoConfirmedAdd}', properties.daysNoConfirmedAdd);
- }
- return resources.text_ncp_riskLevel_tooltip1
- .replace('{name}', properties['省份'])
- .replace('{daysMaxConfirmedAdd}', properties.daysMaxConfirmedAdd)
- .replace('{confirmedAdd}', properties.confirmedAdd);
- },
- title: resources.text_ncp_riskLevel_title,
- 'fill-color': [
- 'case',
- ['>=', ['get', 'daysMaxConfirmedAdd'], 10],
- '#FC9A6B',
- ['>=', ['get', 'daysMaxConfirmedAdd'], 1],
- '#FDCD8C',
- ['>=', ['get', 'daysNoConfirmedAdd'], 14],
- '#53AB5E',
- ['>=', ['get', 'daysNoConfirmedAdd'], 7],
- '#ADDD8E',
- ['>=', ['get', 'daysNoConfirmedAdd'], 3],
- '#D6FDB9',
- '#F4F4F4'
- ],
- 'text-field': [
- 'concat',
- ['get', '省份'],
- ['case', ['>', ['get', 'daysNoConfirmedAdd'], 0], ['get', 'daysNoConfirmedAdd'], '']
- ],
- 'line-color': '#5F5F5F'
- },
- 'china-incrementConfirmed': {
- tooltip: function (properties) {
- if (isNaN(properties['confirmedAdd'])) {
- return resources.text_ncp_nodata_tooltip.replace('{name}', properties['省份']);
- }
- return resources.text_ncp_incrementConfirmed_tooltip
- .replace('{name}', properties['省份'])
- .replace('{confirmedAdd}', properties['confirmedAdd']);
- },
- title: resources.text_ncp_incrementConfirmed_title,
- 'fill-color': [
- 'case',
- ['has', 'confirmedAdd'],
- [
- 'case',
- ['>=', ['get', 'confirmedAdd'], 200],
- '#d7301f',
- ['>=', ['get', 'confirmedAdd'], 100],
- '#ef6548',
- ['>=', ['get', 'confirmedAdd'], 50],
- '#fc8d59',
- ['>=', ['get', 'confirmedAdd'], 10],
- '#fdbb84',
- ['>=', ['get', 'confirmedAdd'], 1],
- '#fdd49e',
- '#F4F4F4'
- ],
- '#D9D9D9'
- ],
- 'text-field': [
- 'concat',
- ['get', '省份'],
- ['case', ['>', ['get', 'confirmedAdd'], 0], ['concat', '+', ['get', 'confirmedAdd']], '']
- ],
- 'line-color': '#83838D'
- },
- 'china-nowConfirmed': {
- tooltip: function (properties) {
- if (isNaN(properties['nowConfirmed'])) {
- return resources.text_ncp_nodata_tooltip.replace('{name}', properties['省份']);
- }
- return resources.text_ncp_nowConfirmed_tooltip
- .replace('{name}', properties['省份'])
- .replace('{nowConfirmed}', properties['nowConfirmed']);
- },
- title: resources.text_ncp_nowConfirmed_title,
- 'fill-color': [
- 'case',
- ['has', 'nowConfirmed'],
- [
- 'case',
- ['>=', ['get', 'nowConfirmed'], 200],
- '#d7301f',
- ['>=', ['get', 'nowConfirmed'], 100],
- '#ef6548',
- ['>=', ['get', 'nowConfirmed'], 50],
- '#fc8d59',
- ['>=', ['get', 'nowConfirmed'], 10],
- '#fdbb84',
- ['>=', ['get', 'nowConfirmed'], 1],
- '#fdd49e',
- '#F4F4F4'
- ],
- '#D9D9D9'
- ],
- 'text-field': ['get', '省份'],
- 'line-color': '#83838D'
- },
- 'china-incidence': {
- tooltip: function (properties) {
- return resources.text_ncp_incidence_tooltip
- .replace('{name}', properties['省份'])
- .replace('{incidence}', properties['incidence'])
- .replace('{confirmed}', properties['confirmed'])
- .replace('{population}', parseInt(properties['population'] / 10000));
- },
- title: resources.text_ncp_incidence_title,
- 'fill-color': [
- 'case',
- ['>=', ['get', 'incidence'], 5],
- '#6a51a3',
- ['>=', ['get', 'incidence'], 1.5],
- '#7f7dba',
- ['>=', ['get', 'incidence'], 1],
- '#9e9ac8',
- ['>=', ['get', 'incidence'], 0.5],
- '#dadaeb',
- ['>=', ['get', 'incidence'], 0],
- '#efedf5',
- '#F4F4F4'
- ],
- 'text-field': ['get', '省份'],
- 'line-color': '#83838D'
- }
- };
- 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: 'china-riskLevel',
- time: '04/01 24:00',
- nums: {
- 'china-incrementConfirmed': 0,
- 'china-nowConfirmed': 0,
- 'china-incidence': 0,
- 'china-confirmed': 0
- },
- 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/rest/maps/China_Dark_Nolable'
- ],
- transparent: false,
- rasterSource: 'iserver',
- tileSize: 256
- }
- },
- layers: [
- {
- id: 'simple-tiles',
- type: 'raster',
- source: 'raster-tiles',
- minzoom: 0,
- maxzoom: 22
- }
- ]
- },
- bounds: [
- [72.10274031198492, 2.481417743284723],
- [137.0563536922412, 54.36513803178008]
- ],
- center: [105.9002304535943, 31.9592716277851],
- minZoom: 1.5,
- maxZoom: 6,
- zoom: 3.55
- }
- };
- },
- computed: {
- num() {
- return this.nums[this.type] || '';
- },
- 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('china-strokeLine', 'line-color', styles[val]['line-color']);
- this.map.setLayoutProperty('china-label', 'text-field', styles[val]['text-field']);
- }
- },
- 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);
- }
- );
- },
- methods: {
- mapLoaded(e) {
- this.map = e.map;
- $.get(
- 'https://ncpviz.oss-cn-beijing.aliyuncs.com/ncpviz/ncp.json?time=' + new Date().getTime(),
- function (response) {
- // this.time = resources.text_ncp_time.replace('{time}', response.time);
- var latestProvinceData = this.getLatestProvinceData(response);
- this.map.addSource('china', {
- type: 'geojson',
- data: ProvinceData
- });
- this.map.addLayer({
- id: 'china',
- type: 'fill',
- source: 'china',
- layout: {},
- paint: {
- 'fill-color': styles[this.type]['fill-color']
- }
- });
- this.map.addLayer({
- id: 'china-strokeLine',
- type: 'line',
- source: 'china',
- layout: {},
- paint: {
- 'line-width': 0.5,
- 'line-color': styles[this.type]['line-color'],
- 'line-opacity': 1
- }
- });
- this.map.addSource('china-label', {
- type: 'geojson',
- data: ProvincesCenterData
- });
- this.map.addLayer({
- id: 'china-label',
- type: 'symbol',
- source: 'china-label',
- layout: {
- 'text-field': styles[this.type]['text-field'],
- 'text-font': ['Microsoft YaHei Regular'],
- 'text-size': 14,
- 'text-allow-overlap': {
- stops: [
- [2.5, false],
- [3, true]
- ]
- },
- 'text-letter-spacing': 0
- },
- paint: {
- 'text-color': 'white',
- 'text-opacity': 1,
- 'text-halo-color': '#696868',
- 'text-halo-width': 1.5
- }
- });
- this.map.addSource('line', {
- type: 'geojson',
- data: {
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- geometry: {
- type: 'LineString',
- coordinates: [
- [127.53, 50.22],
- [97.5, 24.06]
- ]
- }
- }
- ]
- }
- });
- this.map.addLayer({
- id: 'line',
- type: 'line',
- source: 'line',
- layout: {
- 'line-cap': 'round'
- },
- paint: {
- 'line-color': '#919191',
- 'line-opacity': 1,
- 'line-width': 2,
- 'line-dasharray': [2, 2]
- }
- });
- }.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['省份']) {
- this.popup = new mapboxgl.Popup({ closeButton: false, maxWidth: 'none' })
- .setLngLat(e.mapboxEvent.lngLat)
- .setHTML(styles[this.type].tooltip(features[0].properties))
- .addTo(this.map);
- }
- },
- getLatestProvinceData(response) {
- var unit = 100000; //单位为10万
- var dataByName = {};
- ProvincesCenterData.features.forEach((provinceData) => {
- dataByName[provinceData.properties['省份']] = provinceData;
- });
- var dataExcludeNational = response.data.slice(1);
- var someDataOutOfDate = false;
- var latestProvinceData = [];
- var provinceLabelData = [];
- var provinceName = [];
- var daysNoConfirmedAdd = [];
- dataExcludeNational.forEach((data) => {
- if (data.provinces[1].provinceData && data.provinces[1].provinceData.properties) {
- var name = data.provinces[1].provinceData.provinceName;
- provinceName.push(name);
- daysNoConfirmedAdd.push(data.provinces[1].provinceData.properties.daysNoConfirmedAdd);
- // 计算连续三日最高的新增确诊数
- if (data.provinces[1].provinceData.properties.confirmedAdd != null) {
- var latest3DaysConfiredInrement = data.provinces
- .slice(1, 4)
- .map((e) => e.provinceData.properties.confirmedAdd);
- data.provinces[1].provinceData.properties.daysMaxConfirmedAdd = Math.max(
- latest3DaysConfiredInrement[0],
- latest3DaysConfiredInrement[1],
- latest3DaysConfiredInrement[2]
- );
- } else {
- delete data.provinces[1].provinceData.properties.daysNoConfirmedAdd;
- }
- var confirmed = data.provinces[1].provinceData.properties.confirmed;
- var confirmedAbsent = false;
- if (confirmed == null) {
- confirmed = data.provinces[1].provinceData.properties.confirmed;
- confirmedAbsent = true;
- }
- var population = dataByName[name].properties.population;
- var incidence = (confirmed / population) * unit;
- incidence = Number(incidence.toFixed(2));
- if (!confirmedAbsent) {
- data.provinces[1].provinceData.properties.incidence = incidence;
- }
- data.provinces[1].provinceData.properties.population = population;
- // provinceIncidence.push(incidence);
- var toPush = Object.assign(data.provinces[1].provinceData);
- // latestProvinceData.push(toPush);
- var province = ProvinceData.features.find(function (item) {
- return item.properties.Name === name || item.properties.Name.indexOf(name) === 0;
- });
- var provinceLabel = ProvincesCenterData.features.find(function (item) {
- return (
- item.properties['省份'] === name || item.properties['省份'].indexOf(name) === 0
- );
- });
- if (provinceLabel && province) {
- provinceLabel.properties = Object.assign(
- province.properties,
- provinceLabel.properties,
- toPush.properties,
- { 省份: getProvinceName(name) }
- );
- province.properties = Object.assign(
- province.properties,
- provinceLabel.properties,
- toPush.properties,
- { 省份: getProvinceName(name) }
- );
- }
- }
- });
- var chinaData = response.data[0].provinces[0].provinceData.properties;
- if (chinaData) {
- this.nums['china-nowConfirmed'] = chinaData['nowConfirmed'];
- this.nums['confirmed'] = chinaData['confirmed'];
- this.nums['china-incrementConfirmed'] = chinaData['confirmedAdd'];
- this.nums['china-incidence'] = ((chinaData['confirmed'] / 1428003306) * unit).toFixed(2);
- }
- return latestProvinceData;
- }
- }
- });
- function getProvinceName(name) {
- if (utils.getLanguage() === 'en-US') {
- return ProvincesNameEn[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_china;
- }
- </script>
- </body>
- </html>
|
