Openlayers4中图片填充的实现

概述

本文讲述如何在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
            })
        }));
    };
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

Selenium2+python自动化45-18种定位方法(find_elements)

前言 江湖传言,武林中流传八种定位,其中xpath是宝刀屠龙,css是倚天剑。 除了这八种,其实还有十种定位方法,眼看就快失传了,今天小编让失传已久的定位方法重...

36770
来自专栏我就是马云飞

我奶奶都能懂的UI绘制流程(下)!

前言 上回咱们说到ViewRootImpl.performTraversals()这个方法,从这里开始,会进入真正的View的绘制流程。第一次看的同学先去隔壁我...

194100
来自专栏非典型技术宅

iOS动画系列之九:实现点赞的动画及播放起伏指示器(OC+Swift)1. CAReplicatorLayer2. CAEmitterLayer3. CAGradientLayer

17220
来自专栏电光石火

红方块躲避—天才游戏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> ...

25160
来自专栏落花落雨不落叶

【被玩坏的博客园】之canvas装饰博客园侧边栏

16520
来自专栏跟着阿笨一起玩NET

C#图片处理示例(裁剪,缩放,清晰度,水印)

原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/

22710
来自专栏Android知识点总结

D1-从N角星开始论述自定义控件

7620
来自专栏我就是马云飞

View的绘制流程之MeasureSpec

目的 我在一个多月之前就说我准备开始梳理基础的事,好吧,我承认这一个月没我怎么梳理。或者梳理的不多,当我梳理到view的时候,发现需要分成绘制流程以及事件分发进...

21090
来自专栏一“技”之长

Java开发GUI之可编辑区域 原

    Java的awt包中提供了单行的文本编辑组件TextField与多行的文本编辑区TextArea,这两个组件都是继承自TextComponent类。

9020
来自专栏Nian糕的私人厨房

Canvas 让你的屏幕下一场 Hacker 流星雨吧

今天来分享一个很狂拽酷炫吊炸天的特效,其装逼效果不亚于上面那张入侵五角大楼导弹制导系统的概念图(手动滑稽),实现起来很简单,跟着动手一起来吧

9720

扫码关注云+社区

领取腾讯云代金券