OpenLayers là một công cụ JavaScript mạnh mẽ cho phép chúng tôi tạo và hiển thị tất cả các loại bản đồ trên một trang web. Bài viết này sẽ hướng dẫn bạn thêm một điểm và một tính năng chuỗi dòng, sau đó biến đổi các hình chiếu của chúng để sử dụng tọa độ, sau đó thêm một số màu bằng cách thiết lập kiểu của lớp.
Xin lưu ý rằng bạn cần cài đặt bản đồ OpenLayers đang hoạt động trong trang web để theo dõi bài viết này. Nếu bạn chưa có, hãy xem Cách tạo bản đồ bằng OpenLayers 3.
Các bước
Phần 1/3: Thêm tính năng chuỗi điểm và dòng
Bước 1. Tạo đối tượng điểm
Chỉ cần sao chép dòng mã sau vào
yếu tố:
var point_feature = new ol. Feature ({});
Bước 2. Thiết lập hình học của điểm
Để cho OpenLayers biết vị trí đặt điểm, bạn cần tạo một hình học và cung cấp cho nó một tập hợp tọa độ, là một mảng ở dạng [kinh độ (E-W), vĩ độ (N-S)]. Đoạn mã sau tạo ra điều này và đặt là hình học của điểm:
var point_geom = new ol.geom. Point ([20, 20]); point_feature.setGeometry (point_geom);
Bước 3. Tạo tính năng chuỗi dòng
Chuỗi dòng là những đoạn thẳng được chia thành các đoạn. Chúng tôi tạo chúng giống như các điểm, nhưng chúng tôi cung cấp một cặp tọa độ cho mỗi điểm của chuỗi dòng:
var linestring_feature = new ol. Feature ({Hình học: new ol.geom. LineString (
Bước 4. Thêm các tính năng vào một lớp vector
Để thêm các đối tượng địa lý vào bản đồ, bạn cần thêm chúng vào nguồn, nguồn mà bạn thêm vào lớp vectơ, sau đó bạn có thể thêm vào bản đồ:
var vector_layer = new ol.layer. Vector ({source: new ol.source. Vector ({features: [point_feature, linestring_feature]})}) map.addLayer (vector_layer);
Phần 2/3: Chuyển đổi Hình học của Đối tượng địa lý sang Sử dụng Tọa độ
Như với bất kỳ phần mềm lập bản đồ mạnh mẽ nào, bản đồ OpenLayers có thể có các lớp khác nhau với các cách hiển thị thông tin khác nhau. Bởi vì Trái đất là một quả địa cầu và không phẳng, khi chúng tôi cố gắng hiển thị nó trên bản đồ phẳng của mình, phần mềm phải điều chỉnh các vị trí để phù hợp với bản đồ phẳng. Những cách khác nhau này để hiển thị thông tin bản đồ được gọi là dự đoán. Để sử dụng một lớp vectơ và một lớp xếp cùng nhau trên cùng một bản đồ có nghĩa là chúng ta phải chuyển đổi các lớp từ hình chiếu này sang hình chiếu khác.
Bước 1. Đặt các đối tượng vào một mảng
Chúng tôi bắt đầu bằng cách đặt các tính năng chúng tôi muốn chuyển đổi cùng nhau thành một mảng mà chúng tôi có thể lặp đi lặp lại.
var features = [point_feature, linestring_feature];
Bước 2. Viết hàm biến đổi
Trong OpenLayers, chúng ta có thể sử dụng hàm biến đổi () trên đối tượng hình học của mỗi đối tượng địa lý. Đặt mã chuyển đổi này thành một hàm mà chúng ta có thể gọi sau:
hàm biến đổi_geometry (phần tử) {var current_projection = new ol.proj. Projection ({code: "EPSG: 4326"}); var new_projection = tile_layer.getSource (). getProjection (); element.getGeometry (). biến đổi (hiện_trình, chiếu_mới);); }
Bước 3. Gọi hàm biến đổi trên các đối tượng địa lý
Bây giờ chỉ cần lặp qua mảng.
features.forEach (biến_dấu);
Phần 3/3: Thiết lập Kiểu của Lớp Vector
Để thay đổi giao diện của từng đối tượng địa lý trên bản đồ, chúng tôi cần tạo và áp dụng một kiểu. Kiểu có thể thay đổi màu sắc, kích thước và các thuộc tính khác của điểm và đường, đồng thời chúng cũng có thể hiển thị hình ảnh cho từng điểm, rất tiện dụng cho các bản đồ tùy chỉnh. Phần này không cần thiết, nhưng nó rất vui và hữu ích.
Bước 1. Tạo phần tô và cột
Tạo đối tượng kiểu tô màu và màu đỏ nửa trong suốt và kiểu nét (đường kẻ) là đường liền nét màu đỏ:
var fill = new ol.style. Fill ({color: [180, 0, 0, 0.3]}); var stroke = new ol.style. Stroke ({color: [180, 0, 0, 1], width: 1});
Bước 2. Tạo kiểu và áp dụng nó vào layer
Đối tượng kiểu OpenLayers khá mạnh mẽ, nhưng bây giờ chúng ta chỉ thiết lập tô màu và nét vẽ:
var style = new ol.style. Style ({image: new ol.style. Circle ({fill: lấp đầy, nét: nét, bán kính: 8}), fill: lấp đầy, nét: nét}); vector_layer.setStyle (style);
