jquery-mobile - jQuery Mobile の画像のパンとズーム

Question

jquery モバイル Web アプリのパンとズームに関するヘルプをいただければ幸いです。ユーザーが携帯電話から表示したり、ズームインおよびズームアウトしたり、関心のある領域をパンして表示したりできるようにしたい、イメージマップが上にある建物のフロアプランのイメージがあります。

Answer 1

OpenLayersの問題を解決しました。画像がパンおよびズームされるようになりましたhttp://dev.openlayers.org/releases/OpenLayers-2.11/examples/image-layer.html

今すぐimagemapsterと組み合わせる方法を理解する必要があります。（http://www.outsharked.com/imagemapster/）

Answer 2

私は、オフィスのデスクのフロア マップをデスクのステータス (空、割り当て済み、ホット シートなど) に基づいて異なる色で表示する必要があるという同じ問題に取り組んできました。

これに加えて、ユーザーがデスクをクリックすると、割り当てられたアソシエイト/従業員の詳細が表示されます。

上記の要件は、イメージ マップスター jquery プラグインを使用して実装されていました。

また、ズームとパンも提供する必要があります。ズームとパンのために、私の要件に最適な gzoom プラグインを見つけました。しかし、イメージ マップスター プラグインを使用すると、期待どおりに動作しません。

これについてご協力いただきありがとうございます。

Answer 3

これでうまくいくはずです。http://www.photoswipe.com/

Answer 4

私はそれを理解し、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>

マークアップ: 画像レイヤーの例

    <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>

サーバーから機能を取得します。

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 */ public class GetFloorFeatures implements Action {

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;
}

}

データは jsp ファイルにハードコーディングされていますが、最終的にはデータベース クエリによって生成されます。

<%@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%>