Maps Javascript APIs
Map PlatformMaps Javascript APIsJavascript APIBản đồ nền

Bản đồ nền

HueMap Platform cung cấp bản đồ nền dưới dạng Vector Tile như:

  • Bản đồ eKMap (phát triển trên dữ liệu OpenStreetMap)
  • Bản đồ eKMap hành chính (bản đồ eKMap hành chính Việt Nam)
  • Bản đồ tỉnh/thành phố (Province)
  • Bản đồ Quy hoạch xây dựng (Construction)
  • Bản đồ thửa đất trình bày theo loại đất (Parcel Class)
  • Bản đồ thửa đất trình bày theo ranh giới (Parcel Boundary)
  • Bản đồ quy hoạch sử dụng đất (LUM)

Hướng dẫn này sẽ chỉ cho bạn cách thêm bản đồ đơn giản vào trang web. Bản đồ được thêm dưới dạng Vector Tile

new huemapplf.VectorBaseMap(basemapType: String, apiKey: String)

Parameters:

Thuộc tínhKiểuMô tả
basemapTypestringĐề cập đến sơ đồ cơ sở cụ thể mà bạn muốn thêm. Sử dụng một trong các bản đồ được cung cấp sau Basic:Bright, Basic:Gray, Basic:Dark, Basic:Night, Basic:Wood, Basic:Pirates, Basic:Pencil, Province:Bright, Province:Gray, Province:Dark, Province:Night, Construction:Bright, BDM:Bright, Parcel:Class, Parcel:Boundary hoặc LUM:Bright
apiKeystringKey này sẽ được đưa vào trong tất cả các yêu cầu của dịch vụ

Methods

Phương thứcGiá trị trả vềMô tả
addTo(map: Map)MapThêm bản đồ nền vào bản đồ

Example:

<!DOCTYPE html>
<html lang="en">
 
<head>
<meta charset="utf-8" />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.13.0/mapbox-gl.css' rel='stylesheet' />
<script src="https://mapplatform.tthue.vn/sdks/huemap-platform-v1.0.0.min.js"></script>
<link href="https://mapplatform.tthue.vn/sdks/huemap-platform-v1.0.0.min.css" rel="stylesheet" />
<title>Base Map Province Bright VectorTile</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 mapboxgl.Map({
container: 'divMapId',center: [107.5402, 16.4386],
zoom: 10.68
});
var mapProvinceBright = new huemapplf.VectorBaseMap('Province:Bright', apiKey).addTo(map);
</script>
</body>
 
</html>

Ví dụ liên quan