OpenLayers

Gère maintenant la création de multiples layers

by lun471k

HTML

<script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.1.1/css/ol.css">
<div id="controls">
    <table>
        <tbody>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2" class="alignCenter"><span id="up">Haut</span>

                </td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><span>Gauche</span>

                </td>
                <td colspan="2">&nbsp;</td>
                <td><span id="droite">Droite</span>

                </td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td colspan="2" class="alignCenter"><span>Bas</span>

                </td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>
<div>Numéro de lot sélectionné:<span id="lotNumber"></span>

    <div id="layersCount">&nbsp;[GetLayersCount]</div>
</div>
<div id="imageMap">
    <!--<img id="map" src="http://new2.fjcdn.com/comments/Merry+christmas+_b6d65881b266f1ca1df28045e9ae56a5.jpg">-->
    <!-- <img id="map2" src="http://www.ccbinc.ca/wp-content/uploads/2013/06/CCB_PlanSite-VersantParc-Extended-02-016.png"> -->
    <div id="map3"></div>
</div>
<input type="hidden" id="selectedFeatureName" value="" />

CSS

.alignCenter {
    text-align:center;
}
#controls td span {
    font-family:arial, sans-serif;
    padding-left:5px;
    padding-right:5px;
    background-color:#CCC;
    width:100px;
}
#controls td:hover {
    cursor:pointer;
}
#map, #map2 {
    height:200px;
}

JavaScript

;
$(document).ready(function () {
    window.coordsArray = [];
    /*  
    $("#map").elevateZoom({scrollZoom : true, zoomType: "inner"});
    var map = L.map('map2', {
      maxZoom: 20,
      minZoom: 20,
      crs: L.CRS.Simple
    }).setView([0, 0], 20);

var southWest = map.unproject([0, 789], map.getMaxZoom());
var northEast = map.unproject([979, 0], map.getMaxZoom());
map.setMaxBounds(new L.LatLngBounds(southWest, northEast));*/
    /**
     * Define a namespace for the application.
     */
    window.app = {};
    var app = window.app;



    /**
     * @constructor
     * @extends {ol.interaction.Pointer}
     */
    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
        });

        /**
         * @type {ol.Pixel}
         * @private
         */
        this.coordinate_ = null;

        /**
         * @type {string|undefined}
         * @private
         */
        this.cursor_ = 'pointer';

        /**
         * @type {ol.Feature}
         * @private
         */
        this.feature_ = null;

        /**
         * @type {string|undefined}
         * @private
         */
        this.previousCursor_ = undefined;

    };
    ol.inherits(app.Drag, ol.interaction.Pointer);


    /**
     * @param {ol.MapBrowserEvent} evt Map browser event.
     * @return {boolean} `true` to start the drag sequence.
     */
    app.Drag.prototype.handleDownEvent = function (evt) {
        var map = evt.map;

        var feature = map.forEachFeatureAtPixel(evt.pixel,

        function (feature, layer) {
            return feature;
        });

        if (feature) {
            this.coordinate_ = evt.coordinate;
            this.feature_ = feature;
            console.clear();
           ...