openlayers4 入门开发系列之地图标绘篇（附源码下载）

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。

openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：

• geoserver 安装部署步骤
• geoserver 发布地图服务 WMS
• geoserver 发布地图服务 WMTS
• geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

1.基于 openlayers4 实现地图标绘
2.源代码 demo 下载

本篇的重点内容是利用 openlayers4 实现地图标绘功能，效果图如下：

image

实现思路

• 标绘界面设计以及标绘面板控制

       
自由线
       
折线
       
弧线
       
曲线
       
手绘
       
多边形
       
矩形
       
圆形
       
直角
       
简单
       
燕尾
       
集结地

//标绘例
var plotFlag = false;
$("#bPlot").click(function () {
            if(!plotFlag){
                $("#map_toolbar_plot").show();
                plotFlag = true;
            }else{
                bmap.setCurrentMutexInteraction(null);
                if(bmap.dataClear){
                    bmap.dataClear.clear();
                }
                $("#map_toolbar_plot").hide();
                plotFlag = false;            
            }            
});

• 标绘初始化以及核心代码实现

//标绘
var plottypes = ["freehandline","polyline","arc","curve","freehandpolygon","polygon",
        "rectangle","circle","assaultdirection","squadcombat","tailedsquadcombat","gatheringplace"];
for(var i = 0; i < plottypes.length; i++){
        var selector = '#map_toolbar_plot li[plottype="' + plottypes[i] + '"]';
        $(selector).on('click',function(){
            var id = "10006";//标绘工具
            var tool = bmap.getIndexInteraction(id);
            bmap.setCurrentMutexInteraction(tool);
            //标绘类型
            var plottype = $(this).attr("plottype");
            tool.setDrawType(plottype);
        })
}

/**
 *  获取带有索引的交互工具
 * @param index {String}
 * @returns {ol.interaction.Interaction|null}
 */
bxmap.Map.prototype.getIndexInteraction = function(index){
    var indexInteractions = this.get("bxmap_index_interactions") || {};
    var interaction = indexInteractions[index];
    if(interaction == null && this.getMap()){
        var arr = this.getMap().getInteractions().getArray();
        for(var i = 0; i < arr.length ; i++){
            if(index == arr[i].get(bxmap.INDEX_INTERACTION_ID)){
                interaction = arr[i];
                indexInteractions[index] = interaction;
                break;
            }
        }
    }
    return interaction;
}

更多的详情见：GIS之家小专栏
文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家作品：GIS之家
GIS之家源码咨询：咨询模式