OpenLayers.js có sử dụng tệp nào?

Question

Khi tôi đỏ từ tệp readme, openlayers.js có nhiều lựa chọn để bao gồm tệp và chủ đề.

Điều tôi muốn là sử dụng các tệp lightest solution of openlayers.js.

tôi bao gồm các openlayers.light.js trong ứng dụng của tôi, và nó tạo ra bản đồ nhưng không hiển thị chúng, kiểm tra này:

làm tôi quên bao gồm một số tập tin khác?

cấu trúc cơ cấu của tôi là thế này:

/vendor 
    /js 
    openlayers.light.js 
    /img 
    /theme 

làm thế nào để hiển thị bản đồ lớp?

Ngoài ra, openlayers.light.js sẽ hoạt động trên thiết bị di động (khi đã khắc phục sự cố này: P)? hoặc tôi cũng sẽ cần phải bao gồm openlayers.mobile.js?

Đây là mã không làm việc với openlayers.light.js nhưng làm việc với openlayers.js (740kb):

var _element = "#map"; 
var map = new OpenLayers.Map (_element, { 
    controls: [ 
    new OpenLayers.Control.Navigation({ 
     dragPanOptions: { 
     enableKinetic: true 
     } 
    }), 
    new OpenLayers.Control.Zoom() 
    ], 
    projection: new OpenLayers.Projection("EPSG:900913"), 
    displayProjection: new OpenLayers.Projection("EPSG:4326") 
    }); 

    var lonLat = new OpenLayers.LonLat(_lon, _lat).transform (
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984 
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection 
// map.getProjectionObject() doesn't work for unknown reason 
); 
    var markers = new OpenLayers.Layer.Markers("Markers"); 
    map.addLayer(markers); 

    var size = new OpenLayers.Size(21,25); 
    var offset = new OpenLayers.Pixel(-(size.w/2), -size.h); 
    var icon = new OpenLayers.Icon(_img_map_marker, size, offset); 
    markers.addMarker(new OpenLayers.Marker(lonLat, icon.clone())); 

    var mapnik = new OpenLayers.Layer.OSM("Test"); 
    map.addLayer(mapnik); 

    map.setCenter (lonLat,3); 

PS: Phương pháp init đồ openlayers tôi js là ok, nó hoạt động bằng cách sử dụng khổng lồ openlayers.js (740KB), nhưng không phải làm việc với openlayers.light.js như tôi trình bày ở trên

html

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

css

img{max-width:none;} 
#map{ 
width:300px; 
height:300px; 
} 

Answer 1

nếu bạn muốn sử dụng thuộc tính di động với openlayers như panning hoặc phóng to bằng tay, bạn phải sử dụng openlayers.mobile.js.

bạn có thể sử dụng openlayers.light.js bằng thiết bị di động chứ không phải chức năng di động.

tôi nghĩ rằng cấu trúc của bạn nên là:

myProject 
    /js 
     openlayers.light.js 
    /img 
    /theme 

và tôi đã cố gắng openlayers.light.js trong http://jsfiddle.net/aragon/ZecJj/ và không có vấn đề với nó.

Mã của tôi:

var map = new OpenLayers.Map({ 
    div: "map", 
    minResolution: "auto", 
    maxResolution: "auto", 
}); 

var osm = new OpenLayers.Layer.OSM(); 
var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857']; 
var center = toMercator({x:-0.05,y:51.5}); 
map.addLayers([osm]); 


map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13); 

và cố gắng đọc Deploying (Shipping OpenLayers in your Application).

OpenLayers đi kèm với ví dụ cấu hình sẵn ra khỏi hộp: chỉ cần tải một thông cáo của OpenLayers, và bạn sẽ có được một bộ đầy đủ các dễ dàng để ví dụ sử dụng. Tuy nhiên, những ví dụ này được thiết kế để sử dụng cho việc phát triển . Khi bạn đã sẵn sàng triển khai ứng dụng của mình, bạn muốn có một phân phối OpenLayers được tối ưu hóa cao, để hạn chế băng thông và thời gian tải.

bạn có thể thay đổi tệp src bằng liên kết này và có thể thấy nó vẫn hoạt động.

<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.light.debug.js"></script> 

để

<script type="text/javascript" src="https://view.softwareborsen.dk/Softwareborsen/Vis%20Stedet/trunk/lib/OpenLayers/2.12/OpenLayers.light.js?content-type=text%2Fplain"></script> 

tôi hy vọng nó sẽ giúp bạn ...