openlayer学習まとめ

最高の学習素材(http://openlayers.org/en/latest/examples/)

学習の主なポイントMap(View,Layer(Feature(ol.geom.Point))

地図の主な存在はレイヤーLayerで、このLayerはある作成されたMapに依存して、レイヤーの中に様々な点線面が展示されています.これらの点線面については、ものを使って彼らを装飾することができます.点線も面も通称要素Featureと呼ばれています.この要素に対しては、Layerに動的に追加して削除することができます.

Viewは主に制御フォーマット、座標のフォーマット、拡大縮小、地図の中心などであり、Mapに設置されているのは対応するol.Mapの中でviewを設定する方法を確認し、ol.Viewの中で様々な重要なものを確認することができます.apiや事例を見るとデモはいいものです.

Mapの作成

   var map = new ol.Map({
        //  div
        // target: "mapView",
        target: this.mapDiv,
        //    
        renderer: 'canvas',
        //  ，      
        controls: ol.control.defaults({
            attribution: false
        }),
        view: new ol.View({
          zoom: 6
        }),
        //layers: [roads, imagery]
        //layers            ，          
        //    Map   
    });

Layerを作成
Layerにはいくつかのタイプのtile(瓦片地図)、Image(画像)、Vector(線などを描くために必要なレイヤー)Layerのリソースがあります.Layerの中のリソースはレイヤーの情報です.画像、または私達が追加した点線面などのデータImageレイヤー(静止画については)

 var baseLayer= new ol.layer.Image({
        source:new ol.source.ImageStatic({
            url:"test.jpg"
        })
    })

Vector:ここのスタイルは、レイヤー全体に追加された要素を設定するスタイルです.また、要素の中にスタイルを追加することもできます.このスタイルは三つのスタイルがあります.representing the view’s rereolution.The function shound return a ol.style.Style.Style or an array of the m.This way e.g.a vector layer can be style.)は、配列のスタイルまたは関数を追加するときに判断ロジックによって理を行うことができます.ここのsource:私たちが接触している一番多い部分です.ベクトルレイヤーに要素を追加する時はgetSourceを必要として、要素を追加しています.

 var areaLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style:new ol.style.Style({
                  image: new ol.style.Circle({
                        radius: 7,
                        fill: new ol.style.Fill({
                          color: '#ffcc33'
                        })
                      })
                   }),
        zIndex:1
     });

Layer追加要素
追加要素は一般にol.geom.Point/ol.geom.LineStering()などであり、これらの要素を修飾してスタイルを追加することができます.要素は一般にol.Featureと呼ばれていますが、FeatureではMapのような属性で、あなたが保持するIDなどのインタラクティブに必要な情報を設定できます.Featureをクリックすると、関連するデータ情報が得られます.var jobId=feat chure.get(「jobId」);このような類似レイヤーに追加して要素のスタイルを単独で設定することもできますが、以前にレイヤースタイルを設定した場合はfunction形式で現在追加されている要素featureの形式を受け入れることができます.属性に応じて特別に描画します.

    var  point = new ol.geom.Point([x,y]);
    var feature = new ol.Feature({
        geometry :point,
        jobId :"     "
    });
    this.areaLayer.getSource().addFeature(feature);

線を引いて(点のデータを一つ一つ追加して、具体的な他の案はapiを参考にしてもいいです.例えばwktやgjsonなど、使ったことがありません.)、レイヤーに追加したらいいです.

    var lineString = new ol.geom.LineString();
    for(var i=0;i < param.length;i++){
        var point = [param[i].x,param[i].y];
        lineString.appendCoordinate(point);
    }
    var feature = new ol.Feature({
        geometry : lineString
    })

イベント
イベントの傍受は全部Mapの上に置いてあります.監督を通じて処理するかどうかを判断したり、カスタマイズして配布したりできます.傍受クリックまたはレンダリングイベント(いつでもいます.中でタイマーのすることができます.)
(カスタムイベント)http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/

map.on('click', function(evt) {
        var pixel = evt.pixel;
        var coordinate = map.getCoordinateFromPixel(pixel); //         
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
                return feature;
            }) 
            //           ，              ，      ，    
        if (feature && feature instanceof ol.Feature) {
            //        ，     ，         
            //            ,        
             document.dispatchEvent(new MapClick('map-click',feature));

        }

    });

map.on("map-click",function(events){
    //         ，    
})

//    Map     ,   Map           
var MapClick = function(type,param){
    ol.events.Event.call(this,type);
    this.param = param;
}
ol.inherits(MapClick, ol.events.Event);

ドラッグ要素
公式の例がよくて直接使えます.放した瞬間に自分の事件を処理すればいいです.
以下は業務を処理する時に使うものです.

/**
 * descrption:   openLayer  
 * authohr: wangji
 * date: 2017-07-24 20:00
 */
var radius = 0;
var MapConfig = function (opt) {
    ol.Object.call(this);
    this.setting = opt.setting||false;
    this.mapDiv = opt.mapDiv || undefined;
    this.imagePath =opt.imagePath || undefined;
    this.extent = [-0.5, -1156.5, 1636.5, 0.5];
    this.zoom = opt.zoom || 2
    this.maxZoom  = opt.maxZoom ||17;
    this.situation = opt.situation ||0;
}
ol.inherits(MapConfig, ol.Object);
MapConfig.prototype.initMap = function () {
    if(!this.imagePath){
        return;
    }
    if(!this.mapDiv){
        return;
    }
    var __that = this;
    this.projection =new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: __that.extent
    });
    this.map = new ol.Map({
        target: this.mapDiv,
        render: 'canvas',
        view: new ol.View({
            projection: __that.projection,
            center: ol.extent.getCenter(__that.extent),
            zoom: this.zoom,
            maxZoom: this.maxZoom
        })
    });

   var baseLayer= new ol.layer.Image({//    
        source:new ol.source.ImageStatic({
            url:__that.imagePath,
            projection: __that.projection,
            imageExtent: __that.extent
        })
    })
    this.baseLayer=baseLayer;

    this.map.addLayer(baseLayer);
    if(__that.situation ==0){//        
        __that.map.addInteraction(new app.Drag());
    }
    function createStyle(src,orgname) {
        return new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 0.5],
                crossOrigin: 'anonymous',
                anchorOrigin:'bottom-right',
                src: src,
            })),
            text: new ol.style.Text({
                font:"14px serif",
                text:orgname,
                offsetX:0,
                offsetY:30,
                stroke: new ol.style.Stroke({color: 'black', width: 1})
            }),
            stroke: new ol.style.Stroke({
                width: 3,
                color: [255, 0, 0, 1]
            }),
            fill: new ol.style.Fill({
                color: [0, 0, 255, 0.6]
            })
        });
    }

    this.ruuningJobFeature = [];//           

    var areaLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style:function (feathure) {
            var orgName = feathure.get("orgName");
            if(__that.situation == 1){

                var globalStatus = feathure.get("globalStatus");
                if(globalStatus == 1){
                    __that.ruuningJobFeature.push(feathure);
                    return createStyle("test.jpg",orgName);//    

                }else if(globalStatus == 2){
                    return createStyle("test1.jpg",orgName);
                }else{
                    return createStyle("test2.jpg",orgName);
                }
            }

        },
        zIndex:1
    });//  layer


    this.areaLayer =areaLayer;
    this.map.addLayer(areaLayer);
    this.map.on('click',__that.mapListener,__that);
    /**
     *       
     * 1.                  
     * 2.         postcompose      
     * 3.         Style
     * 4.                
     */
    this.map.on('postcompose', function () {
        if (__that.ruuningJobFeature.length > 0) {
            radius++;
            radius = radius % 100;
            var style;
            for (var i = 0; i < __that.ruuningJobFeature.length; i++) {
                var orgName = __that.ruuningJobFeature[i].get("orgName");
                if (radius < 60) {
                    src = "test.jpg";
                    style = createStyle(src,orgName)
                } else {

                    style = new ol.style.Style({
                        text: new ol.style.Text({
                            font:"14px serif",
                            text:orgName,
                            offsetX:0,
                            offsetY:30,
                            stroke: new ol.style.Stroke({color: 'black', width: 1})
                        }),
                        stroke: new ol.style.Stroke({
                            width: 3,
                            color: [255, 0, 0, 1]
                        }),
                        fill: new ol.style.Fill({
                            color: [0, 0, 255, 0.6]
                        })
                    });
                }
                __that.ruuningJobFeature[i].setStyle(style);
            }
        }
    })
}
MapConfig.prototype.mapListener = function(evt){
    var __that = this;
    var pixel = evt.pixel;
    var coordinate = __that.map.getCoordinateFromPixel(pixel);
    var feature = __that.map.forEachFeatureAtPixel(pixel,function(feature){//      feathure
        return feature;
    })
    if(feature && feature instanceof ol.Feature){
        __that.dispatchEvent(new MapClick('map-click',feature));

    }
}

MapConfig.prototype.addFeature = function (feature) {
   if(feature && feature  instanceof ol.Feature){
       this.areaLayer.getSource().addFeature(feature);
   }
}
MapConfig.prototype.removeFeature = function (feature) {
    if(feature && feature  instanceof ol.Feature ){
        this.areaLayer.getSource().removeFeature(feature);
    }
}

MapConfig.prototype.getPointFeatureFromXY = function (param) {
   // debugger
    var  point = new ol.geom.Point([param.xCoord,param.yCoord]);
    var feature = new ol.Feature({
        geometry :point,
        orgName:param.orgName,//      
        globalStatus:param.globalStatus
    });
    this.areaLayer.getSource().addFeature(feature);
}

/**
 * @desction:    
 * @author: wangji
 * @date: 2017/7/25
 * @param:
 * @return:
 */
MapConfig.prototype.generateLine = function(param){
    if(param == null || param.length <=0  ){
        return;
    }
    var lineString = new ol.geom.LineString();
    for(var i=0;i< param.length;i++){
        var point = [param[i].x,param[i].y];
        lineString.appendCoordinate(point);
    }
    var feature = new ol.Feature({
        geometry : lineString
    })
    var lineLayer = new ol.layer.Vector({
        source : new ol.source.Vector(),
        style : function (feature) {
            var geometry = feature.getGeometry();
            var styles = [
                // linestring
                new ol.style.Style({
                    stroke: new ol.style.Stroke({
                        color: '#49B4FF',
                        width: 2
                    })
                })
            ];
            return styles;
        }
    })
    lineLayer.getSource().addFeature(feature);
    this.map.addLayer(lineLayer);
}
//       
MapConfig.prototype.changeBaseLayerImage = function (ImpagePath) {
    if(ImpagePath == undefined ||ImpagePath == ''){
        return;
    }
    var __that =this;
    var baseLayer= new ol.layer.Image({//    
        source:new ol.source.ImageStatic({
            url:path+ImpagePath,
            projection: __that.projection,
            imageExtent: __that.extent
        })
    })
    __that.map.removeLayer( __that.baseLayer);
    __that.baseLayer = baseLayer;
    __that.map.addLayer(baseLayer);

}

var MapClick = function(type,param){
    ol.events.Event.call(this,type);
    this.param = param;
}
ol.inherits(MapClick, ol.events.Event);


var  app ={};//       ，    
app.Drag = function() {
    ol.interaction.Pointer.call(this, {
        handleDownEvent: app.Drag.prototype.handleDownEvent,
        handleDragEvent: app.Drag.prototype.handleDragEvent,
        handleMoveEvent: app.Drag.prototype.handleMoveEvent,
        handleUpEvent: app.Drag.prototype.handleUpEvent
    });
    //  
    this.coordinate_ = null;
    //  
    this.cursor_ = 'pointer';
    //  
    this.feature_ = null;
    this.previousCursor_ = undefined;
};
ol.inherits(app.Drag, ol.interaction.Pointer);

/**
 *         ，         ，     true    
 */
app.Drag.prototype.handleDownEvent = function(evt) {
    var map = evt.map;

    var feature = map.forEachFeatureAtPixel(evt.pixel,
        function(feature) {
            return feature;
        });
     //              
    if (feature && feature  instanceof ol.Feature) {
        this.coordinate_ = evt.coordinate;
        this.feature_ = feature;
    }
    return !!feature;
};


/**
 *        ，    
 */
app.Drag.prototype.handleDragEvent = function(evt) {
    var deltaX = evt.coordinate[0] - this.coordinate_[0];
    var deltaY = evt.coordinate[1] - this.coordinate_[1];
    var geometry = (this.feature_.getGeometry());
    geometry.translate(deltaX, deltaY);
    this.coordinate_[0] = evt.coordinate[0];
    this.coordinate_[1] = evt.coordinate[1];
};
/**
 *         ，    
 */
app.Drag.prototype.handleMoveEvent = function(evt) {
    if (this.cursor_) {
        var map = evt.map;
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
                return feature;
            });
        var element = evt.map.getTargetElement();
        if (feature) {
            if (element.style.cursor != this.cursor_) {
                this.previousCursor_ = element.style.cursor;
                element.style.cursor = this.cursor_;
            }
        } else if (this.previousCursor_ !== undefined) {
            element.style.cursor = this.previousCursor_;
            this.previousCursor_ = undefined;
        }
    }
};

app.Drag.prototype.handleUpEvent = function() {
    //     ，             
    var objectId = this.feature_.get("orgId");
    var coordinate = this.coordinate_;
    //      ajax    

    this.coordinate_ = null;
    this.feature_ = null;
    return false;
};