美文网首页写一个简易的GIS系统
2.绘制点图,并增加样式

2.绘制点图,并增加样式

作者: Yinawake | 来源:发表于2019-07-23 15:42 被阅读26次
tx2.gif

主要完成内容

  1. 添加绘制层,并添加样式
  2. 添加Point draw(交互),完成绘制。
  1. 在map初始化之后,调用addDrawLayer(),将绘制层添加到map上,并对绘制层添加样式。
/**
 * 添加绘制层
 */
var _vectorSource;
function addDrawLayer(){
    _vectorSource = new ol.source.Vector({
        projection: 'EPSG:4326'          
    });
    
    var drawLayer = new ol.layer.Vector({
        id: "draw",     
        source: _vectorSource,
        style: drawLayerStyle,
    });
    
    map.addLayer(drawLayer);
}

/**
 * 添加绘制层的样式
 * @param {Object} p_feature
 */
function drawLayerStyle(p_feature){
    var styles = new ol.style.Style({    
        image: new ol.style.Icon({
            src: '../meta/gt/02020071.svg',
            size: [32,32],
        }),
        text: new ol.style.Text({
            text: "11"
        })
    });
        
    return styles;
}

  1. 在绘制层上添加Point Draw。
    在点击对应图元之后出发 offlineDrawEqument
/**
 * 离线绘制设备
 * @param {String} p_type 绘制的图元类型
 */
var draw;
function offlineDrawEqument(p_type){
    draw = new ol.interaction.Draw({
        source: _vectorSource,
        type: "Point" 
    });
    
    map.addInteraction(draw);
}

相关文章

  • 2.绘制点图,并增加样式

    主要完成内容 添加绘制层,并添加样式 添加Point draw(交互),完成绘制。 在map初始化之后,调用add...

  • 项目-任务清单

    1.构建清单html结构并绘制样式;2.为任务清单增加"添加、删除"功能。 总结 任务清单的核心在于能够删除任务和...

  • Circos圈图(安装与使用windows和Linux)

    安装 使用 CIRCOS增加热图、点图、线图和区块属性 CIRCOS圈图绘制 – 最简单绘图和解释 Circos的...

  • Quartz2D 绘图

    画线 连接处样式 顶角样式 画扇型 重绘 下载的进度条制作 画饼图 绘制文字 绘制图片 绘制雪花 图形上下文栈 平...

  • HTML5(七)canvas绘制圆弧、饼状图、文本

    一.绘制圆弧 1.样式 2.原理:截取圆弧中的对应角度的一部分 二.扇形 三.饼状图 四.绘制文本 1.文本控制

  • Fig1-b 绘制环形图和饼图并拼接在一起 2021-01-03

    1. 绘制环形图: 安装需要的包: 数据准备与作图: 绘制环形图: 得到: 2. 绘制饼图: 数据准备: 绘制柱状...

  • css-文本模糊效果

    给指定的dom增加样式: 效果图:

  • 2019-10-30 梁宁解读

    听过,知道,理解,能讲 不要相信速读,没有速读这个事情。 1.抓取信息 2.扩充资料 3.选择样式 4.绘制脑图 ...

  • Context绘制直线和折线

    绘制简单的直线js代码 html代码 效果图: 给直线设置不同的截断样式js代码 html代码 效果图 绘制具有不...

  • 绘制贴图造型文字

    这个图是在ai中绘制好样式之后在ps中贴图制作而成的。先在ai中绘制好courage的样式 之后来到ps打开这个字...

网友评论

    本文标题:2.绘制点图,并增加样式

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