openlayers6 踩坑系列（一）

最近在用openlayers开发自己公司的地图，会不定时的更新一些踩坑点和解决方法上来喔~

画矢量图的时候，最多遇到这问题，然后你点进去看，好像是关于样式的问题，然后在代码里，我们发现我们用style的地方就是这里

const vector = new VectorLayer({
        //数据源
        source: source,
        //样式
        style: new Style({
            //样式填充
            fill: new Fill({
                //填充颜色
                color: options.fillColor || 'rgba(37,241,239,0.2)'
            }),
            //笔触
            stroke: new Stroke({
                //笔触颜色
                color: options.strokeColor || '#264df6',
                //笔触宽度
                width: options.strokeWidth || 2,
                // 线帽样式 butt、round、 或square
                lineCap: options.lineCap || 'round',
                // 	线连接样式 bevel、round、 或miter
                lineJoin: options.lineJoin || 'round'
            }),
            //图形样式，主要适用于点样式
            image: new Circle({
                //半径大小
                radius: options.imageRadius || 7,
                //填充
                fill: new Fill({
                    //填充颜色
                    color: options.imageFill || '#e81818'
                })
            })
        })
    })

 我们在很多openlayers的博客里，那些大佬们都是在Style这个类的image属性值，用new Circle来实例化 笔尖  ，但是在后续解决中，我们发现这里要用 CircleStyle 来实例化笔尖 才不会出错，

所以这里应该

 

import { Circle as CircleStyle } from 'ol/style'

这样的话，报错就解决啦