Openlayers4中图片填充的实现

最新推荐文章于 2024-08-12 16:15:50 发布

牛老师讲GIS

最新推荐文章于 2024-08-12 16:15:50 发布

阅读量3.5k

点赞数

分类专栏： GIS加油站文章标签： openlayers image fill

本文链接：https://blog.csdn.net/GISShiXiSheng/article/details/83018649

版权

GIS加油站专栏收录该内容

321 篇文章 245 订阅

订阅专栏

概述

本文讲述如何在Openlayers实现面状要素的图片填充。

实现后

面要素的图片填充

实现代码

var bounds = [73.4510046356223, 18.1632471876417,
    134.976797646506, 53.5319431522236];
var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'degrees'
});
$.get("data/province.geojson", null, function (result) {
    var features = (new ol.format.GeoJSON()).readFeatures(result);
    var vectorSource = new ol.source.Vector();
    vectorSource.addFeatures(features);
    var vector = new ol.layer.Vector({
        renderMode: "image", //image, vector
        source: vectorSource
    });
    var map = new ol.Map({
        controls: ol.control.defaults({
            attribution: false
        }),
        target: 'map',
        layers: [vector],
        view: new ol.View({
            projection: projection
        })
    });
    map.getView().fit(bounds, map.getSize());
 
    var cnv = document.createElement('canvas');
    var ctx = cnv.getContext('2d');
    var img = new Image();
    img.src = './css/fill.png';
    img.onload = function () {
        var pattern = ctx.createPattern(img, 'repeat');
        vector.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                lineDash: [5],
                width: 2
            }),
            fill: new ol.style.Fill({
                color: pattern
            })
        }));
    };
});

技术博客
CSDN：http://blog.csdn.NET/gisshixisheng
在线教程
https://edu.csdn.net/course/detail/799
https://edu.csdn.net/course/detail/7471
联系方式