Open layer记录（五）矢量样式编辑器

Open layer记录（五）矢量样式编辑器

1样式面板

2修改样式

面板修改包括填充样式、边界样式，自定义颜色面板（需要用到一个js插件）

3实现代码

3.1 html代码

<div id=\"aboutContainer\"><div id=\"aboutTitle\">矢量图层样式<span id=\"closeBtn\" onclick=\"hideAbout()\">X</span></div><div id=\"aboutContent\"><div class=\"style-box\" style=\"\"><ul><li><h5><input type=\"checkbox\" name=\"islabel\" id=\"islabel\">显示标注</h5></li><li><h5>填充颜色：</h5><input type=\"radio\" name=\"fillcolor\" value=\"#000000\">黑色<input type=\"radio\" name=\"fillcolor\" value=\"#0000ff\" checked=\"checked\">蓝色<input type=\"radio\" name=\"fillcolor\" value=\"#ff0000\">红色<input type=\"radio\" name=\"fillcolor\" value=\"\">自定义<input type=\"color\" id=\"fillcolor\" value=\"#0000ff\" style=\"display: none;\" /></li><li><h5>填充透明度：</h5><input type=\"number\" id=\"opacity\" value=\"0.3\" min=\"0\" max=\"1\" step=\"0.1\" style=\"width: 50%;\"></li><li><h5>线条颜色：</h5><input type=\"radio\" name=\"linecolor\" value=\"#000000\">黑色<input type=\"radio\" name=\"linecolor\" value=\"#0000ff\" checked=\"checked\">蓝色<input type=\"radio\" name=\"linecolor\" value=\"#ff0000\">红色<input type=\"radio\" name=\"linecolor\" value=\"\">自定义<input type=\"color\" id=\"linecolor\" value=\"#0000ff\" style=\"display: none;\" /></li><li><h5>线条类型：</h5><input type=\"radio\" name=\"linetype\" value=\"false\">实线<input type=\"radio\" name=\"linetype\" value=\"true\" checked=\"checked\">虚线</li><li><h5>线条宽度：</h5><input type=\"number\" name=\"linewidth\" value=\"2\" min=\"1\" max=\"5\" style=\"width:50%;\"></li></ul></div></div></div></div>

3.2 JavaScript代码

//线的颜色$(\"input[name=\'linecolor\']\").on(\"change\", function() {var _color = $(this).val();if (_color === \"\") {$(\"#linecolor\").show();} else {$(\"#linecolor\").attr(\"value\", _color).hide();}vectorJSON.setStyle(getStyle());vector_L.setStyle(getStyle());vectorJSON_sdxz.setStyle(getStyle());});//填充颜色$(\"input[name=\'fillcolor\']\").on(\"change\", function() {var _color = $(this).val();if (_color === \"\") {$(\"#fillcolor\").show();} else {$(\"#fillcolor\").attr(\"value\", _color).hide();}vectorJSON.setStyle(getStyle());vector_L.setStyle(getStyle());vectorJSON_sdxz.setStyle(getStyle());});//透明度，线的颜色，填充颜色，线条类型，线条宽度$(\"input[name=\'linetype\'], input[name=\'linewidth\'], #islabel\").on(\"change\", function() {vectorJSON.setStyle(getStyle());vector_L.setStyle(getStyle());vectorJSON_sdxz.setStyle(getStyle());});$(\"#opacity, #linecolor, #fillcolor\").on(\"input propertychange\", function() {vectorJSON.setStyle(getStyle());vector_L.setStyle(getStyle());vectorJSON_sdxz.setStyle(getStyle());});//控制样式生成function getStyle() {var opacityDef = $(\"#opacity\").val();var color = $(\"input[name=\'linecolor\']:checked\").val();if (color === \"\") {color = $(\"#linecolor\").val();}var fillColor = $(\"input[name=\'fillcolor\']:checked\").val();if (fillColor === \"\") {fillColor = $(\"#fillcolor\").val().colorRgb();fillColor = fillColor.substr(0, fillColor.length - 1);fillColor = fillColor + \",\" + opacityDef + \")\";} else {fillColor = fillColor.colorRgb();fillColor = fillColor.substr(0, fillColor.length - 1);fillColor = fillColor + \",\" + opacityDef + \")\";}//var _fillColor = \"RGBA(\" + fillColor[5]  + \",\" + fillColor[8] + \",\" + fillColor[9]+ \",\" + opacity + \")\";var dash = $(\"input[name=\'linetype\']:checked\").val();var width = parseInt($(\"input[name=\'linewidth\']\").val());var _dash = dash === \"true\" ? 3 * width : 0;var islabel = $(\"#islabel\")[0].checked;return function(feature, resolution) {var name = feature.get(\"name\");var lblcolor = \'#000000\';if (!islabel) lblcolor = \'rgba(0,0,0,0)\';return new ol.style.Style({stroke: new ol.style.Stroke({color: color,lineDash: [_dash, _dash],width: width}),fill: new ol.style.Fill({color: fillColor,opacity: opacityDef,}),image: new ol.style.Circle({radius: 7,fill: new ol.style.Fill({color: \'#ffcc33\'})}),text: new ol.style.Text({text: name,fill: new ol.style.Fill({color: lblcolor})})});}}

4 自定义颜色选择器

//十六进制颜色值域RGB格式颜色值之间的相互转换//-------------------------------------//十六进制颜色值的正则表达式var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;/*RGB颜色转换为16进制*/String.prototype.colorHex = function () {var that = this;if (/^(rgb|RGB)/.test(that)) {var aColor = that.replace(/(?:\\(|\\)|rgb|RGB)*/g, \"\").split(\",\");var strHex = \"#\";for (var i = 0; i < aColor.length; i++) {var hex = Number(aColor[i]).toString(16);if (hex === \"0\") {hex += hex;}strHex += hex;}if (strHex.length !== 7) {strHex = that;}return strHex;} else if (reg.test(that)) {var aNum = that.replace(/#/, \"\").split(\"\");if (aNum.length === 6) {return that;} else if (aNum.length === 3) {var numHex = \"#\";for (var i = 0; i < aNum.length; i += 1) {numHex += (aNum[i] + aNum[i]);}return numHex;}} else {return that;}};//-------------------------------------------------/*16进制颜色转为RGB格式*/String.prototype.colorRgb = function () {var sColor = this.toLowerCase();if (sColor && reg.test(sColor)) {if (sColor.length === 4) {var sColorNew = \"#\";for (var i = 1; i < 4; i += 1) {sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));}sColor = sColorNew;}//处理六位的颜色值var sColorChange = [];for (var i = 1; i < 7; i += 2) {sColorChange.push(parseInt(\"0x\" + sColor.slice(i, i + 2)));}return \"RGB(\" + sColorChange.join(\",\") + \")\";} else {return sColor;}};