Skip to content

Commit 2db4ae0

Browse files
author
ChenGuanglin
committed
【feature】webmap对接迁徙图
review by zhaoq
1 parent dba92da commit 2db4ae0

File tree

4 files changed

+313
-6
lines changed

4 files changed

+313
-6
lines changed

‎src/openlayers/core/Util.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,7 @@ export class Util {
336336
datasetNames: datasetNames,
337337
fromIndex: 0,
338338
toIndex: 100000,
339+
maxFeatures: 100000,
339340
returnContent: true
340341
});
341342
let options = {
@@ -381,6 +382,40 @@ export class Util {
381382
});
382383
}
383384

385+
/**
386+
* @function ol.supermap.Util.getFeatureProperties
387+
* @description 从feature中获取properties
388+
* @param {array} features 要素数组
389+
* @returns {array} 属性
390+
*/
391+
static getFeatureProperties(features) {
392+
let properties = [];
393+
if (Util.isArray(features) && features.length) {
394+
features.forEach(feature => {
395+
let property = feature.attributes || feature.get('Properties');
396+
property && properties.push(property);
397+
});
398+
}
399+
return properties;
400+
}
401+
402+
/**
403+
* @function ol.supermap.Util.isMatchAdministrativeName
404+
* @param {string} featureName 原始数据中的地名
405+
* @param {string} fieldName 需要匹配的地名
406+
* @returns {boolean} 是否匹配
407+
*/
408+
static isMatchAdministrativeName(featureName, fieldName) {
409+
if (Util.isString(fieldName)) {
410+
let shortName = featureName.substr(0, 2);
411+
// 张家口市和张家界市 特殊处理
412+
if (shortName === '张家') {
413+
shortName = featureName.substr(0, 3);
414+
}
415+
return !!fieldName.match(new RegExp(shortName));
416+
}
417+
return false;
418+
}
384419
}
385420

386421
ol.supermap.Util = Util;

‎src/openlayers/mapping/WebMap.js

Lines changed: 276 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,17 @@ import {
1616
import {
1717
StyleUtils
1818
} from '../core/StyleUtils';
19+
import provincialCenterData from './webmap/config/ProvinceCenter';
20+
import municipalCenterData from './webmap/config/MunicipalCenter';
1921
import jsonsql from 'jsonsql';
2022

2123
window.proj4 = proj4;
2224
window.Proj4js = proj4;
2325
ol.supermap = ol.supermap || {};
2426
//数据转换工具
2527
const transformTools = new ol.format.GeoJSON();
28+
// 迁徙图最大支持要素数量
29+
const MAX_MIGRATION_ANIMATION_COUNT = 1000;
2630
/**
2731
* @class ol.supermap.WebMap
2832
* @category iPortal/Online
@@ -1172,7 +1176,7 @@ export class WebMap extends ol.Observable {
11721176
* @param {number} layersLen - 叠加图层总数
11731177
*/
11741178
sendMapToUser(layersLen) {
1175-
if (this.layerAdded === layersLen) {
1179+
if (this.layerAdded === layersLen && this.successCallback) {
11761180
this.successCallback(this.map, this.mapParams, this.layers);
11771181
}
11781182
}
@@ -1381,15 +1385,16 @@ export class WebMap extends ol.Observable {
13811385
layer = this.createDataflowHeatLayer(layerInfo);
13821386
} else if(layerInfo.layerType === "RANK_SYMBOL") {
13831387
layer = this.createRankSymbolLayer(layerInfo, features);
1388+
} else if(layerInfo.layerType === "MIGRATION") {
1389+
layer = this.createMigrationLayer(layerInfo, features);
13841390
}
13851391
let layerId = Util.newGuid(8);
13861392
if (layer) {
13871393
layerInfo.name && layer.setProperties({
13881394
name: layerInfo.name,
13891395
layerId: layerId
13901396
});
1391-
layerInfo.opacity && layer.setOpacity(layerInfo.opacity);
1392-
layer.setVisible(layerInfo.visible);
1397+
13931398
//刷新下图层，否则feature样式出不来
13941399
if(layerInfo && layerInfo.style && layerInfo.style.imageInfo) {
13951400
let img = new Image();
@@ -1398,10 +1403,17 @@ export class WebMap extends ol.Observable {
13981403
layer.getSource().refresh();
13991404
};
14001405
}
1401-
1406+
if (layerInfo.layerType === 'MIGRATION') {
1407+
layer.appendTo(this.map);
1408+
// 在这里恢复图层可见性状态
1409+
layer.setVisible(layerInfo.visible);
1410+
} else {
1411+
layerInfo.opacity != undefined && layer.setOpacity(layerInfo.opacity);
1412+
layer.setVisible(layerInfo.visible);
1413+
this.map.addLayer(layer);
1414+
}
1415+
layer.setZIndex(index);
14021416
}
1403-
layer && this.map.addLayer(layer);
1404-
layer && layer.setZIndex(index);
14051417
layerInfo.layer = layer;
14061418
layerInfo.layerId = layerId;
14071419
if (layerInfo.labelStyle && layerInfo.labelStyle.labelField && layerInfo.layerType !== "DATAFLOW_POINT_TRACK") {
@@ -2581,7 +2593,265 @@ export class WebMap extends ol.Observable {
25812593
}
25822594
}
25832595
}
2596+
2597+
/**
2598+
* @private
2599+
* @function ol.supermap.WebMap.prototype.createMigrationLayer
2600+
* @description 创建迁徙图
2601+
* @param {Object} layerInfo 图层信息
2602+
* @param {Array} features 要素数组
2603+
* @returns {ol.layer} 图层
2604+
*/
2605+
createMigrationLayer(layerInfo, features) {
2606+
// 给ol3Echarts上添加设置图层可见性和设置图层层级的方法
2607+
if (!window.ol3Echarts.prototype.setVisible) {
2608+
window.ol3Echarts.prototype.setVisible = function(visible) {
2609+
if (visible) {
2610+
let options = this.get('options');
2611+
if (options) {
2612+
this.setChartOptions(options);
2613+
this.unset('options');
2614+
}
2615+
} else {
2616+
let options = this.getChartOptions();
2617+
this.set('options', options);
2618+
this.clear();
2619+
this.setChartOptions({});
2620+
}
2621+
};
2622+
}
2623+
if (!window.ol3Echarts.prototype.setZIndex) {
2624+
window.ol3Echarts.prototype.setZIndex = function(zIndex) {
2625+
if (this.$container) {
2626+
this.$container.style.zIndex = zIndex;
2627+
}
2628+
};
2629+
}
2630+
let properties = Util.getFeatureProperties(features);
2631+
let lineData = this.createLinesData(layerInfo, properties);
2632+
let pointData = this.createPointsData(lineData, layerInfo, properties);
2633+
let options = this.createOptions(layerInfo, lineData, pointData);
2634+
let layer = new window.ol3Echarts(options, {
2635+
hideOnMoving: true,
2636+
hideOnZooming: true
2637+
});
2638+
layer.type = 'ECHARTS';
2639+
return layer;
2640+
}
2641+
2642+
/**
2643+
* @private
2644+
* @function ol.supermap.WebMap.prototype.createOptions
2645+
* @description 创建echarts的options
2646+
* @param {Object} layerInfo 图层信息
2647+
* @param {Array} lineData 线数据
2648+
* @param {Array} pointData 点数据
2649+
* @returns {Object} echarts参数
2650+
*/
2651+
createOptions(layerInfo, lineData, pointData) {
2652+
let series;
2653+
let lineSeries = this.createLineSeries(layerInfo, lineData);
2654+
if (pointData && pointData.length) {
2655+
let pointSeries = this.createPointSeries(layerInfo, pointData);
2656+
series = lineSeries.concat(pointSeries);
2657+
} else {
2658+
series = lineSeries.slice();
2659+
}
2660+
let options = {
2661+
series
2662+
}
2663+
return options;
2664+
}
2665+
2666+
/**
2667+
* @private
2668+
* @function ol.supermap.WebMap.prototype.createLineSeries
2669+
* @description 创建线系列
2670+
* @param {Object} layerInfo 图层参数
2671+
* @param {Array} lineData 线数据
2672+
* @returns {Object} 线系列
2673+
*/
2674+
createLineSeries(layerInfo, lineData) {
2675+
let lineSetting = layerInfo.lineSetting;
2676+
let animationSetting = layerInfo.animationSetting;
2677+
let linesSeries = [
2678+
// 轨迹线样式
2679+
{
2680+
name: 'line-series',
2681+
type: 'lines',
2682+
zlevel: 1,
2683+
effect: {
2684+
show: animationSetting.show,
2685+
constantSpeed: animationSetting.constantSpeed,
2686+
trailLength: 0,
2687+
symbol: animationSetting.symbol,
2688+
symbolSize: animationSetting.symbolSize
2689+
},
2690+
lineStyle: {
2691+
normal: {
2692+
color: lineSetting.color,
2693+
type: lineSetting.type,
2694+
width: lineSetting.width,
2695+
opacity: lineSetting.opacity,
2696+
curveness: lineSetting.curveness
2697+
}
2698+
},
2699+
data: lineData
2700+
}
2701+
];
2702+
2703+
if (lineData.length > MAX_MIGRATION_ANIMATION_COUNT) {
2704+
linesSeries[0].large = true;
2705+
linesSeries[0].largeThreshold = 100;
2706+
linesSeries[0].blendMode = 'lighter';
2707+
}
2708+
2709+
return linesSeries;
2710+
}
25842711

2712+
/**
2713+
* @private
2714+
* @function ol.supermap.WebMap.prototype.createPointSeries
2715+
* @description 创建点系列
2716+
* @param {Object} layerInfo 图层参数
2717+
* @param {Array} pointData 点数据
2718+
* @returns {Object} 点系列
2719+
*/
2720+
createPointSeries(layerInfo, pointData) {
2721+
let lineSetting = layerInfo.lineSetting;
2722+
let animationSetting = layerInfo.animationSetting;
2723+
let labelSetting = layerInfo.labelSetting;
2724+
let pointSeries = [{
2725+
name: 'point-series',
2726+
coordinateSystem: 'geo',
2727+
zlevel: 2,
2728+
label: {
2729+
normal: {
2730+
show: labelSetting.show,
2731+
position: 'right',
2732+
formatter: '{b}',
2733+
color: labelSetting.color,
2734+
fontFamily: labelSetting.fontFamily
2735+
}
2736+
},
2737+
itemStyle: {
2738+
normal: {
2739+
color: lineSetting.color || labelSetting.color
2740+
}
2741+
},
2742+
data: pointData
2743+
}]
2744+
2745+
if (animationSetting.show) {
2746+
// 开启动画
2747+
pointSeries[0].type = 'effectScatter';
2748+
pointSeries[0].rippleEffect = {
2749+
brushType: 'stroke'
2750+
}
2751+
} else {
2752+
// 关闭动画
2753+
pointSeries[0].type = 'scatter';
2754+
}
2755+
2756+
return pointSeries;
2757+
}
2758+
2759+
/**
2760+
* @private
2761+
* @function ol.supermap.WebMap.prototype.createPointsData
2762+
* @param {Array} lineData 线数据
2763+
* @param {Object} layerInfo 图层信息
2764+
* @param {Array} properties 属性
2765+
* @returns {Array} 点数据
2766+
*/
2767+
createPointsData(lineData, layerInfo, properties) {
2768+
let data = [],
2769+
labelSetting = layerInfo.labelSetting;
2770+
// 标签隐藏则直接返回
2771+
if (!labelSetting.show || !lineData.length) {
2772+
return data;
2773+
}
2774+
let fromData = [], toData = [];
2775+
lineData.forEach((item, idx) => {
2776+
let coords = item.coords,
2777+
fromCoord = coords[0],
2778+
toCoord = coords[1],
2779+
fromProperty = properties[idx][labelSetting.from],
2780+
toProperty = properties[idx][labelSetting.to];
2781+
// 起始字段去重
2782+
let f = fromData.find(d => {
2783+
return d.value[0] === fromCoord[0] && d.value[1] === fromCoord[1]
2784+
});
2785+
!f && fromData.push({
2786+
name: fromProperty,
2787+
value: fromCoord
2788+
})
2789+
// 终点字段去重
2790+
let t = toData.find(d => {
2791+
return d.value[0] === toCoord[0] && d.value[1] === toCoord[1]
2792+
});
2793+
!t && toData.push({
2794+
name: toProperty,
2795+
value: toCoord
2796+
})
2797+
});
2798+
data = fromData.concat(toData);
2799+
return data;
2800+
}
2801+
2802+
/**
2803+
* @private
2804+
* @function ol.supermap.WebMap.prototype.createLinesData
2805+
* @param {Object} layerInfo 图层信息
2806+
* @param {Array} properties 属性
2807+
* @returns {Array} 线数据
2808+
*/
2809+
createLinesData(layerInfo, properties) {
2810+
let data = [];
2811+
if (properties && properties.length) {
2812+
// 重新获取数据
2813+
let from = layerInfo.from,
2814+
to = layerInfo.to,
2815+
fromCoord, toCoord;
2816+
if (from.type === 'XY_FIELD' && from['xField'] && from['yField'] && to['xField'] && to['yField']) {
2817+
properties.forEach(property => {
2818+
let fromX = property[from['xField']],
2819+
fromY = property[from['yField']],
2820+
toX = property[to['xField']],
2821+
toY = property[to['yField']];
2822+
if (!fromX || !fromY || !toX || !toY) {
2823+
return;
2824+
}
2825+
2826+
fromCoord = [property[from['xField']], property[from['yField']]];
2827+
toCoord = [property[to['xField']], property[to['yField']]];
2828+
data.push({
2829+
coords: [fromCoord, toCoord]
2830+
})
2831+
});
2832+
} else if(from.type === 'PLACE_FIELD' && from['field'] && to['field']) {
2833+
const centerDatas = provincialCenterData.concat(municipalCenterData);
2834+
2835+
properties.forEach(property => {
2836+
let fromField = property[from['field']],
2837+
toField = property[to['field']];
2838+
fromCoord = centerDatas.find(item => {
2839+
return Util.isMatchAdministrativeName(item.name, fromField);
2840+
})
2841+
toCoord = centerDatas.find(item => {
2842+
return Util.isMatchAdministrativeName(item.name, toField);
2843+
})
2844+
if (!fromCoord || !toCoord) {
2845+
return;
2846+
}
2847+
data.push({
2848+
coords: [fromCoord.coord, toCoord.coord]
2849+
})
2850+
});
2851+
}
2852+
}
2853+
return data;
2854+
}
25852855
}
25862856

25872857
ol.supermap.WebMap = WebMap;

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy