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

Bản đồ nền

eKMap Platform cung cấp các loại bản đồ nền dưới dạng Vector Tile và Raster Tile như:

  • Bản đồ eKMap (phát triển trên dữ liệu OpenStreetMap)
  • Bản đồ eKMap Chi tiết (CityMap)
  • Bản đồ eKMap hành chính (Bản đồ hành chính Việt Nam)
  • Bản đồ bất động sản

Bản đồ dạng Vector Tile

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

new ekmapplf. 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 OSM:Bright , OSM:Grey , OSM:Dark , OSM:Night , OSM:Pencil , OSM:Pirates , OSM:Wood , CTM:Bright , CTM:Grey , CTM:Dark , CTM:Night , CTM:Terrain , BDM:Basic, BDM2022:Basic , Realestate:Bright , hoặc Realestate:Bright_notpoint
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)MapBản đồ nền

Bản đồ eKMap hành chính

Phương thứcBản đồ BDM:BasicBản đồ BDM2022:Basic
setColor(options: object)Thiết lập giá trị màu mới cho đơn vị hành chính các cấp với tham số:
  • options.provinceIds là một mảng chứa danh sách mã danh mục hành chính cấp tỉnh
  • options.districtIds là một mảng chứa danh sách mã danh mục hành chính cấp huyện
  • options.communeIds là một mảng chứa danh sách mã danh mục hành chính cấp xã
  • options.color là mã màu đặt cho danh mục hành chính các cấp
      		• Thiết lập giá trị màu mới cho đơn vị hành chính các cấp với tham số:
    • options.id là một mảng danh sách mã đơn vị hành chính các cấp
    • options.color là mã màu đặt cho danh mục hành chính các cấp
        • setFilter(options: object)Thiết lập hiển thị màu sắc trình bày đơn vị hành chính các cấp với tham:
      • options.provinceId là mã danh mục hành chính cấp tỉnh
      • options.districtId là mã danh mục hành chính cấp huyện
      • options.communeId là mã danh mục hành chính cấp xã
      • options.visible nếu true thì chỉ trình bày danh mục hành chính đã chọn, ngược lại thì không trình bày danh mục hành chính đã chọn
          		• Thiết lập hiển thị màu sắc trình bày đơn vị hành chính các cấp với tham số:
        • options.id là một mảng danh sách mã đơn vị hành chính các cấp
        • options.visible nếu true thì chỉ trình bày danh mục hành chính đã chọn, ngược lại thì không trình bày danh mục hành chính đã chọn
            • clearColor()Thiết lập màu sắc trình bày danh mục hành chính các cấp trở về trạng thái ban đầu.Thiết lập màu sắc trình bày danh mục hành chính các cấp trở về trạng thái ban đầu.
            clearFilter()Thiết lập hiển thị danh mục hành chính các cấp trở về trạng thái ban đầu.Thiết lập hiển thị danh mục hành chính các cấp trở về trạng thái ban đầu.

            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>Base Map OSM 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 maplibregl.Map({
            container: 'divMapId',center: [105, 17],
            zoom: 4
            });
            var mapOSMBright = new ekmapplf.VectorBaseMap('OSM:Bright', apiKey).addTo(map);
            </script>
             
            </body>
             
            </html>

            Bản đồ dạng Raster Tile

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

            new ekmapplf. RasterBaseMap(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 OSM:Bright , OSM:Grey , OSM:Dark , OSM:Night , CTM:Bright , CTM:Grey , CTM:Dark , CTM:Night
            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)MapBả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>Base Map OSM Bright Raster Tile</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',center: [105, 17],
            zoom: 4
            });
            var mapOSMBright = new ekmapplf.RasterBaseMap('OSM:Bright', apiKey).addTo(map);
            </script>
             
            </body>
             
            </html>

            Ví dụ liên quan