美文网首页写一个简易的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.绘制点图,并增加样式

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