Bản đồ là một tài sản vô cùng hữu ích đối với bất kỳ doanh nghiệp nào, bất kể ngành nào. Cho dù bạn đang tìm kiếm một vị trí mới cho doanh nghiệp của mình hay chỉ muốn hiểu thêm về vị trí hiện tại của mình, bản đồ là một nguồn tài nguyên tất yếu có thể giúp bạn. Trên toàn cầu, có rất nhiều dịch vụ bản đồ web trực tuyến giá trị gia tăng.

How2Geeks Blazor Maps hỗ trợ kế thừa các dịch vụ bản đồ web trực tuyến thông qua các API của chúng với các tùy chỉnh, chẳng hạn như lớp con trên các lớp thực tế, đường điều hướng, chú thích, hoạt ảnh và một vài thứ khác. Các dịch vụ bản đồ hàng đầu sau đây có sẵn để xem trước cũng như tương tác trong Blazor Maps:

Trong blog này, chúng ta sẽ xem cách trực quan hóa các bản đồ trực tuyến này với sự trợ giúp của thành phần How2Geeks Blazor Maps của chúng tôi, cùng với các ví dụ mã!

OpenStreetMap (OSM)

OpenStreetMap (OSM) là một nguồn miễn phí hiển thị bản đồ thế giới. Nó được tạo ra bởi một cộng đồng những người lập bản đồ. Bản đồ OSM tạo điều kiện hợp tác xem dữ liệu địa lý. Dựa trên yêu cầu của bạn, nó tạo ra các hình ảnh ô nhỏ và kết hợp chúng thành một hình ảnh duy nhất để hiển thị khu vực bản đồ trong bất kỳ thành phần nào.

Sử dụng ví dụ mã sau để tích hợp dịch vụ bản đồ trực tuyến OpenStreetMap với thành phần How2Geeks Blazor Maps.

@page "/"
@using How2Geeks.Blazor.Maps

<SfMaps Height="450" Width="720">
    <MapsTitleSettings Text="Top 25 Populated Cities in the World">
        <MapsTitleTextStyle Size="16px" />
    </MapsTitleSettings>
    <MapsZoomSettings Enable="true"></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="http://a.tile.openstreetmap.fr/osmfr/level/tileX/tileY.png" TValue="string">
            <MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF" />
            </MapsMarkerClusterSettings>
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="20" Width="20" DataSource="@LargestCities" TValue="PopulationCityDetails">
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Population: <b>${Population}" />
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    public class PopulationCityDetails
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string Name { get; set; }
        public double Population { get; set; }
        public string Country { get; set; }
        public string Continent { get; set; }
        public string Color { get; set; }
        public string Shape { get; set; }
    };
    public List<PopulationCityDetails> LargestCities = new List<PopulationCityDetails> {
        new PopulationCityDetails { Name="Tokyo", Latitude=35.6894875, Longitude=139.6917064, Population=33200000, Country="Japan", Continent="Asia", Color="Red", Shape="Pentagon" },
        new PopulationCityDetails { Name="New York", Latitude=40.7127753, Longitude=-74.0059728, Population=17800000,Country="United States", Continent="North America", Color="Green",Shape="Diamond" },
        new PopulationCityDetails { Name="Sao Paulo", Latitude=-23.5505199, Longitude=-46.6333094, Population=17700000,Country="Brazil", Continent="South America", Color="Orange",Shape="InvertedTriangle" },
        new PopulationCityDetails { Name="Seoul/Incheon", Latitude=37.566535, Longitude=126.9779692, Population=17500000,Country="South Korea", Continent="Asia", Color="Red",Shape="Pentagon"},
        new PopulationCityDetails { Name="Mexico City", Latitude=19.2464696, Longitude=-99.1013498, Population=17400000,Country="Mexico", Continent="North America", Color="Green",Shape="Diamond"},
        new PopulationCityDetails { Name="Osaka/Kobe/Kyoto", Latitude=35.0212466, Longitude=135.7555968, Population=16425000,Country="Japan", Continent="Asia", Color="Red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Manila", Latitude=14.5995124, Longitude=120.9842195, Population=14750000,Country="Philippines", Continent="Asia", Color="Red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Mumbai", Latitude=19.0759837, Longitude=72.8776559, Population=14350000,Country="India", Continent="Asia", Color="Red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Delhi", Latitude=28.6139391, Longitude=77.2090212, Population=14300000,Country="India", Continent="Asia", Color="Red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Jakarta", Latitude=-6.17511, Longitude=106.8650395, Population=14250000,Country="Indonesia", Color="Red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Lagos", Latitude=6.5243793, Longitude=3.3792057, Population=13400000, Continent="Africa",Country="Nigeria", Color="Blue",Shape="Rectangle" },
        new PopulationCityDetails { Name="Kolkata", Latitude=22.572646, Longitude=88.363895, Population=12700000,Country="India", Continent="Asia", Color="Red",Shape="Pentagon" },
        new PopulationCityDetails { Name="Cairo", Latitude=30.0444196, Longitude=31.2357116, Population=12200000,Country="Egypt", Continent="Africa", Color="Blue",Shape="Rectangle" },
        new PopulationCityDetails { Name="Los Angeles", Latitude=34.0522265, Longitude=-118.2436596, Population=11789000, Continent="North America",Country="United States", Color="Green",Shape="Diamond" },
        new PopulationCityDetails { Name="Buenos Aires", Latitude=-34.6036844, Longitude=-58.3815591, Population=11200000,Country="Argentina", Color="Orange", Continent="South America",Shape="InvertedTriangle" },
        new PopulationCityDetails { Name="Rio de Janeiro", Latitude=-22.9068467, Longitude=-43.1728965, Population=10800000,Country="Brazil", Color="Orange", Continent="South America",Shape="InvertedTriangle" },
        new PopulationCityDetails { Name="Moscow", Latitude=55.755826, Longitude=37.6173, Population=10500000,Country="Russia", Color="Yellow", Continent="Europe",Shape="Triangle" },
        new PopulationCityDetails { Name="Shanghai", Latitude=31.2303904, Longitude=121.4737021, Population=10000000,Country="China", Color="Red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Karachi", Latitude=25.0700428, Longitude=67.2847875, Population=9800000,Country="Pakistan", Color="Red", Continent="Asia",Shape="Pentagon"},
        new PopulationCityDetails { Name="Paris", Latitude=48.856614, Longitude=2.3522219, Population=9645000,Country="France", Color="Yellow", Continent="Europe",Shape="Triangle" },
        new PopulationCityDetails { Name="Istanbul", Latitude=41.0082376, Longitude=28.9783589, Population=9000000,Country="Istanbul", Color="Yellow", Continent="Europe",Shape="Triangle" },
        new PopulationCityDetails { Name="Nagoya", Latitude=35.1814464, Longitude=136.906398, Population=9000000,Country="Japan", Color="Red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Beijing", Latitude=39.9041999, Longitude=116.4073963, Population=8614000,Country="China", Color="Red", Continent="Asia",Shape="Pentagon" },
        new PopulationCityDetails { Name="Chicago", Latitude=41.8781136, Longitude=-87.6297982, Population=8308000,Country="United States", Color="Green", Continent="North America",Shape="Diamond"},
        new PopulationCityDetails { Name="London", Latitude=51.5073509, Longitude=-0.1277583, Population=8278000,Country="United Kingdom", Color="Yellow", Continent="Europe",Shape="Triangle" }
    };
}

bản đồ Bing

bản đồ Bing là một dịch vụ bản đồ trực tuyến do Microsoft sở hữu, cung cấp bản đồ cập nhật. Tương tự như OSM, khi chúng tôi chuyển yêu cầu, Bing Maps tạo ra các hình ảnh ô nhỏ và kết hợp chúng thành một hình ảnh duy nhất để hiển thị khu vực bản đồ trong một thành phần.

Sử dụng ví dụ mã sau để thêm dịch vụ bản đồ trực tuyến Bing Maps vào thành phần Blazor Maps.

@page "/"
@using How2Geeks.Blazor.Maps

<SfMaps Height="450" Width="720">
    <MapsTitleSettings Text="Top 25 Populated Cities in the World">
        <MapsTitleTextStyle Size="16px" />
    </MapsTitleSettings>
    <MapsZoomSettings Enable="true"></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="@Url" TValue="string">
            <MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF" />
            </MapsMarkerClusterSettings>
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="30" Width="30" DataSource="@LargestCities" TValue="PopulationCityDetails">
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Population: <b>${Population}" />
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {

    public string Url;

    protected override async Task OnInitializedAsync()
    {
        Url = await SfMaps.GetBingUrlTemplate("https://dev.virtualearth.net/REST/V1/Imagery/Metadata/CanvasGray?output=json&include=ImageryProviders&urischeme=https&key=AuQazZ3PUo3p2_c2KPhqMku-iKvee5fKcRREIg46MENqVTM9dp2ZyTbrHJpR9esZ");
    }

    public class PopulationCityDetails
    {
        ...
        ...
    };
    public List<PopulationCityDetails> LargestCities = new List<PopulationCityDetails> {
        ...
        ...
    };

}

Ghi chú: Các chi tiết về nguồn dữ liệu chẳng hạn như Quần thể Thành phốLớn nhất có sẵn trong phần OpenStreetMap của blog này.

Hình dung Bản đồ Bing trong Bản đồ Blazor
Hình dung Bản đồ Bing trong Bản đồ Blazor

Hộp bản đồ

Hộp bản đồcó trụ sở chính tại Hoa Kỳ, cung cấp dịch vụ bản đồ trực tuyến cho các trang web và ứng dụng cho phép người dùng khám phá thế giới.

Sử dụng ví dụ mã sau để thêm dịch vụ bản đồ trực tuyến Mapbox vào thành phần Blazor Maps.

@page "/"
@using How2Geeks.Blazor.Maps

<SfMaps Height="450" Width="720">
    <MapsTitleSettings Text="Top 25 Populated Cities in the World">
        <MapsTitleTextStyle Size="16px" />
    </MapsTitleSettings>
    <MapsZoomSettings Enable="true"></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/level/tileX/tileY?access_token=pk.eyJ1IjoibGFrc2htaXJhZGhha3Jpc2huYW4iLCJhIjoiY2tqMm45NzQwMjg5OTJxcXRtbWlvZHhmNCJ9.hvMNfh9C9pfwWHp3mj2WpA" TValue="string">
            <MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF" />
            </MapsMarkerClusterSettings>
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="20" Width="20" DataSource="@LargestCities" TValue="PopulationCityDetails">
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Population: <b>${Population}" />
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    public class PopulationCityDetails
    {
        ...
        ...
    };
    public List<PopulationCityDetails> LargestCities = new List<PopulationCityDetails> {
        ...
        ...
    };
}

Ghi chú: Các chi tiết về nguồn dữ liệu chẳng hạn như Quần thể Thành phốLớn nhất có sẵn trong phần OpenStreetMap của blog này.

Hình dung dịch vụ Mapbox trong Blazor Maps
Hình dung Dịch vụ Mapbox trong Blazor Maps

Esri

Esri là một công ty khác của Mỹ cung cấp phần mềm hệ thống thông tin địa lý (GIS), web GIS và phần mềm quản lý cơ sở dữ liệu địa lý.

Sử dụng ví dụ mã sau để thêm dịch vụ bản đồ trực tuyến Esri vào thành phần Blazor Maps.

@page "/"
@using How2Geeks.Blazor.Maps

<SfMaps Height="450" Width="720">
    <MapsTitleSettings Text="Top 25 Populated Cities in the World">
        <MapsTitleTextStyle Size="16px" />
    </MapsTitleSettings>
    <MapsZoomSettings Enable="true"></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/level/tileY/tileX?apiKey=AAPK04316d918e224b339f72d107b5aef880I2MT0hI3L2xIX4DMcuEELiOcb4DRmxeGp_-hqlsFhziOvqBwel-uIA-87Dp9h3eI" TValue="string">
            <MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF" />
            </MapsMarkerClusterSettings>
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="20" Width="20" DataSource="@LargestCities" TValue="PopulationCityDetails">
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Population: <b>${Population}" />
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    public class PopulationCityDetails
    {
        ...
        ...
    };
    public List<PopulationCityDetails> LargestCities = new List<PopulationCityDetails> {
        ...
        ...
    };
}

Ghi chú: Các chi tiết về nguồn dữ liệu chẳng hạn như Quần thể Thành phốLớn nhất có sẵn trong phần OpenStreetMap của blog này.

Hình dung Bản đồ Esri trong Blazor Maps
Hình dung Bản đồ Esri trong Blazor Maps

TomTom

TomTom là một công ty của Hà Lan cung cấp ba loại sản phẩm với nhiều hình dạng và hình thức khác nhau: bản đồ, dịch vụ được kết nối và điều hướng.

Sử dụng ví dụ mã sau để thêm dịch vụ bản đồ trực tuyến TomTom vào thành phần Bản đồ Blazor.

@page "/"
@using How2Geeks.Blazor.Maps

<SfMaps Height="450" Width="720">
    <MapsTitleSettings Text="Top 25 Populated Cities in the World">
        <MapsTitleTextStyle Size="16px" />
    </MapsTitleSettings>
    <MapsZoomSettings Enable="true"></MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="http://api.tomtom.com/map/1/tile/basic/main/level/tileX/tileY.png?key=zzVjM8webeABaPadifIf9hFpmdC9XzmG" TValue="string">
            <MapsMarkerClusterSettings AllowClustering="true" Shape="MarkerType.Image" Height="40" Width="40" ImageUrl="images/maps/cluster.svg">
                <MapsLayerMarkerClusterLabelStyle Color="#FFFFFF" />
            </MapsMarkerClusterSettings>
            <MapsMarkerSettings>
                <MapsMarker Visible="true" Shape="MarkerType.Image" ImageUrl="images/maps/ballon.png" Height="20" Width="20" DataSource="@LargestCities" TValue="PopulationCityDetails">
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="Name" Format="<b>${Name}</b><br>Population: <b>${Population}" />
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
</SfMaps>

@code {
    public class PopulationCityDetails
    {
        ...
        ...
    };
    public List<PopulationCityDetails> LargestCities = new List<PopulationCityDetails> {
        ...
        ...
    };
}

Ghi chú: Các chi tiết về nguồn dữ liệu chẳng hạn như Quần thể Thành phốLớn nhất có sẵn trong phần OpenStreetMap của blog này.

Hình dung Bản đồ TomTom trong Bản đồ Blazor
Hình dung Bản đồ TomTom trong Bản đồ Blazor

Các dịch vụ bản đồ trực tuyến khác

Mẫu URL đã được triển khai theo cách mà bất kỳ nhà cung cấp dịch vụ bản đồ trực tuyến nào có mẫu sau đều có thể được xem trước trong thành phần How2Geeks Blazor Maps.

Mẫu Mẫu: https: // /maps/basic/{z}/{x}/{y}.png

  • $ {z} đại diện cho hệ số thu phóng (mức).
  • $ {x} cho biết vị trí x của hình xếp.
  • $ {y} cho biết vị trí y của hình xếp.

Trong trường hợp này, khóa được tạo cho các nhà cung cấp dịch vụ bản đồ trực tuyến cũng có thể được thêm vào URL.

Tham khảo GitHub

Để biết thêm chi tiết, hãy tham khảo Dịch vụ bản đồ trực tuyến trong bản trình diễn thành phần Blazor Maps.

Sự kết luận

Trong bài đăng trên blog này, chúng ta đã thấy cách trực quan hóa các dịch vụ bản đồ trực tuyến khác nhau trong thành phần How2Geeks Blazor Maps. Bằng cách sử dụng các dịch vụ bên ngoài này, bạn có thể dễ dàng truy cập dữ liệu bản đồ. Hãy thử các bước được thảo luận trong bài đăng blog này và để lại phản hồi của bạn trong phần nhận xét bên dưới!

Đối với khách hàng hiện tại, phiên bản mới nhất của các thành phần Blazor của chúng tôi có sẵn để tải xuống từ trang Giấy phép và Tải xuống. Nếu bạn chưa phải là khách hàng của How2Geeks, bạn có thể dùng thử bản dùng thử miễn phí 30 ngày của chúng tôi để kiểm tra các tính năng có sẵn.

Bạn cũng có thể liên hệ với chúng tôi khi có câu hỏi hoặc nhận xét thông qua các diễn đàn hỗ trợ của chúng tôi, Direct-Trac hoặc cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn!

Previous articleWordPress không còn là trang web chỉ dành cho blog
Next articleXây dựng giao diện người dùng với điều khiển đồng bộ hóa và phản ứng
Natalia Quinn là một nàng thơ của How2Geeks, hiện đang là Copywriting và là nhà biên tập nội dung có tiếng chuyên về lĩnh vực công nghệ và kỹ thuật số. Các bài viết của Natalia đều có những nét riêng và chuyên cung cấp những thông tin về công nghệ, những mẹo công nghệ hay những bản tin công nghệ hay nhất và mới nhất hiện nay.