Maps Javascript APIs
eKMap PlatformMaps Javascript APIsJavascript APIControls

Controls

Bạn có thể dễ dàng sử dụng các dịch vụ eKMap Platform API cung cấp (như dịch vụ bản đồ nền, Geocoding, ...) để tương tác trên bản đồ thông qua các Controls mà eKMap Platform Javascript cung cấp.

Geocoder

Công cụ cho phép sử dụng các dịch vụ eKMap Platform Geocoding API như: tự động đề xuất địa điểm, địa chỉ phù hợp khi người dùng nhập điều kiện tìm kiếm, mã hóa địa lý cho phép chuyển đổi linh hoạt địa chỉ, lý trình đường bộ sang tọa độ địa lý.
Sử dụng thư viện ekmap-platform-geocoder sẽ giúp bạn dễ dàng thêm công cụ Geocoder vào bản đồ.

new ekmapplf.control.Geocoder(options: Object);

Parameters

 options(Object)

Thuộc tínhKiểuMô tả
apiKeystringKey này sẽ được đưa vào trong tất cả các yêu cầu của dịch vụ.
zoomnumber
default: 16		Mức zoom trong khoảng (0-24). Trong kết quả tìm kiếm mức zoom được sử dụng khi 'bbox' không tìm thấy trong kết quả. Nếu bbox tồn tại trong kết quả thì bản đồ sẽ đặt vùng giới hạn theo 'bbox'.
flyToObject
default: flyOptions		Nếu false, di chuyển đến một vị trí được chọn trong kết quả sẽ bị vô hiệu hóa. Nếu true, di chuyển đến một vị trí trong bản đồ được kích hoạt như mặc định.
placeholderstring
default: Tìm kiếm		Ghi đè lên giá trị mặc định của thuộc tính placeholder.
collapsedboolean
default: false		Nếu true, control geocoder sẽ được thu gọn cho đến khi đi qua hoặc được chọn.
clearAndBlurOnEscboolean
default: false		Nếu true, control geocoder sẽ xóa đi nội dung của nó và làm mờ đi khi ấn 'escape'.
minLengthnumber
default: 2		Số ký tự tối thiểu cần nhập trước khi hiển thị kết quả.
limitnumber
default: 10		Giới hạn số kết quả được tìm kiếm hiển thị trả về.
markerboolean
default: true		Nếu true, một Marker sẽ được thêm vào bản đồ tại vị trí của người dùng chọn vào kết quả trả về với tham số của Marker là mặc định. Nếu giá trị là một đối tượng , Marker sẽ sử dụng đối tượng này cho tham số hàm khởi tạo. Nếu false, không có marker nào sẽ được thêm vào bản đồ.

Methods

Phương thứcGiá trị trả vềMô tả
addTo(container: String hoặc HTMLElement hoặc Map)Hàm thêm geocoder vào một vùng chứa. Vùng chứa có thể là một maplibregl.Map, một HTMLElement hoặc một CSS selector

Events

Tên sự kiệnGiá trị trả vềMô tả
selectedJSONĐược gọi khi chọn một địa điểm trong danh sách địa điểm gợi ý

Example

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css"  rel='stylesheet' />
<title>Control Geocoder</title>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
</style>
</head>
 
<body>
<div style="width: 100%;">
<div id="divMapId" class="map"></div>
</div>
<script>
var apiKey = 'YOUR_API_KEY' // "Nhập khóa API eKMap Platform của bạn"
var map = new maplibregl.Map({
container: 'divMapId', // container id
center: [105, 17], // starting position
zoom: 4 // starting zoom
});
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', apiKey).addTo(map);
// Add the control to the map.
var geocoder = new ekmapplf.control.GeoCoder({
apiKey: apiKey
})
map.addControl(geocoder, "top-left");
geocoder.on('selected', function(res){
//your code
})
</script>
</body>
 
</html>

Công cụ bản đồ nền

Cung cấp công cụ bản đồ nền cho phép bạn lựa chọn thay đổi nhiều loại bản đồ nền trên một ứng dụng bản đồ.

new ekmapplf.control.BaseMap(options: Object)

Parameters

 options(Object)

Thuộc tínhKiểuMô tả
baseLayersArrayMột danh sách các đối tượng bản đồ nền. Một đối tượng bản đồ nền được mô tả bởi id là mã bản đồ nền, title là tiêu đề của bản đồ nền và thumbnail là đường dẫn hình ảnh đại diện bản đồ nền

Events

Tên sự kiệnGiá trị trả vềMô tả
changeBaseLayerJSONĐược gọi khi thay đổi bản đồ nền

Example

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css" rel='stylesheet' />
<title>Control Basemap</title>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
</style>
</head>
 
<body>
<div style="width: 100%;">
<div id="divMapId" class="map"></div>
</div>
<script>
var apiKey = 'YOUR_API_KEY' // "Nhập khóa API eKMap Platform của bạn"
var map = new maplibregl.Map({
container: 'divMapId', // container id
center: [105, 17], // starting position
zoom: 4 // starting zoom
});
var mapOSMNight = new ekmapplf.VectorBaseMap('OSM:Night', apiKey);
mapOSMNight.addTo(map);
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', apiKey);
mapOSMBright.addTo(map);
var basemap = new ekmapplf.control.BaseMap({
baseLayers: [{
id: "OSMBright",
title: 'OSM sáng',
thumbnail: "/assets/image/osmplus.png"
}, {
id: "OSMNight",
title: 'OSM tối',
thumbnail: "/assets/image/osmplus.png"
}]
});
map.addControl(basemap, 'bottom-left');
basemap.on('changeBaseLayer', function(response){
if(response.layer == "OSMBright") mapOSMBright.addTo(map);
else mapOSMNight.addTo(map);
})
</script>
</body>
 
</html>

Công cụ đo đạc

Cung cấp công cụ giúp bạn tích hợp các tiện ích đo đạc trên ứng dụng bản đồ

new ekmapplf.control.Measure(options: Object)

Parameters

 options(Object)

Thuộc tínhKiểuMô tả
unitsString
default: meters		Đơn vị của kết quả đo đạc được trả về. Giá trị của đơn vị là kilometers hoặc meters

Events

Tên sự kiệnGiá trị trả vềMô tả
startDrawObjectĐược gọi khi click vào công cụ đo chiều dài hoặc đo diện tích
endMeasureObjectĐược gọi khi đo đạc bản đồ kết thúc
deleteĐược gọi khi click vào công cụ xóa

Example

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css"  rel='stylesheet' />
<title>Control Measure</title>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
.displayMeasure {
background-color: #fff;
right: 120px;
top: 20px;
position: absolute;
z-index: 3;
user-select: none;
box-shadow: 0 2px 4px rgb(0 0 0 / 20%), 0 -1px 0px rgb(0 0 0 / 2%) !important;
padding: 0.5rem 0;
}
.labelMeasure {
float: left;
padding-left: 15px;
font-size: 17px;
padding-top: 6px;
}
.contentMeasure{
display: inline-block;
padding:6px 5px 0px 10px;
font-size: 15px;
}
</style>
</head>
 
<body>
<div style="width: 100%;">
<div id="divMapId" class="map"></div>
</div>
<div id="measure-display" class="displayMeasure">
<div class="labelMeasure">Kết quả đo: </div>
<div class="contentMeasure">
<span id="contentMeasure" style="font-weight:700;"></span>
</div>
</div>
<script>
var apiKey = 'YOUR_API_KEY' // "Nhập khóa API eKMap Platform của bạn"
var map = new maplibregl.Map({
container: 'divMapId', // container id
center: [105, 17], // starting position
zoom: 4 // starting zoom
});
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', apiKey).addTo(map);
var measure = new ekmapplf.control.Measure();
map.addControl(measure, "top-right");
measure.on('endMeasure', function (res) {
if(res.typeMeasure == "Length"){
document.getElementById('contentMeasure').innerHTML = res.length.toFixed(2) + " " + res.unit;
}else{
document.getElementById('contentMeasure').innerHTML = res.area.toFixed(2) + " " + res.unit + "<sup>2</sup>";
}
})
</script>
</body>
 
</html>

Công cụ chỉ đường

Công cụ cho phép sử dụng các dịch vụ eKMap Platform API như: tự động đề xuất địa điểm, địa chỉ phù hợp khi người dùng nhập điều kiện tìm kiếm, mã hóa địa lý cho phép chuyển đổi linh hoạt địa chỉ, lý trình đường bộ sang tọa độ địa lý, dịch vụ chỉ đường từ hai điểm đã nhập vào.
Sử dụng thư viện ekmap-platform-directions sẽ giúp bạn dễ dàng thêm công cụ Directions vào bản đồ.

new ekmapplf.control.Directions(options: Object)

Parameters

 options(Object)

Thuộc tínhKiểuMô tả
apiKeyStringKey này sẽ được đưa vào trong tất cả các yêu cầu của dịch vụ.
zoomNumber
default: 16		Nếu vùng bao không tồn tại trong kết quả geocoder thì mức zoom sẽ được sử dụng trong flyTo
interactiveBoolean
default: true		Bật/Tắt tính năng tương tác với chuột từ plugin
alternativesBoolean
default: false		Có được bật lựa chọn thay thế hay không.
unitString
default: metric		Hệ thống đo lường được sử dụng trong hướng dẫn điều hướng. Tùy chọn: metric hoặc imperial
controls.inputsBoolean
default: true		Ẩn hoặc hiển thị công cụ nhập địa điểm
controls.instructionsBoolean
default: true		Ẩn hoặc hiển thị công cụ hướng dẫn đường đi
controls.profileSwitcherBoolean
default: true		Ẩn hoặc hiển thị công cụ chọn loại phương tiện
placeholderOriginStringNếu được đặt đoạn text sẽ được thêm vào thuộc tính placeholder cho phần tử input điểm bắt đầu
placeholderDestinationStringNếu được đặt đoạn text sẽ được thêm vào thuộc tính placeholder cho phần tử input điểm kết thúc

Example

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform.min.css"  rel='stylesheet' />
<script src="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform-directions.js"></script>
<link href="https://files.ekgis.vn/sdks/v2.0.0/ekmap-platform-directions.css"  rel='stylesheet' />
<title>Control Direction</title>
<style>
.map {
width: 100%;
height: calc(100vh - 15px);
}
body {
overflow: hidden;
}
</style>
</head>
 
<body>
<div style="width: 100%;">
<div id="divMapId" class="map"></div>
</div>
<script>
var apiKey = 'YOUR_API_KEY' // "Nhập khóa API eKMap Platform của bạn"
var map = new maplibregl.Map({
container: 'divMapId', // container id
center: [105, 17], // starting position
zoom: 4 // starting zoom
});
var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', apiKey).addTo(map);
var direction = new ekmapplf.control.Directions({
apiKey: apiKey
})
map.addControl(direction, 'top-left');
</script>
</body>
 
</html>