123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsGraphThemeLayer_React"></title>
- <script type="text/javascript" include="react" src="../js/include-web.js"></script>
- <script include="antd,iclient-mapboxgl-react,mapbox-gl-enhance" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
- <script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
- <style>
- html,
- body {
- height: 100%;
- margin: 0;
- padding: 0;
- }
- #main,
- #map-container {
- height: 100%;
- }
- </style>
- </head>
- <body>
- <div id="main">
- <div id="map-container"></div>
- <div class="info-container">
- <div id="infoBox" class="panel panel-primary infoPane" style="display: none;">
- <div class="panel-heading">
- <h5 class="panel-title text-center" data-i18n="resources.text_attributeTable"></h5>
- </div>
- <div id="infoContent" class="panel-body content"></div>
- </div>
- </div>
- </div>
- <script type="text/babel">
- var SmWebMap = SuperMap.Components.SmWebMap;
- var SmGraphThemeLayer = SuperMap.Components.SmGraphThemeLayer;
- var features, chartsSettingForPie, themeOptions, popup;
- var feas = [];
- for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
- // 省居民消费水平(单位:元)信息
- var provinceInfo = chinaConsumptionLevel[i];
- var fea = {
- type: 'feature',
- geometry: {
- type: 'Point',
- coordinates: [provinceInfo[1], provinceInfo[2]]
- },
- properties: {
- NAME: provinceInfo[0],
- CON2009: provinceInfo[3],
- CON2010: provinceInfo[4],
- CON2011: provinceInfo[5],
- CON2012: provinceInfo[6],
- CON2013: provinceInfo[7]
- }
- };
- feas.push(fea);
- }
- features = {
- type: 'FeatureCollection',
- features: feas
- };
- chartsSettingForPie = {
- width: 240,
- height: 100,
- codomain: [0, 40000], // 允许图表展示的值域范围,此范围外的数据将不制作图表
- sectorStyle: { fillOpacity: 0.8 }, // 柱状图中柱条的(表示字段值的图形)样式
- sectorStyleByFields: [
- { fillColor: '#FFB980' },
- { fillColor: '#5AB1EF' },
- { fillColor: '#B6A2DE' },
- { fillColor: '#2EC7C9' },
- { fillColor: '#D87A80' }
- ],
- sectorHoverStyle: { fillOpacity: 1 },
- xShapeBlank: [10, 10, 10], // 水平方向上的空白间距参数
- axisYLabels: ['4万', '3万', '2万', '1万', '0'], // y 轴标签内容
- axisXLabels: ['09年', '10年', '11年', '12年', '13年'], // x 轴标签内容
- backgroundStyle: { fillColor: '#CCE8CF' }, // 背景样式
- backgroundRadius: [5, 5, 5, 5] // 背景框圆角参数
- };
- // 设置 graphThemeLayer option 参数
- themeOptions = {
- attributions: ' ',
- themeFields: ['CON2009', 'CON2010', 'CON2011', 'CON2012', 'CON2013'],
- opacity: 0.9,
- chartsSetting: chartsSettingForPie
- };
- function handleLayerMousemove(params) {
- var e = params.mapboxEvent;
- var map = params.map;
- var themeLayer = map.getLayer(params.layerId);
- if (popup) {
- popup.remove();
- }
- if (e.target && e.target.refDataID && e.target.dataInfo) {
- // 获取图形对应的数据 (feature)
- var fea = themeLayer.getFeatureById(e.target.refDataID);
- var info = e.target.dataInfo;
- // 弹窗内容
- var contentHTML = "<div style='color: #000; background-color: #fff'>";
- contentHTML += resources.text_Name + '<br><strong>' + fea.attributes.NAME + '</strong>';
- contentHTML += "<hr style='margin: 3px'>";
- switch (info.field) {
- case 'CON2009':
- contentHTML +=
- resources.text_consumptionLevel1 +
- '09' +
- resources.text_consumptionLevel2 +
- '<br/><strong>' +
- info.value +
- '</strong>(' +
- resources.text_yuan +
- ')';
- break;
- case 'CON2010':
- contentHTML +=
- resources.text_consumptionLevel1 +
- '10' +
- resources.text_consumptionLevel2 +
- '<br/><strong>' +
- info.value +
- '</strong>(' +
- resources.text_yuan +
- ')';
- break;
- case 'CON2011':
- contentHTML +=
- resources.text_consumptionLevel1 +
- '11' +
- resources.text_consumptionLevel2 +
- '<br/><strong>' +
- info.value +
- '</strong>(' +
- resources.text_yuan +
- ')';
- break;
- case 'CON2012':
- contentHTML +=
- resources.text_consumptionLevel1 +
- '12' +
- resources.text_consumptionLevel2 +
- ' <br/><strong>' +
- info.value +
- '</strong>(' +
- resources.text_yuan +
- ')';
- break;
- case 'CON2013':
- contentHTML +=
- resources.text_consumptionLevel1 +
- '13' +
- resources.text_consumptionLevel2 +
- ' <br/><strong>' +
- info.value +
- '</strong>(' +
- resources.text_yuan +
- ')';
- break;
- default:
- contentHTML += 'No Data';
- }
- contentHTML += '</div>';
- var tempPoint = map.unproject({ x: e.event.x, y: e.event.y });
- popup = new mapboxgl.Popup({ closeOnClick: false })
- .setLngLat([tempPoint.lng, tempPoint.lat])
- .setHTML(contentHTML)
- .addTo(map);
- return;
- }
- if (popup) {
- popup.remove();
- }
- }
- ReactDOM.render(
- <SmWebMap serverUrl="https://iportal.supermap.io/iportal" mapId="1329428269">
- <SmGraphThemeLayer chartsType="Pie" options={themeOptions} data={features} onMousemove={handleLayerMousemove} />
- </SmWebMap>,
- document.getElementById('map-container')
- );
- </script>
- </body>
- </html>
|