🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
设计页 最上面添加这个方法 如图: ![](https://img.kancloud.cn/f8/51/f851bc033429f999e215be4d556684cd_1029x561.png) ``` function getCaption(obj,state) { if(obj==undefined){ return } console.log(obj) var index=obj.lastIndexOf("\-"); if(state==0){ obj=obj.substring(0,index); }else { obj=obj.substring(index+1,obj.length); } return obj; } ``` ``` 搜索 case"point_lng_lat": 整个替换把 ``` 如图: ![](https://img.kancloud.cn/cc/43/cc435660c88dfb847520695d15ebb231_1124x716.png) ``` case "point_lng_lat": var earlyWarning = []; if (component.config.mapColorConfig != null && component.config.mapColorConfig[layer.id] != null && component.config.mapColorConfig[layer.id].length > 0) { for (var l in component.config.mapColorConfig[layer.id]) { var colorValues = component.config.mapColorConfig[layer.id][l]; earlyWarning.push({ min:getCaption(component.config[colorValues.valuesBind],0), max:getCaption(component.config[colorValues.valuesBind],1), color:component.config[colorValues.colorBind] }) } } console.log(earlyWarning) var fontName = null; if (layer.mapFontColumn != null && layer.mapFontColumn.name != null) fontName = layer.mapFontColumn.name; for (var i in data) { var lng = data[i][dimensions[dimensions.length - 2].name]; var lat = data[i][dimensions[dimensions.length - 1].name]; var fontValue = ""; if (fontName != null) fontValue = data[i][fontName]; var weight = 0; if (measures != null && measures.length > 0) { weight = data[i][measures[measures.length - 1].name]; } else { weight = 1; } var color = layer.mapFillColor; // if(weight>=1000&&weight<=2000){ // var color = '#ff8800' // } // if(weight>=2000&&weight<=3000){ // var color = 'rgba(73, 237, 117, 1)' // } for(var j = 0;j<earlyWarning.length;j++){ if(weight>=earlyWarning[j].min&&weight<=earlyWarning[j].max){ color = earlyWarning[j].color } } if (!VSUtils.isEmpty(lng) && !VSUtils.isEmpty(lat)) { geojson.features.push({ type: "Feature", properties: { weight: weight, name: fontValue, ethnicity:color }, geometry: { type: "Point", coordinates: [lng, lat] } }); } } break; ``` 搜索 case"point": 再搜索里面的 默认 替换整个 如下图 ![](https://img.kancloud.cn/3c/cb/3ccbc0f4364e38debd3473a3836b85f4_1026x733.png) ``` case "default": console.log(geojson) console.log(sourceId) console.log(layerId) if (map.getLayer(layerId) == undefined) { map.addSource(sourceId, { 'type': 'geojson', 'data': geojson }); map.addLayer({ 'id': layerId, 'source': sourceId, 'type': 'circle', 'paint': { 'circle-radius': parseInt(layer.mapRadius), 'circle-color': ["get", 'ethnicity'] } }); } else { map.getSource(sourceId).setData(geojson); map.setPaintProperty(layerId, 'circle-color', ["get", 'ethnicity']); map.setPaintProperty(layerId, 'circle-radius', parseInt(layer.mapRadius)); } break; ``` 添加 配置面板 搜索case"default": 如图 添加下面代码 ![](https://img.kancloud.cn/17/a9/17a937914755a8a2ec131214e5b4a064_1198x855.png) ``` var linearColor = "linearColor"; var buildColorValueItem = function() { var groupIndex = component.config.groupIndex; var item = { index: groupIndex, valuesBind: "map_linear_values_" + groupIndex, colorBind: "map_linear_color_" + groupIndex } if (component.config.mapColorConfig == null) component.config.mapColorConfig = {}; if (component.config.mapColorConfig[component.config.currentedLayerId] == null) component.config.mapColorConfig[component.config.currentedLayerId] = []; component.config.mapColorConfig[component.config.currentedLayerId].push(item); component.config.groupIndex++; return item; }; var buildColorValueConfig = function(temp) { var itemConfig = { title: vsLang.value, type: linearColor, disabled: false, item: temp, bind: { values: temp.valuesBind, color: temp.colorBind }, remove: function(item) { var index = layerConfig.elements.indexOf(item); layerConfig.elements.splice(index, 1); if (component.config.mapColorConfig != null && component.config.mapColorConfig[component.config.currentedLayerId] != null) { var indexItem = component.config.mapColorConfig[component.config.currentedLayerId].indexOf(item.item); component.config.mapColorConfig[component.config.currentedLayerId].splice(indexItem, 1); } } }; var indexEnd = layerConfig.elements.indexOf(linearColorConfigEnd); layerConfig.elements.splice(indexEnd, 0, itemConfig); }; layerConfig.elements.push( { title: '增加值域', type: "button", btnClass: "btn-primary", onClick: function(item) { var temp = buildColorValueItem(); buildColorValueConfig(temp); } }); layerConfig.elements.push(linearColorConfigEnd); if (component.config.mapColorConfig != null && component.config.mapColorConfig[component.config.currentedLayerId] != null) { for (var c in component.config.mapColorConfig[component.config.currentedLayerId]) { buildColorValueConfig(component.config.mapColorConfig[component.config.currentedLayerId][c]); } } ``` 分享页 最上面 添加 下面的方法 如图 ![](https://img.kancloud.cn/3f/63/3f63fb94626310b3abde8a3137b0fc66_803x534.png) ``` function getCaption(obj,state) { if(obj==undefined){ return } console.log(obj) var index=obj.lastIndexOf("\-"); if(state==0){ obj=obj.substring(0,index); }else { obj=obj.substring(index+1,obj.length); } return obj; } ``` 搜索 case "default": 替换下面整个代码 如图 ![](https://img.kancloud.cn/c7/68/c76844499be9bb77009f4d6ad6353a20_1143x630.png) ``` case "default": if (map.getLayer(layerId) == undefined) { map.addSource(sourceId, { 'type': 'geojson', 'data': geojson }); map.addLayer({ 'id': layerId, 'source': sourceId, 'type': 'circle', 'paint': { 'circle-radius': parseInt(layer.mapRadius), 'circle-color': ["get", 'ethnicity'] } }); } else { map.getSource(sourceId).setData(geojson); map.setPaintProperty(layerId, 'circle-color', ["get", 'ethnicity']); map.setPaintProperty(layerId, 'circle-radius', parseInt(layer.mapRadius)); } break; ``` 最后的效果: ![](https://img.kancloud.cn/f2/18/f2189c3f09a53e190ab4e22c7f6c38f8_1881x867.png)