import Style from "ol/style/Style";
import {Circle} from "ol/style";
import Fill from "ol/style/Fill";
import Stroke from "ol/style/Stroke";
import Icon from 'ol/style/Icon';
import {getSettingValue} from "@/config/settingUserSelf";
import store from '@/store'
import Text from "ol/style/Text";
import router from "@/router";
import config, {getConfigValueOfStartConfig} from "@/config";
export const getEnStrByMapType = (mapType) => {
let str = ''
if (mapType === '蓝色') str = 'blue'
if (mapType === '矢量') str = 'vector'
if (mapType === '影像') str = 'img'
if (mapType === '地形') str = 'terrain'
return str
}
const getMyVectorLayerStyle = (layerCode = '', other = {}) => {
// 处理特殊的
if (layerCode.includes('flag')) {
let text = new Text({
font: getSettingValue('map.flagStyleFontSize') + 'px sans-serif', // 设置字体
maxAngle: 30,
offsetY: 20,
text: other.baseName, // 文字描述
fill: new Fill({
color: getSettingValue('map.flagStyleFontColor'),
}),
// backgroundFill: new Fill({
// color: 'rgba(255,0,0,0.7)'
// }),
stroke: new Stroke({
color: getSettingValue('map.flagStyleFontShadowColor'),
width: getSettingValue('map.flagStyleFontShadowWidth') * 1,
}),
})
let img = 'img/red-flag.png'
return new Style({
// 设置图标
image: new Icon({
src: img,
anchor: [0.5, 0.5],
// scale: 1,
width: 20
}),
// 设置图片下面显示字体的样式和内容
// text: text,
})
}
// 获取 远程图层数据
let layerList = getConfigValueOfStartConfig('layerList')
// 当前为哪个图层
let findLayer = layerList.find(v => layerCode + '' === v['layer_code'] + '')
let data = {}
if (findLayer) {
if (layerCode === '底图-地图-省份') {
if (['/index/index/page1', '/index/index/page2'].includes(router.currentRoute.path)) {
findLayer['fill_color'] = getSettingValue('map.provinceSelectColor')
}
}
data = findLayer;
}
let type = data['layer_type'] // 点|线|面
// 使用远程配色方案
let fillColor = data['fill_color'] || '#00000055'
let borderColor = data['border_color'] || '#fff'
let borderWidth = data['border_width'] * 1 || 1
let pointRadius = data['point_radius'] * 1 || 4
if (type === '点') {
if (fillColor.includes('http')) {
return [
new Style({
image: new Icon({
src: fillColor,
width: pointRadius || borderColor * 1 || borderWidth * 1
}),
})
]
} else {
return new Style({
image: new Circle({
radius: pointRadius * 1, // 4
fill: new Fill({
color: fillColor,
}),
stroke: new Stroke({
//边界样式
color: borderColor,
width: borderWidth * 1, // 1
}),
}),
})
}
}
if (type === '线') {
return new Style({
stroke: new Stroke({
color: fillColor,
width: borderWidth,
})
})
}
if (type === '面') {
if ([getConfigValueOfStartConfig('oldBaseLayerCode'), getConfigValueOfStartConfig('newBaseLayerCode')].includes(layerCode)) {
return function (feature) {
let fillColor = data['fill_color'] || '#00000055'
let borderColor = data['border_color'] || '#fff'
let borderWidth = data['border_width'] * 1 || 1
return new Style({
fill: new Fill({
color: fillColor,
}),
stroke: new Stroke({
color: borderColor,
width: borderWidth,
}),
text: new Text({
overflow: true,
font: getSettingValue('map.flagStyleFontSize') + 'px sans-serif', // 设置字体
maxAngle: 30,
offsetY: 20,
text: feature.get(config.featureKeyBaseName) || feature.getId(), // 文字描述
fill: new Fill({
color: getSettingValue('map.flagStyleFontColor'),
}),
stroke: new Stroke({
color: getSettingValue('map.flagStyleFontShadowColor'),
width: getSettingValue('map.flagStyleFontShadowWidth') * 1,
}),
})
})
}
}
return [
new Style({
fill: new Fill({
color: fillColor,
}),
stroke: new Stroke({
color: borderColor,
width: borderWidth,
}),
}),
]
}
return new Style(null)
}
export default getMyVectorLayerStyle
// someVectorLayer.setStyle(new Style({
// fill:new Fill({
// color:'red',
// })
// }))
网友评论