美文网首页
3.style(vectorLayer的style, featu

3.style(vectorLayer的style, featu

作者: xueyueshuai | 来源:发表于2023-07-26 00:09 被阅读0次
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',
      //   })
      // }))

相关文章

网友评论

      本文标题:3.style(vectorLayer的style, featu

      本文链接:https://www.haomeiwen.com/subject/uiahpdtx.html