egovamap 0.11.2 → 0.12.0

package/egovamap/egovaBI.js

@@ -0,0 +1,575 @@
+var egovaBI = function(globeMap, gisMap, mapType){
+
+    function defaultValue(a, b) {
+        if (a !== undefined && a !== null) {
+            return a;
+        }
+        return b;
+    }
+
+    function interpolateColor(start, end, count) {
+        if (count < 2) return [start, end];
+        var r = end[0] - start[0];
+        var g = end[1] - start[1];
+        var b = end[2] - start[2];
+        var opacity = end[3] - start[3];
+        var step = 1.0 / count;
+        var colors = [start];
+        var _count = count - 1;
+        for (var i = 1; i < _count; i++) {
+            var interval = step * i;
+            colors.push([
+                Math.round(start[0] + interval * r),
+                Math.round(start[1] + interval * g),
+                Math.round(start[2] + interval * b),
+                Math.round(start[3] + interval * opacity),
+            ]) 
+        }
+        colors.push(end);
+        return colors;
+    }
+
+    // 查询idb是否存在表
+    function checkObjectStore (storeName) {
+        return new Promise((resolve, reject) => {
+            // 打开网格数据库
+            let idbRequest = window.indexedDB.open('regionDB');
+            idbRequest.onblocked = function(event) {
+                // 如果其他的一些页签加载了该数据库，在我们继续之前需要关闭它们
+                // alert("请关闭其他由该站点打开的页签！");
+                console.log("请关闭其他由该站点打开的页签！")
+            };
+            idbRequest.onerror = (event) => {
+                console.log('数据库打开报错(checkObjectStore)');
+                // resolve(undefined)
+                reject(event.target.error.message)
+            };
+
+            idbRequest.onsuccess = () => {
+                let db = idbRequest.result;
+                // console.log('数据库打开成功(hasObjectStore)')
+                resolve(db.objectStoreNames.contains(storeName))
+                db.close()
+            };
+        })
+    }
+
+    function deal2DPoints(layerName, positions, options){
+        var datalist = [];
+        var zoom = options.common.zoom;
+        var clear = options.common.clear;
+        var highLightType = -1;
+        var infoStyle = null;
+        var renderCanvas = null;
+        var tagName = layerName;
+        var clusterOption = null;
+        if(options.clusterStyle.clusterEnabled){
+            clusterOption = {
+                clusterType:0,
+                distance:options.clusterStyle.clusterDistance,
+                style: options.clusterStyle.symbolUrl ? {
+                    type: "picture-marker",
+                    url: options.clusterStyle.symbolUrl,
+                    width: options.clusterStyle.clusterSymbolWidth + "px",
+                    height: options.clusterStyle.clusterSymbolHeight + "px"
+                } : {
+                    "type": "simple-marker",
+					"style": "circle",
+					"color": [255, 168, 0, 200],
+					"size": 25,
+					"outline": { //if outline has been specified
+						"color": [255, 168, 0, 200],
+						"width": 2
+					}
+                },
+                labelStyle:{
+                    type:"text",
+                    color: options.clusterStyle.fillColor,
+                    text:"",
+                    xoffset:options.clusterStyle.textStartX + "px",
+                    yoffset:options.clusterStyle.textStartY + "px",
+                    font:{
+                        size: options.clusterStyle.fontSize + "px",
+                        weight: options.clusterStyle.fontWeight || "normal",
+                        family: options.clusterStyle.family || "microsoft-yahei"
+                    }
+                }
+            }
+        }
+        
+        var hasHover = null;
+        var callback = null;
+        datalist = positions.map(function(p){
+            p.minZoom = options.common.beginLevel;
+            p.maxZoom = options.common.endLevel;
+            p.symbolType = -1;
+            p.symbolUrl = options.textStyle.symbolUrl || "location.png";
+            p.scale = options.textStyle.scale;
+            p.angle = options.textStyle.angle;
+            //textValue
+            if(options.textStyle.enableText){
+                p.labelStyle = {
+                    type:"text",
+                    xoffset:options.textStyle.xoffset + "px",
+                    yoffset:options.textStyle.yoffset + "px",
+                    text:p.textValue,
+                    color:options.textStyle.fillColor,
+                    font:{
+                        size: options.textStyle.fontSize + "px",
+                        weight: options.textStyle.fontWeight,
+                        family: options.textStyle.family || "microsoft-yahei"
+                    }
+                }
+            }
+            p.useLabelBg = options.textStyle.textBackground;
+            if(p.useLabelBg){
+                p.labelBgStyle = {
+                    type: 'picture-marker', 
+                    url:  options.textStyle.textBackgroundUrl
+                }
+            }
+            return p;
+        })
+        return {
+            datalist:datalist,
+            zoom:zoom,
+            clear:clear,
+            highLightType:highLightType,
+            infoStyle:infoStyle,
+            renderCanvas:renderCanvas,
+            tagName:tagName,
+            clusterOption:clusterOption,
+            hasHover:hasHover,
+            callback:callback
+        }
+    }
+
+    /*
+     * @description:新参数格式的旧热力接口，主要用来做中间层参数格式转换
+     * @method showHeatImage3D_BI
+     * @param {String} layerName 热力参数数组
+     * @param {Array} data 热力值和坐标的数据数组
+     * @param {Object} options 配置项
+     * @param {Object} options.heatOpt 热力配置项
+     * @param {Object} options.commonOpt 通用配置项
+     *
+     * @return {Void}} 无返回
+     *
+     * @author: Hetianhong
+     * @date: 2021-08-31 14:13:42
+    */
+    this.showHeatImage3D_BI = function (layerName, data, option) {
+        //data必须包含x y 和 value属性
+        if(
+            data.length === 0 ||
+            !data[0].hasOwnProperty('x') ||
+            !data[0].hasOwnProperty('y') ||
+            !data[0].hasOwnProperty('value')
+        ) {
+            return
+        }
+        if (globeMap != null) {
+                //hth 此处进行参数转换
+                let commonOpt = option.commonOpt; // 通用配置项
+                let heatOpt = option.heatOpt; // 热力配置项
+
+                let info = {};
+                let zoom = defaultValue(commonOpt.zoom, false);
+                let clear = defaultValue(commonOpt.clear, true);
+                let options = {
+                    heading: defaultValue(commonOpt.heading, 0),
+                    pitch: defaultValue(commonOpt.pitch, -45),
+                    range: defaultValue(commonOpt.range, 8000),
+                    maxDataLength : defaultValue(commonOpt.maxDataLength, 5),
+                    layerName: layerName
+                }
+
+                // 开始组装info
+                //组装info.data,其实也没啥组装的
+                info.data = data
+
+                //组装info.options
+                info.options = {
+                    clampStyle: (heatOpt.heatType === 0) ? 0 : 3, // 如果设置了为0，则为0，其余则全部为旧逻辑的3绘制方式，即贴地贴建筑
+                    renderType: defaultValue(heatOpt.renderType, "line"),
+                    dynamicGranularity: defaultValue(heatOpt.dynamicGranularity, false),
+                    granularity: defaultValue(heatOpt.granularity, 500),
+                    maxHeight: defaultValue(heatOpt.maxHeight, -1),
+                    height: defaultValue(heatOpt.height, 10),
+                    radiusScale: defaultValue(heatOpt.radiusScale, 1.0),
+                    radius: defaultValue(heatOpt.radius, 40),
+                    gradient: defaultValue(heatOpt.gradient, {
+                        0.35: "rgb(136,218,104)",
+                        0.7: "rgb(241,238,124)",
+                        1.0: "rgb(243,118,116)"
+                    }),
+
+                    // 下面的部分不建议传，逐步舍弃
+                    gridSize: defaultValue(heatOpt.gridSize, null),
+                    blur: defaultValue(heatOpt.blur, 0.85),
+                }
+
+                // 转换过后，使用旧的参数格式调用原热力接口
+                globeMap.showHeatImage3D(info, zoom, clear, options);
+        }
+    }
+
+    /*
+    * @description:打点和聚类接口进行整合后的新接口
+    * @method drawPoint
+    * @param {String} layerName 图层名
+    * @param {Array} positions 位置数组
+    * @param {Object} options 配置项
+    *
+    * @return {Void} 无返回
+    *
+    * @author: Hetianhong
+    * @date: 2021-09-09 14:49:49
+    */
+   this.drawPoints = function (layerName, positions, options) {
+        if(globeMap && mapType == "globe"){
+            globeMap.drawPoints(layerName, positions, options);
+        }
+        if(gisMap && mapType == "map"){
+            var args = deal2DPoints(layerName, positions, options);
+            gisMap.showMultiObjectCurrentPosition(args.datalist, args.zoom, args.clear, args.highLightType, args.infoStyle, args.renderCanvas, options.clickCallback, args.tagName, args.clusterOption, args.hasHover);
+        }
+   }
+   /*
+    * @description:新的轨迹线接口
+    * @method traceOperation
+    * @param {Array} posArr 位置数组
+    * @param {Object} options 配置项
+    *
+    * @return {Void} 无返回
+    *
+    * @author: Hetianhong
+    * @date: 2021-09-09 14:49:49
+    */
+    this.traceOperation = function (posArr, options) {
+        globeMap.traceOperation(posArr, options);
+    }
+    /*
+     * @description:网格接口
+     * 先查询idb的data，没有的话，再查询queryFeature的data
+     * @method regionOperation
+     * @param {Object} options 配置项
+     * @param {Array} data 数据，可不传
+     *
+     * @return {Void} 无返回
+     *
+     * @author: Hetianhong
+     * @date: 2021-10-19 17:27:02
+    */
+    this.regionOperation = function (options, data) {
+
+        function execOperation(data) {
+            if (globeMap) {
+                globeMap.regionOperation(options, data);
+            } else if (gisMap) {
+                gridPolygon2dOperation(options, data);
+            }
+        }
+
+        if(data) {
+            execOperation(data);
+        } else {
+            if(!options.idbSetting.usageID){return}
+
+            let storeName = !!globeMap ? "usageID" : "usage2D" + "_" + options.idbSetting.usageID;
+            let queryFromGIS = () => {
+                let filterString = options.idbSetting.filterString || "1=1";
+                let queryParam = {
+                    layerID: options.idbSetting.usageID,
+                    where: filterString,
+                    geometry: '',
+                    outGeometry: true,
+                    options:{
+                        originalData:true
+                    }
+                }
+                let queryCallback = function (featureInfos) {
+                    execOperation(featureInfos);
+                }
+                if(gisMap) {
+                    gisMap.queryFeature(queryParam, queryCallback) 
+                }
+            }
+
+            if(!options.idbSetting.enabled) {
+                // 直接查询
+                queryFromGIS()
+            } else {
+                // 查询是否存在表
+                checkObjectStore(storeName)
+                .then(function(hasObjStore) {
+                    if(hasObjStore) {
+                        // 如果有，读取本地
+                        execOperation(); 
+                    } else {
+                        // 如果没有，查询queryFeature
+                        queryFromGIS()
+                    }
+                })
+            }
+        }
+    }
+    /*
+     * @description:新参数格式的旧线接口，主要用来做中间层参数格式转换
+     * @method showPolyline_BI
+     * @param {参数类型} 参数名 参数说明
+     *
+     * @return {返回值类型} 返回值说明
+     *
+     * @author: Hetianhong
+     * @date: 2021-11-11 15:40:31
+    */
+    this.showPolyline_BI = function (layerName, positions = [], options = {}) {
+        if (scene === null) {
+            return;
+        }
+        if (globeMap !== null) {
+            // 默认参数
+            let defaultOpt = {
+                // 样式类
+                styleOpt: {
+                    period: 4, // 动画线段的周期，越短越快
+                    image: 'road.png', // type为image时线段所使用的纹理图案，位置在data3d/polyline/目录下（type为image限定）
+                    repeatX: 2, // 横向纹理重复，越大则越密（type为image限定）
+                    repeatY: 1, //纵向纹理重复（type为image限定）
+                    glowPower: 0, //中心亮度
+                    intensity: 1.2, //纹理图片颜色强度
+                    gapColor: 'rgba(0, 0, 0, 0)', //间隙颜色（type为dash限定）
+                    dashLength: 15, //间隙宽（type为dash限定）
+                    outlineWidth: 0, // 边框线宽（type为outline限定）
+                    outlineColor: "rgba(0, 0, 0, 0)", // 边框颜色（type为outline限定）
+                    type: 'color', // 线条类型，有 image   color   dash   outline   glow
+                    width: 10,
+                    color: "rgba(255,255,0,1)"
+                },
+                // 视角缩放类
+                zoomOpt: {
+                    //zoom参数
+                    heading: 0,
+                    pitch: -90,
+                    range: null,
+                    //可视级别
+                    minZoom: 0,
+                    maxZoom: 24,
+                    //泛光绘制
+                    // 下面两项，不暴露，全部为false
+                    bloom: false,
+                    merge: false
+                },
+                // 交互类
+                interactOpt: {
+                    //click相关
+                    clickColor: "rgb(255, 255, 0.0)", // 点击后的颜色
+                    clickWidth: 30, // 点击后的宽度
+                    clickCallback: function(e) {console.log('click polyline', e)},
+                    mouseOverCallBack: undefined
+                }
+            }
+            let getMergedOptions = (options) => {
+                let mergedOptions = {};
+                mergedOptions.styleOpt = Object.assign({}, defaultOpt.styleOpt, options.styleOpt);
+                mergedOptions.zoomOpt = Object.assign({}, defaultOpt.zoomOpt, options.zoomOpt);
+                mergedOptions.interactOpt = Object.assign({}, defaultOpt.interactOpt, options.interactOpt);
+                return mergedOptions
+            }
+            let mergedOptions = getMergedOptions(options);
+
+
+            let opt = {}
+            // let styleOpt = options.styleOpt;
+            // let zoomOpt = options.zoomOpt;
+            // let interactOpt = options.interactOpt;
+            //hth 此处进行参数转换
+            switch (mergedOptions.styleOpt.type) {
+                case "image":
+                    opt.period = defaultValue(mergedOptions.styleOpt.period, 4); // 纹理流动周期，越小越快
+                    opt.image = defaultValue(mergedOptions.styleOpt.image, 'road.png'); //纹理图片，data3d/polyline/目录下
+                    opt.repeatX = defaultValue(mergedOptions.styleOpt.repeatX, 2); //横向纹理重复，越大越密
+                    opt.repeatY = defaultValue(mergedOptions.styleOpt.repeatY, 1); //纵向纹理重复
+                    opt.glowPower = defaultValue(mergedOptions.styleOpt.glowPower, 0); //中心亮度
+                    opt.intensity = defaultValue(mergedOptions.styleOpt.intensity, 1.2); //纹理图片颜色强度
+                    break;
+                case "glow":
+                    opt.glowPower = defaultValue(mergedOptions.styleOpt.glowPower, 0.2); //中心亮度
+                    break;
+                case "dash":
+                    opt.gapColor = defaultValue(mergedOptions.styleOpt.gapColor, 'rgba(0, 0, 0, 0)'); //间隙颜色
+                    opt.dashLength = defaultValue(mergedOptions.styleOpt.dashLength, 15); //间隙宽
+                    break;
+                case "outline":
+                    opt.outlineWidth = defaultValue(mergedOptions.styleOpt.outlineWidth, 0);
+                    opt.outlineColor = defaultValue(mergedOptions.styleOpt.outlineColor, "rgba(0, 0, 0, 0)");
+                    break;
+                default:
+                    // color
+            };
+
+            opt.type = mergedOptions.styleOpt.type;
+            opt.width = mergedOptions.styleOpt.width;
+            opt.color = mergedOptions.styleOpt.color;
+
+            // 遍历位置数组中的每一项
+            for(let pos of positions) {
+                // 遍历opt中每一个key赋值到每一个pos中
+                for(let k in opt) {
+                    pos[k] = opt[k]
+                }
+            }
+
+
+            let zoom = mergedOptions.zoomOpt.zoom
+            let clear = mergedOptions.zoomOpt.clear
+            let clickCallback = mergedOptions.interactOpt.clickCallback
+            let mouseOverCallBack = mergedOptions.interactOpt.mouseOverCallBack
+            let commonOpt = {
+                //zoom参数
+                heading: mergedOptions.zoomOpt.heading,
+                pitch: mergedOptions.zoomOpt.pitch,
+                range: mergedOptions.zoomOpt.range,
+                //可视级别
+                minZoom: mergedOptions.zoomOpt.minZoom,
+                maxZoom: mergedOptions.zoomOpt.maxZoom,
+                //click相关
+                clickColor: mergedOptions.interactOpt.clickColor, // 点击后的颜色
+                clickWidth: mergedOptions.interactOpt.clickWidth, // 点击后的宽度
+                //泛光绘制
+                // 下面两项，不暴露，全部为false
+                bloom: false,
+                merge: false
+            }
+
+
+            globeMap.showPolyline(positions, zoom, clear, commonOpt, layerName, clickCallback, mouseOverCallBack);
+        }
+    }
+    /*
+     * @description:被动触发图层类似点击效果，需要在图层内在单独定义Event
+     * @method activeLayer
+     * @param {String} layerName 图层名
+     * @param {Object} options 配置项
+     * @param {String} options.type 操作类型，'clear', 'active'
+     * @param {Boolean} options.zoom 是否缩放
+     * @param {Object} filter 过滤项
+     * @param {String} filter.keyFieldName 过滤键名
+     * @param {Array} filter.values 过滤值内容数组
+     *
+     * @return {返回值类型} 返回值说明
+     *
+     * @author: Hetianhong
+     * @date: 2021-11-26 09:49:16
+    */
+    this.activeLayer = function (layerName, options, filter) {
+        globeMap.activeLayer(layerName, options, filter);
+    }
+
+    function gridPolygon2dOperation(options, data) {
+        var storeName = `usage2D_${options.idbSetting.usageID}`;
+        function showGrid(realData) {
+            // 转换一下
+            var geometries = [];
+            var extraGeometries = [];
+            for (var i = 0; i < realData.length; i++) {
+                var feature = realData[i];
+                var geom = feature.geometry;
+                geom.attributes = feature.attributes; // attributes会导致id没用，使用自带的id
+                geometries.push(geom);
+            }
+            if (options.specialArea && options.selectedSetting.selected.length) {
+                var extraIds = options.selectedSetting.selected.map(s => s.selectID);
+                for (var i = geometries.length - 1; i > -1; i--) {
+                    var geom = geometries[i];
+                    if (extraIds.indexOf(geom.attributes[options.keyFieldName]) > -1) {
+                        geometries.splice(i, 1);
+                        extraGeometries.push(geom);
+                        if (extraGeometries.length === extraIds.length) break;
+                    }
+                }
+            }
+            gisMap.locateFeatureByCoords(geometries, 'polygon',
+                options.layerName, // id，如果已经有attributes就没用了
+                options.style, // style
+                options.highlightStyle, // highlightStyle
+                true, // zoom
+                options.keyFieldName,
+                options.labelSetting.showLabel && options.labelFieldName, // keyField, labelField
+                options.labelStyle, // labelStyle
+                options.customColor ? interpolateColor(options.customColor[0], options.customColor[1], Math.min(geometries.length, 10)) : 10, // randomColor
+                false, // renderCanvas
+                true, // singleSelect
+                {
+                    minZoom: options.visiblitySetting.beginLevel,
+                    maxZoom: options.visiblitySetting.endLevel,
+                    // hLabelStyle: options.hLabelStyle, // 选中文字时效果，没用
+                },
+                options.layerName, // layerTag
+                options.eventSetting.clickCallback
+            );
+            if (extraGeometries.length) {
+                gisMap.locateFeatureByCoords(extraGeometries, 'polygon',
+                    options.layerName, // id，如果已经有attributes就没用了
+                    options.specialAreaStyle, // style
+                    options.highlightStyle, // highlightStyle
+                    false, // zoom
+                    options.keyFieldName,
+                    options.selectedSetting.showLabel && options.labelFieldName, // keyField, labelField
+                    options.specialAreaLabelStyle, // labelStyle
+                    false, // randomColor
+                    false, // renderCanvas
+                    true, // singleSelect
+                    {
+                        minZoom: options.visiblitySetting.beginLevel,
+                        maxZoom: options.visiblitySetting.endLevel,
+                        // hLabelStyle: options.hLabelStyle, // 选中文字时效果，没用
+                    },
+                    options.layerName, // layerTag
+                    options.eventSetting.clickCallback
+                );
+            }
+        }
+
+        if (!data) {
+            // 数据来自本地
+            var dbOpenRequest = window.indexedDB.open('regionDB');
+            dbOpenRequest.onsuccess = function(event) {
+                var db = this.result;
+                var store = db.transaction(storeName).objectStore(storeName);
+                var request = store.getAll();
+                request.onsuccess = function() {
+                    var features = this.result;
+                    showGrid(features);
+                }
+            }
+        } else {
+            var _data = JSON.parse(JSON.stringify(data[0]));
+            showGrid(data[0]);
+            var dbRequest = window.indexedDB.open('regionDB');
+            dbRequest.onsuccess = function() {
+                addStore(this.result.version);
+            }
+            function addStore(version) {
+                var dbOpenRequest = window.indexedDB.open('regionDB', version + 1);
+                dbOpenRequest.onupgradeneeded = function(event) {
+                    var db = event.target.result;
+                    if (!db.objectStoreNames.contains(storeName)) {
+                        var store = db.createObjectStore(storeName, { autoIncrement: true });
+                        for (var i = 0; i < _data.length; i++) {
+                            store.put(_data[i]);
+                        }
+                        store.transaction.oncomplete = function() {
+                            console.log("complete");
+                        }
+                    }
+    
+                }
+            }
+        }
+    }
+}
+
+
+export default egovaBI

package/egovamap/egovagis.js

@@ -699,8 +699,8 @@ var EGovaGISMap = function ($container, pScene, prefix, gisParams, mapConfig,con
     /**
 	*等值面生成
 	**/
-	that.isobands = function(attrarry,xarry,yarry,breaks,breakcolors,cellwidth,boundary,hascelllabel,labelcolor){
-		scene.fire(msgPrefix + ":isobands", { args: [attrarry,xarry,yarry,breaks,breakcolors,cellwidth,boundary,hascelllabel,labelcolor] },
+	that.isobands = function(attrarry,xarry,yarry,breaks,breakcolors,cellwidth,boundary,hascelllabel,labelcolor,callback){
+		scene.fire(msgPrefix + ":isobands", { args: [attrarry,xarry,yarry,breaks,breakcolors,cellwidth,boundary,hascelllabel,labelcolor,callback] },
 			parentScene);
 	}
 
@@ -1041,7 +1041,7 @@ var EGovaGISMap = function ($container, pScene, prefix, gisParams, mapConfig,con
 	that.queryFeature = function(params, callback) {
 		if (scene == null)
 			return;
-		scene.fire(msgPrefix + ":queryFeature", {args: [params.layerID, params.where || null, params.geometry || null, params.outFields, params.outGeometry, params.pointTolorence||0,params.startIndex,params.maxFeatures,null,callback||null,params.sortBy, params.filterNullGeometry]}, parentScene);
+		scene.fire(msgPrefix + ":queryFeature", {args: [params.layerID, params.where || null, params.geometry || null, params.outFields, params.outGeometry, params.pointTolorence||0,params.startIndex,params.maxFeatures,null,callback||null,params.sortBy, params.filterNullGeometry, params.options]}, parentScene);
 	}
 
 	/* 显示图层