openlayer 实现重复堆叠的圆圈填充色

最新推荐文章于 2024-08-15 18:19:19 发布

sisimi_43966973

最新推荐文章于 2024-08-15 18:19:19 发布

阅读量37

点赞数

分类专栏： vue+openlayer 文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_43966973/article/details/137110780

版权

vue+openlayer 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍如何利用OpenLayers库在地图上实现多个圆形的重复堆叠填充色效果，通过示例代码详细展示了具体步骤，适用于前端开发中地图展示需求。

摘要由CSDN通过智能技术生成

完整代码

 initMap() {
           let map = new Map({
               target: 'eguid-map',
               controls: control.defaults({attribution: false, zoom: true, rotate: true}),
               view: new View({
                   center: [119, 32],
                   maxZoom: 21,
                   zoom: 8,
                   minZoom: 7,
                   projection: 'EPSG:4326'
               })
           })
           // 添加高德地图图层
           const xyzLayer = new TileLayer({
               source: new XYZ({
                   url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?		lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
               }),
               zIndex: 1
           })
		return map    
       }
	/**
     * 创建图层
     */
    createLayer() {
        let vectorSource = new VectorSource({
            wrapX: false,
        });
        let vectorLayer = new VectorLayer({
            source: vectorSource,
            zIndex: 80,
            style: getFeatureStyle;

        return {
            vectorSource,
            vectorLayer,
        
        }
    }
 	/**
     *  添加图层
     * @param options
     */
    addLayer(map) {
        let vectorSource = new VectorSource({
            wrapX: false,
        });
        let vectorLayer = new VectorLayer({
            source: vectorSource,
            zIndex: 80,
            style: getFeatureStyle;
		})
        // 数据源
        this.vectorSource = vectorSource
        // 绘制图层
        this.vectorLayer = vectorLayer
        // 添加绘制图层==》地图
        map.addLayer(this.vectorLayer);
    }
	    
		/**
		 * 设置圆的样式
		 * @param feature
		 */
		getFeatureStyle(feature) {
		    const pixelRatio = DEVICE_PIXEL_RATIO;
		    const canvas = document.createElement('canvas');
		    const context = canvas.getContext('2d');
		   const pattern = (function () {
		      canvas.width = 8 * pixelRatio;
		      canvas.height = 8 * pixelRatio;
		      // white background
		      context.fillStyle = 'white';
		      context.fillRect(0, 0, canvas.width, canvas.height);
		      // outer circle
		      context.fillStyle = 'rgba(102, 0, 102, 0.5)';
		      context.beginPath();
		      context.arc(4 * pixelRatio, 4 * pixelRatio, 3 * pixelRatio, 0, 2 * Math.PI);
		      context.fill();
		      // inner circle
		      context.fillStyle = 'rgb(55, 0, 170)';
		      context.beginPath();
		      context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI);
		      context.fill();
		      return context.createPattern(canvas, 'repeat');
		    })();
		    console.log('---pattern', pattern)
		    // 创建一个圆形样式
		    const circleStyle = new Style({
		        fill: new Fill({
		            color: pattern
		        }),
		        stroke: new Stroke({
		            color: '#333',
		            width: 2,
		        }),
		    })
		
		    return circleStyle
		}
 		
 		function createCircleFeature () {
 			let feature = new Feature({
 				geometry: new Circle(fromLonLat([124, 56]), 1000)
 			})
 			this.vectorSource.addFeature(feature )
 		}
 		
	 var map = initMap()
	 map.addLayer()
	 createCircleFeature()