• openlayers中的自定制工具栏,包含画点、线、面


    先是在projectquantan-master这个项目中有一个EditingPanel这个工具条,也挺好的,功能挺全的,但是有一点就是只有画多边形的一个按钮,没有point和path俩个的,所以就想自己去加一个。

    然后就发现统一的drawfeature的样式(olControlDrawFeatureItemInactive),没有分为point、path和polygon的,然后就去源代码中找控制这个样式点代码去修改他,但是始终没有找到,只能作罢。

    又去网上搜索找到了openlayers自带的一个control(new OpenLayers.Control.EditingToolbar(vector_layer),这个上面有四个按钮,point、path、polygon和pan,还好,正打算用它和之前的editingpanel一起做一个东西呢, 

    发现了这个  var controls = [

                new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {'displayClass': 'olControlDrawFeaturePolygon'}),

                new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {'displayClass': 'olControlDrawFeaturePath'}),

                new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {'displayClass': 'olControlDrawFeaturePoint'})

            ];就是后面的class可以自己加,

    就尝试着在EditingPanel中加一个同样的,没想到就成功了。真是踏破铁鞋无觅处啊。最后代码:

     1  1 /**
     2  2  * Provide a custom editing panel for editing a vec layer.
     3  3  * Not meant to be general purpose.
     4  4  */
     5  5 var EditingPanel = OpenLayers.Class(OpenLayers.Control.Panel, {
     6  6 
     7  7     initialize: function(layer) {
     8  8 
     9  9         OpenLayers.Control.Panel.prototype.initialize.apply(this, [{}]);
    10 10 
    11 11         var navigate = new OpenLayers.Control.Navigation({
    12 12             title: "Pan Map"
    13 13         });
    14 14 
    15 15 
    16 16         var drawFeaturePoint = new OpenLayers.Control.DrawFeature(
    17 17             layer, OpenLayers.Handler.Point, {
    18 18                 title: "画点",
    19 19                 handlerOptions: {multi: true},
    20 20                 displayClass: 'olControlDrawFeaturePoint'
    21 21             }
    22 22         );
    23 23 
    24 24         var drawFeaturePath= new OpenLayers.Control.DrawFeature(
    25 25             layer, OpenLayers.Handler.Path, {
    26 26                 title: "画线",
    27 27                 handlerOptions: {multi: true},
    28 28                 displayClass: 'olControlDrawFeaturePath'
    29 29             }
    30 30         );
    31 31         var drawFeaturePolygon = new OpenLayers.Control.DrawFeature(
    32 32             layer, OpenLayers.Handler.Polygon, {
    33 33                 title: "画多边形",
    34 34                 handlerOptions: {multi: true},
    35 35                 displayClass: 'olControlDrawFeaturePolygon'
    36 36             }
    37 37         );
    38 38         
    39 39         var edit = new OpenLayers.Control.ModifyFeature(layer, {
    40 40             title: "修改要素"
    41 41         });
    42 42         
    43 43         var del = new DeleteFeature(layer, {title: "删除要素"});
    44 44         
    45 45         var save = new OpenLayers.Control.Button({
    46 46             title: "保存更改",
    47 47             trigger: function() {
    48 48                 if(edit.feature) {
    49 49                     edit.selectControl.unselectAll();
    50 50                 }
    51 51                 // fails if no save strategy
    52 52                 var strat = OpenLayers.Array.filter(
    53 53                     layer.strategies, 
    54 54                     function(s) {
    55 55                         return s instanceof OpenLayers.Strategy.Save;
    56 56                     }
    57 57                 )[0];
    58 58                 strat.save();
    59 59             },
    60 60             displayClass: "olControlSaveFeatures"
    61 61         });
    62 62         
    63 63         this.defaultControl = navigate;
    64 64         //this.addControls([save, del, edit,drawFeaturePoint,drawFeaturePath,drawFeaturePolygon, navigate]);
    65 65         this.addControls([navigate,drawFeaturePoint,drawFeaturePath,drawFeaturePolygon, edit, del,save]);
    66 66 
    67 67     },
    68 68     
    69 69     CLASS_NAME: "EditingPanel"    
    70 70 });

     

    上面一个简略的问题解决的流程,只要有耐心问题自会得到解决的。千万不要自己放弃,打心底里相信问题能够得到解决。

    要相信只要去坚持,问题总会解决,当然坚持不是盲目的坚持,不断的寻找解决问题的方法,问题总能在不经意间得到完美的解决。只是有时候过程有点慢吧,不过刚开始没经验嘛,慢一点多积累经验都一样,后来会越来越快的,只能说你对事物的认知在慢慢的加深,问题就会慢慢得到来解决。

     

  • 相关阅读:
    前端开发:如何正确地跨端?
    开源微服务运行时 Dapr 发布 1.0 版本
    Flink 如何实时分析 Iceberg 数据湖的 CDC 数据
    为了让你在“口袋奇兵”聊遍全球,Serverless 做了什么?
    Serverless 如何在阿里巴巴实现规模化落地?
    altas(ajax)控件(十三):悬浮菜单HoverMenu
    MasterPage嵌套及MasterPage中的控件和变量的访问
    Linux下将CD音乐提取为mp3的方法和中文乱码问题的解决
    altas(ajax)控件(十四):为下拉控件添加快捷键查找功能的ListSearchExtender
    在atlas(ajax)中请不要使用Response.Write,请使用ClientScript.RegisterClientScriptBlock替换
  • 原文地址:https://www.cnblogs.com/nidaye/p/4567413.html
Copyright © 2020-2023  润新知