Immagini Pan e Zoom per JQuery Mobile

Question

Apprezzerei qualsiasi aiuto riguardante Pan e Zoom per un'app Web mobile jQuery.Ho un'immagine di un piano edificio con una mappa dell'immagine in cima che vorrei che l'utente possa essere in grado di visualizzare dal suo telefono cellulare, ingrandire e uscire e panizzare l'area di interesse in vista.

Answer 1

L'ho capito, ha ottenuto tutto ciò di cui avevo bisogno dagli esempi Openlayers

<script type="text/javascript">
        var map;

        function init(){
            map = new OpenLayers.Map('map');
            var options = {numZoomLevels: 3}
            var floorplan = new OpenLayers.Layer.Image(
            'Floorplan Map',
            '../../temp_photos/sample-floor-plan.jpg',
            new OpenLayers.Bounds(-180, -90, 180, 90),
        new OpenLayers.Size(275, 190),
            options
        );
            map.addLayer(floorplan);
            //Create a Format object
            var vector_format = new OpenLayers.Format.GeoJSON({}); 

            //Create a Protocol object using the format object just created
            var vector_protocol = new OpenLayers.Protocol.HTTP({
                url: '../../controller?action=GET_FLOOR_FEATURES',               
                format: vector_format
            });

            //Create an array of strategy objects
            var vector_strategies = [new OpenLayers.Strategy.Fixed()];

            //Create a vector layer that contains a Format, Protocol, and Strategy class
            var vector_layer = new OpenLayers.Layer.Vector('More Advanced Vector Layer',{
                protocol: vector_protocol,
                strategies: vector_strategies 
            });

            map.addLayer(vector_layer);
               //Create and add selectFeature control
            var select_feature_control = new OpenLayers.Control.SelectFeature(
            vector_layer, 
            {
                multiple: false,
                toggle: true,
                toggleKey: 'ctrlKey',
                multipleKey: 'shiftKey' 
            }
        );
            map.addControl(select_feature_control); 

            //Activate the control
            select_feature_control.activate();

            //Finally, let's add some events so we can do stuff when the user 
            //  interacts with the features
            function selected_feature(event){
                //clear out the log's contents
                document.getElementById('map_feature_log').innerHTML = '';

                //Show the current selected feature (passed in from the event object)
                var display_text = 'Clicked on: ' 
                    + '<strong>' + event.feature.attributes.location + '</strong>'
                    + ': ' + event.feature.attributes.description + '<hr />';
                document.getElementById('map_feature_log').innerHTML = display_text;

                //Show all the selected features
                document.getElementById('map_feature_log').innerHTML += 'All selected features: ';

                //Now, loop through the selected feature array 
                for(var i=0; i<vector_layer.selectedFeatures.length; i++){
                    document.getElementById('map_feature_log').innerHTML += 
                        vector_layer.selectedFeatures[i].attributes.location + ' | ';
                }
            }
            function unselected_feature(event){
                var display_text = event.feature.attributes.location + ' unselected!' + '<hr />';
                document.getElementById('map_feature_log').innerHTML = display_text;

                //Show all the selected features
                document.getElementById('map_feature_log').innerHTML += 'All selected features: ';

                //Now, loop through the selected feature array 
                for(var i=0; i<vector_layer.selectedFeatures.length; i++){
                    document.getElementById('map_feature_log').innerHTML += 
                        vector_layer.selectedFeatures[i].attributes.location + ' | ';
                }
            }

            //Register the event
            vector_layer.events.register('featureselected', this, selected_feature);
            vector_layer.events.register('featureunselected', this, unselected_feature);

           if(!map.getCenter()){
                 map.setCenter(new OpenLayers.LonLat(0, 0),1);
            }
        }
    </script>

.

Markup: Esempio di livello immagine

    <p id="shortdesc">
        This is a floor plan for the first floor of the Science Building
    </p>

    <div id="map" class="smallmap"></div>

    <div id="docs"><div id='map_feature_log'></div>
        <p class="caption">
            This test shows how to display an image of a floorplan as a 
            base layer and then draw vectors on top of that, on a new layerage
        </p>
        <p>
            When vector is added popup appears with that vector's information
        </p>
    </div>
</body>

.

ottengo le mie funzionalità dal server:

package actions;

import control_layer.Action;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

.

/ ** * * @author Christina. * / Classe pubblica GetFloorFeatures implementa Azione {

private static final int MAX_INACTIVE_INTERVAL = 900; // 15 minutes
private String view;

@Override
public boolean execute(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
    HttpSession session = req.getSession(true);
    System.out.println("------------ In GetFloorFeatures");
    session.setMaxInactiveInterval(MAX_INACTIVE_INTERVAL);

    view = "pages/maps/displayFloorFeatures.jsp";
    return true;
}

@Override
public String getView() {
    return view;
}

@Override
public Object getModel() {
    return null;
}

.

}

I dati sono hardcoded nel file JSP ma alla fine verrà generato da una query del database:

<%@page contentType="application/json" pageEncoding="UTF-8"%>
<% response.setContentType("application/json");
//harcoded now, later will call database query to retrieve features for this floor
String floorFeatureVectors = "{\"type\": \"FeatureCollection\",\"features\":     [{\"type\":\"Feature\", \"id\":\"OpenLayers.Feature.Vector_84\",        \"properties\":{\"location\": \"Telecom Lab\",\"description\": \"Stand back, I'm going to try science!\"}, \"geometry\":{\"type\":\"Polygon\", \"coordinates\":[[[9, -52.342105263158], [9.4736842105263, -79.815789473684], [40.263157894737, -78.868421052632], [43.105263157895, -78.394736842105], [44.526315789474, -51.394736842105], [9, -52.342105263158]]]}, \"crs\":{\"type\":\"OGC\", \"properties\":{\"urn\":\"urn:ogc:def:crs:OGC:1.3:CRS84\"}}},"
    +   "{\"type\":\"Feature\", \"id\":\"OpenLayers.Feature.Vector_85\", \"properties\":{\"location\": \"MUSIC lab\",\"description\": \"Laboratory of Distributed Multimedia Information Systems and Applications \"}, \"geometry\":{\"type\":\"Polygon\", \"coordinates\":[[[-113.21052631579, 4.9736842105263], [-113.68421052632, -11.605263157895], [-76.263157894737, -13.026315789474], [-76.263157894737, -1.1842105263158], [-93.315789473684, -0.71052631578947], [-93.789473684211, 4.0263157894737], [-113.21052631579, 4.9736842105263]]]}, \"crs\":{\"type\":\"OGC\", \"properties\":{\"urn\":\"urn:ogc:def:crs:OGC:1.3:CRS84\"}}},"
    +   "{\"type\":\"Feature\", \"id\":\"OpenLayers.Feature.Vector_86\", \"properties\":{\"location\": \"Main Entrance Science Building\",\"description\": \"Caffeteria \"}, \"geometry\":{\"type\":\"Point\", \"coordinates\":[-8.0526315789474, 36.710526315789]}, \"crs\":{\"type\":\"OGC\", \"properties\":{\"urn\":\"urn:ogc:def:crs:OGC:1.3:CRS84\"}}}"

    + "]}";%><%=floorFeatureVectors%>

.

Answer 2

Questo dovrebbe fare il trucco. http://www.photoswipe.com/

Answer 3

Ho risolto il mio problema con gli openlayers, immagine ora Pans e zooms http://dev.openlayers.org/releases/openlayers-2.11/examples/image-layer.html

Devi capire come combinarlo con ImageMapster ora .. (http://www.outsharked.com/imagemapster/)

Answer 4

Ho lavorato sullo stesso problema in cui è necessario mostrare la mappa del pavimento di un ufficio di scrivanie in diversi colori in base allo stato della scrivania (vuoto, assegnato, seduto a caldo e ecc.).

Aggiungendo a questo se l'utente fa clic su scrivania, i dettagli di associati / dipendenti assegnati devono essere visualizzati.

I requisiti di cui sopra erano stati implementati utilizzando il plug-in di Image Mapster JQuery.

E anche lo zoom e il panning devono essere forniti. Per lo zoom e il panning ho trovato il plug-in GZoom che meglio si adatta alle mie esigenze.Ma non funziona come previsto se usato con l'immagine Plug-in Mapster.

Apprezzo il tuo aiuto per quanto riguarda questo.