实现的功能openlayers面要素渲染样式定制包括纯色、图片、水平线、垂直线、正斜十字网格、正反斜线。参考网络众多资源后进行了此次实现。附要素渲染属性选择的实现提供一个函数附到style对象上可忽略。上代码// config为面填充样式配置对象functiongetAConfigedPS(config){varpsnull;try{varstrokeOptions{color:(config.strokeColoropacityToHex(config.strokeOpacity||1))||#32C6D5,width:config.strokeWidth||2,opacity:config.strokeOpacity||1,// lineDash: [10, 5], // 虚线};if(config.strokeStyleconfig.strokeStyle!solid){if(config.dashArray){strokeOptions.lineDash(config.dashArray).split(,);}}varpolygonOptions{fill:newOLFill({color:(config.fillColoropacityToHex(config.fillOpacity||1))||#14e4bb,})};if(config.strokeEnabledconfig.strokeEnabled1){polygonOptions.strokenewOLStroke(strokeOptions);}console.log(config.fillStyle,config.fillStyle);//if(config.fillStyleconfig.fillStylesolid){//纯色填充console.log(polygonOptions,polygonOptions);psnewOLStyle(polygonOptions);}elseif(config.fillStyleconfig.fillStyleimage){//图片填充if(config.fillImageUrl){varcnvdocument.createElement(canvas);varctxcnv.getContext(2d);varimgnewImage();img.srcapiGetFileFullUrl(config.fillImageUrl);varfillnewOLFill({color:#ffff00});varimageFillOptions{fill:fill};if(config.strokeEnabledconfig.strokeEnabled1){imageFillOptions.strokenewOLStroke(strokeOptions);}psnewOLStyle(imageFillOptions);img.onloadfunction(){varpatternctx.createPattern(img,repeat);fill.setColor(pattern);};}else{psGetDefaultPointStyle();}}else{// 各类线条填充// 创建一个新的图案varcreateStripedPatternfunction(lineType){/* lineType: { label: 水平线, value: horizontal }, { label: 垂直线, value: vertical }, { label: 十字网格, value: cross }, { label: 正斜线, value: forward_diagonal }, { label: 反斜线, value: backward_diagonal }, { label: 斜十字网格, value: cross_diag }, */// 获取canvas元素和上下文varcanvasdocument.createElement(canvas);varctxcanvas.getContext(2d);ctx.fillStyle#FFFFFF66;ctx.fillRect(0,0,canvas.width,canvas.height);// 创建一个新的图案画布varpatternCanvasdocument.createElement(canvas);patternCanvas.width20;// 图案画布的宽度patternCanvas.height20;// 图案画布的高度varpCtxpatternCanvas.getContext(2d);pCtx.fillStyle#FFFFFF99;pCtx.fillRect(0,0,canvas.width,canvas.height);// 设置线条样式pCtx.strokeStyle#aaaaaa99;// 线条颜色pCtx.lineWidth1;// 线条宽度switch(lineType){casehorizontal:{// 水平线pCtx.beginPath();pCtx.moveTo(0,10);pCtx.lineTo(20,10);pCtx.stroke();break;}casevertical:{// 垂直线pCtx.beginPath();pCtx.moveTo(10,0);pCtx.lineTo(10,20);pCtx.stroke();break;}casecross:{// 十字网格pCtx.beginPath();pCtx.moveTo(10,2);pCtx.lineTo(10,18);pCtx.stroke();pCtx.beginPath();pCtx.moveTo(2,10);pCtx.lineTo(18,10);pCtx.stroke();break;}caseforward_diagonal:{// 正斜线pCtx.beginPath();pCtx.moveTo(0,20);pCtx.lineTo(20,0);pCtx.stroke();break;}casebackward_diagonal:{// 反斜线pCtx.beginPath();pCtx.moveTo(0,0);pCtx.lineTo(20,20);pCtx.stroke();break;}casecross_diag:{// 斜十字网格pCtx.beginPath();pCtx.moveTo(3,3);pCtx.lineTo(17,17);pCtx.stroke();pCtx.beginPath();pCtx.moveTo(3,17);pCtx.lineTo(17,3);pCtx.stroke();break;}default:{//斜方格pCtx.beginPath();pCtx.moveTo(0,0);pCtx.lineTo(20,20);pCtx.stroke();pCtx.beginPath();pCtx.moveTo(0,20);pCtx.lineTo(20,0);pCtx.stroke();break;}}// 使用createPattern创建重复的图案varpatternctx.createPattern(patternCanvas,repeat);console.log(patternpattern,pattern);returnpattern;}varlineFillOptions{// stroke: new OLStroke({// color: red,// lineDash: [5],// width: 2// }),fill:newOLFill({color:createStripedPattern(config.fillStyle)||#ffff00})};if(config.strokeEnabledconfig.strokeEnabled1){lineFillOptions.strokenewOLStroke(strokeOptions);}psnewOLStyle(lineFillOptions);}}catch(ex){console.log(GetConfigedPolylineSymbols ex 采用默认样式,ex);psGetDefaultPointStyle();}//只关注样式的请忽略这一段内容//适用的属性选择器config.categories示例/* [{ type: select, field: name, relation: 等于, value: 符号-鹊山水库 }, { type: logical, value: 或 }, { type: select, field: name, relation: 等于, value: 符号-鹊山水库 }] *///是否符合多条件function_filterFunction(attrs){//计算是否符合条件 符合返回truefunctionfilterVal(inValue,relation,compareValue){console.log(filterVal,inValue,relation,compareValue);varresultfalse;switch(relation){case等于:{result(inValuecompareValue);break;}case不等于:{result(inValue!compareValue);break;}case小于:{result(inValuecompareValue);break;}case小于等于:{result(inValuecompareValue);break;}case大于:{result(inValuecompareValue);break;}case大于等于:{result(inValuecompareValue);break;}case包含:{result((inValue).indexOf(compareValue)0);break;}case不包含:{result((inValue).indexOf(compareValue)0);break;}}returnresult;}if(config.categories(config.categories).length10){try{varcarrJSON.parse(config.categories);if(carrinstanceofArraycarr.length0){varcstr;for(vari0;icarr.length;i){varccarr[i];if(c.typec.typeselect){varvattrs[c.field];varrfilterVal(v,c.relation,c.value);cstr(r? 1 : 0 );}elseif(c.typec.typelogical){if(c.value且){cstr * ;}else{cstr ;}}}console.log(cstr,cstr);if(eval(cstr)1){returntrue;}else{returnfalse;}}else{returntrue;}}catch(ex){returntrue;}}else{returntrue;}}ps.filter_filterFunction;ps.xInfo{symbolConfig:config};returnps;}实现效果config对象示例{createBy:null,createTime:2026-08-03 16:04:59,updateBy:null,updateTime:2026-08-03 16:04:59,remark:null,id:b4a92e6b7d2a4583a0c63425de0edb40,layerId:f8666ad651e64f81be9b307ecc5e867b,categories:[{ \type\: \select\, \field\: \name\, \relation\: \等于\, \value\: \正斜线\ }],symbolName:正斜线,fillColor:#1890FF,fillOpacity:0,fillStyle:forward_diagonal,fillImageUrl:null,strokeEnabled:1,strokeColor:#1890FF,strokeWidth:2,strokeOpacity:0,strokeStyle:solid,dashArray:null,labelEnabled:1,highlightEnabled:1,highlightFillColor:#FF7A45,highlightFillOpacity:0.5,highlightStrokeColor:#FF4D4F,highlightStrokeWidth:3,extrusionEnabled:0,extrusionHeight:0,extrusionHeightField:null,extrusionTopColor:null,extrusionSideColor:null,minZoom:3,maxZoom:20,sort:1,status:0,zindex:5}
实现的功能openlayers面要素渲染样式定制包括纯色、图片、水平线、垂直线、正斜十字网格、正反斜线。参考网络众多资源后进行了此次实现。附要素渲染属性选择的实现提供一个函数附到style对象上可忽略。上代码// config为面填充样式配置对象functiongetAConfigedPS(config){varpsnull;try{varstrokeOptions{color:(config.strokeColoropacityToHex(config.strokeOpacity||1))||#32C6D5,width:config.strokeWidth||2,opacity:config.strokeOpacity||1,// lineDash: [10, 5], // 虚线};if(config.strokeStyleconfig.strokeStyle!solid){if(config.dashArray){strokeOptions.lineDash(config.dashArray).split(,);}}varpolygonOptions{fill:newOLFill({color:(config.fillColoropacityToHex(config.fillOpacity||1))||#14e4bb,})};if(config.strokeEnabledconfig.strokeEnabled1){polygonOptions.strokenewOLStroke(strokeOptions);}console.log(config.fillStyle,config.fillStyle);//if(config.fillStyleconfig.fillStylesolid){//纯色填充console.log(polygonOptions,polygonOptions);psnewOLStyle(polygonOptions);}elseif(config.fillStyleconfig.fillStyleimage){//图片填充if(config.fillImageUrl){varcnvdocument.createElement(canvas);varctxcnv.getContext(2d);varimgnewImage();img.srcapiGetFileFullUrl(config.fillImageUrl);varfillnewOLFill({color:#ffff00});varimageFillOptions{fill:fill};if(config.strokeEnabledconfig.strokeEnabled1){imageFillOptions.strokenewOLStroke(strokeOptions);}psnewOLStyle(imageFillOptions);img.onloadfunction(){varpatternctx.createPattern(img,repeat);fill.setColor(pattern);};}else{psGetDefaultPointStyle();}}else{// 各类线条填充// 创建一个新的图案varcreateStripedPatternfunction(lineType){/* lineType: { label: 水平线, value: horizontal }, { label: 垂直线, value: vertical }, { label: 十字网格, value: cross }, { label: 正斜线, value: forward_diagonal }, { label: 反斜线, value: backward_diagonal }, { label: 斜十字网格, value: cross_diag }, */// 获取canvas元素和上下文varcanvasdocument.createElement(canvas);varctxcanvas.getContext(2d);ctx.fillStyle#FFFFFF66;ctx.fillRect(0,0,canvas.width,canvas.height);// 创建一个新的图案画布varpatternCanvasdocument.createElement(canvas);patternCanvas.width20;// 图案画布的宽度patternCanvas.height20;// 图案画布的高度varpCtxpatternCanvas.getContext(2d);pCtx.fillStyle#FFFFFF99;pCtx.fillRect(0,0,canvas.width,canvas.height);// 设置线条样式pCtx.strokeStyle#aaaaaa99;// 线条颜色pCtx.lineWidth1;// 线条宽度switch(lineType){casehorizontal:{// 水平线pCtx.beginPath();pCtx.moveTo(0,10);pCtx.lineTo(20,10);pCtx.stroke();break;}casevertical:{// 垂直线pCtx.beginPath();pCtx.moveTo(10,0);pCtx.lineTo(10,20);pCtx.stroke();break;}casecross:{// 十字网格pCtx.beginPath();pCtx.moveTo(10,2);pCtx.lineTo(10,18);pCtx.stroke();pCtx.beginPath();pCtx.moveTo(2,10);pCtx.lineTo(18,10);pCtx.stroke();break;}caseforward_diagonal:{// 正斜线pCtx.beginPath();pCtx.moveTo(0,20);pCtx.lineTo(20,0);pCtx.stroke();break;}casebackward_diagonal:{// 反斜线pCtx.beginPath();pCtx.moveTo(0,0);pCtx.lineTo(20,20);pCtx.stroke();break;}casecross_diag:{// 斜十字网格pCtx.beginPath();pCtx.moveTo(3,3);pCtx.lineTo(17,17);pCtx.stroke();pCtx.beginPath();pCtx.moveTo(3,17);pCtx.lineTo(17,3);pCtx.stroke();break;}default:{//斜方格pCtx.beginPath();pCtx.moveTo(0,0);pCtx.lineTo(20,20);pCtx.stroke();pCtx.beginPath();pCtx.moveTo(0,20);pCtx.lineTo(20,0);pCtx.stroke();break;}}// 使用createPattern创建重复的图案varpatternctx.createPattern(patternCanvas,repeat);console.log(patternpattern,pattern);returnpattern;}varlineFillOptions{// stroke: new OLStroke({// color: red,// lineDash: [5],// width: 2// }),fill:newOLFill({color:createStripedPattern(config.fillStyle)||#ffff00})};if(config.strokeEnabledconfig.strokeEnabled1){lineFillOptions.strokenewOLStroke(strokeOptions);}psnewOLStyle(lineFillOptions);}}catch(ex){console.log(GetConfigedPolylineSymbols ex 采用默认样式,ex);psGetDefaultPointStyle();}//只关注样式的请忽略这一段内容//适用的属性选择器config.categories示例/* [{ type: select, field: name, relation: 等于, value: 符号-鹊山水库 }, { type: logical, value: 或 }, { type: select, field: name, relation: 等于, value: 符号-鹊山水库 }] *///是否符合多条件function_filterFunction(attrs){//计算是否符合条件 符合返回truefunctionfilterVal(inValue,relation,compareValue){console.log(filterVal,inValue,relation,compareValue);varresultfalse;switch(relation){case等于:{result(inValuecompareValue);break;}case不等于:{result(inValue!compareValue);break;}case小于:{result(inValuecompareValue);break;}case小于等于:{result(inValuecompareValue);break;}case大于:{result(inValuecompareValue);break;}case大于等于:{result(inValuecompareValue);break;}case包含:{result((inValue).indexOf(compareValue)0);break;}case不包含:{result((inValue).indexOf(compareValue)0);break;}}returnresult;}if(config.categories(config.categories).length10){try{varcarrJSON.parse(config.categories);if(carrinstanceofArraycarr.length0){varcstr;for(vari0;icarr.length;i){varccarr[i];if(c.typec.typeselect){varvattrs[c.field];varrfilterVal(v,c.relation,c.value);cstr(r? 1 : 0 );}elseif(c.typec.typelogical){if(c.value且){cstr * ;}else{cstr ;}}}console.log(cstr,cstr);if(eval(cstr)1){returntrue;}else{returnfalse;}}else{returntrue;}}catch(ex){returntrue;}}else{returntrue;}}ps.filter_filterFunction;ps.xInfo{symbolConfig:config};returnps;}实现效果config对象示例{createBy:null,createTime:2026-08-03 16:04:59,updateBy:null,updateTime:2026-08-03 16:04:59,remark:null,id:b4a92e6b7d2a4583a0c63425de0edb40,layerId:f8666ad651e64f81be9b307ecc5e867b,categories:[{ \type\: \select\, \field\: \name\, \relation\: \等于\, \value\: \正斜线\ }],symbolName:正斜线,fillColor:#1890FF,fillOpacity:0,fillStyle:forward_diagonal,fillImageUrl:null,strokeEnabled:1,strokeColor:#1890FF,strokeWidth:2,strokeOpacity:0,strokeStyle:solid,dashArray:null,labelEnabled:1,highlightEnabled:1,highlightFillColor:#FF7A45,highlightFillOpacity:0.5,highlightStrokeColor:#FF4D4F,highlightStrokeWidth:3,extrusionEnabled:0,extrusionHeight:0,extrusionHeightField:null,extrusionTopColor:null,extrusionSideColor:null,minZoom:3,maxZoom:20,sort:1,status:0,zindex:5}
