User Tools

Site Tools


thinkgeo_cloud_maps_vector_tiles

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
thinkgeo_cloud_maps_vector_tiles [2019/03/11 08:12]
johnnyz [Samples]
thinkgeo_cloud_maps_vector_tiles [2019/05/07 08:53] (current)
tgwikiupdate
Line 1: Line 1:
 ====== ThinkGeo Cloud Maps Vector Tiles ====== ====== ThinkGeo Cloud Maps Vector Tiles ======
  
-ThinkGeo Cloud Maps Vector Tiles serve vector map tiles through XYZ.  +ThinkGeo Cloud Maps Vector Tiles serve vector map tiles through XYZ. Check out [[https://​samples.thinkgeo.com/​cloud/#​VectorMaps|ThinkGeo Cloud Vector Map Online Sample]] for a quick look.
- +
-Check out [[|ThinkGeo Cloud Vector Map Online Sample]] for a quick look.+
  
 ===== RESTful APIs===== ===== RESTful APIs=====
Line 14: Line 12:
 //​**ThinkGeo Cloud provides a RESTful API to consume the map tiles**:// //​**ThinkGeo Cloud provides a RESTful API to consume the map tiles**://
  
-<code javascript>​ https://​cloud.thinkgeo.com/​api/​v1/​maps/​vector/​{srid}/​{tileZ}/​{tileX}/​{tileY}.pbf?​apikey={key}</​code>​ +==== Get Maps Vector Tile By XYZ ==== 
-  ​* ​ //​**srid**//:​The SRID for the requesting ​tile, currently only "​3857"​ (Spherical Mercator) is supported +Get the vector ​tile at the specified ​zoom level and X/Y coordinateusing the supplied parameters.
-  *  //​**tileZ**//:​ The Z index (zoom level) of the requesting tile, from 0 to 19. Zoom Level 0 is the hight zoomlevel with the entire world in one single tile, Zoom Level z has 4^z tiles for the entire world. The greater the z is, the lower the current zoomlevel is.  +
-  *  //​**tileX**//:​ The index (column index in the tiling matrix) of the requesting tile. It is within [0, 4^z) for zoomlevel z.  +
-  *  //​**tileY**/​/: The index (row index in the tiling matrix) of the requesting tile. It is within [04^z) for zoomlevel z.  +
-  *  //​**apikey**//: ​the apikey.  +
- +
-Here is a request URL for example: [[https://​cloud.thinkgeo.com/​api/​v1/​maps/​vector/​streets/​3857/​0/​0/​0.pbf?​apiKey=apiKey]],​ (it will not working without a  API key). Please check out [[thinkgeo_cloud_client_keys_guideline|Client Keys Guideline]] to find out how to get an APIKey+
  
 +<code html>
 +HTTP GET
 +https://​cloud.thinkgeo.com/​api/​v1/​maps/​vector/​{srid}/​{tileZ}/​{tileX}/​{tileY}.pbf?​apikey={key}
 +</​code>​
 +  * <​html><​span class="​api-parameter"><​span class="​api-parameter-name">​srid:</​span>​ The spatial reference system ID for the tile you are requesting. ​ Currently only "​3857"​ (Spherical Mercator) is supported.</​span></​html>​
 +  * <​html><​span class="​api-parameter"><​span class="​api-parameter-name">​tileZ:</​span>​ The Z index (zoom level) of the requesting tile, from 0 to 19. Zoom Level 0 is the highest zoom level with the entire world in one single tile.  Each zoom level <​em>​z</​em>​ has 4<​sup><​em>​z</​em></​sup>​ tiles for the entire world. The greater the z value, the closer to the Earth'​s surface the current zoom level is.</​span></​html>​
 +  * <​html><​span class="​api-parameter"><​span class="​api-parameter-name">​tileX:</​span>​ The X index (column index in the tiling matrix) of the requesting tile. Valid range is between 0 and 4<​sup><​em>​z</​em></​sup>​ for each given zoom level <​em>​z</​em>​.</​span></​html>​
 +  * <​html><​span class="​api-parameter"><​span class="​api-parameter-name">​tileY:</​span>​ The Y index (row index in the tiling matrix) of the requesting tile. Valid range is between 0 and 4<​sup><​em>​z</​em></​sup>​ for each given zoom level <​em>​z</​em>​.</​span></​html>​
 +  * <​html><​span class="​api-parameter"><​span class="​api-parameter-name">​apikey:</​span>​ The ThinkGeo Cloud API key that authenticates your request.</​span></​html>​
  
 +Here is an example of a vector tile request URL: [[https://​cloud.thinkgeo.com/​api/​v1/​maps/​vector/​streets/​3857/​0/​0/​0.pbf?​apiKey=apiKey]] (a valid API key is required). Please check out [[thinkgeo_cloud_client_keys_guideline|Client Keys Guideline]] to find out how to get your own API key.
 ===== Why Vector Tiles?===== ===== Why Vector Tiles?=====
 Vector tiles allows for more efficient downloads and more rapid map updates than pre-rendered raster tiles. When changes are made to the OSM base layer, rather than waiting for an image tile to be redrawn, only the coordinates and drawing instructions for that particular building or road need to be updated. Depending on the URL syntax, vector tiles can return all of the OSM data, or just individual layers, or combinations of layers, including water, earth, land-use, roads, buildings and other points of interest. Vector tiles allows for more efficient downloads and more rapid map updates than pre-rendered raster tiles. When changes are made to the OSM base layer, rather than waiting for an image tile to be redrawn, only the coordinates and drawing instructions for that particular building or road need to be updated. Depending on the URL syntax, vector tiles can return all of the OSM data, or just individual layers, or combinations of layers, including water, earth, land-use, roads, buildings and other points of interest.
Line 79: Line 81:
  
 <code javascript>​ <code javascript>​
-    <link rel="​stylesheet"​ href="​https://​cdn.thinkgeo.com/​vectormap-js/​2.0.2/​vectormap.css"></​link>​ +    <link rel="​stylesheet"​ href="​https://​cdn.thinkgeo.com/​vectormap-js/​3.0.0/​vectormap.css"></​link>​ 
-    <script src="​https://​cdn.thinkgeo.com/​vectormap-js/​2.0.2/​vectormap.js"></​script>​+    <script src="​https://​cdn.thinkgeo.com/​vectormap-js/​3.0.0/​vectormap.js"></​script>​
 </​code>​ </​code>​
  
Line 91: Line 93:
  
 <code javascript>​ <code javascript>​
-    var worldstreetsStyle = "​https://​cdn.thinkgeo.com/​worldstreets-styles/​1.0.0/​light.json"; ​   ​+    var worldstreetsStyle = "​https://​cdn.thinkgeo.com/​worldstreets-styles/​3.0.0/​light.json"; ​   ​
     var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle, ​     var worldstreets = new ol.mapsuite.VectorTileLayer(worldstreetsStyle, ​
         {         {
Line 99: Line 101:
         layers: [worldstreets],​         layers: [worldstreets],​
         target: '​map',​         target: '​map',​
 +        renderer: '​webgl',​
         view: new ol.View({         view: new ol.View({
             center: [-10775718.490585351,​ 3868389.0226015863],​             center: [-10775718.490585351,​ 3868389.0226015863],​
             zoom: 4,             zoom: 4,
-            maxResolution:​ 40075016.68557849 / 512,+            maxResolution:​ 40075016.68557849 / 512
         }),         }),
     });     });
Line 124: Line 127:
 </​code>​ </​code>​
  
-  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-WinForms]] for [[map_suite_desktop_for_winforms|Map Suite Desktop For WinForms]] +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForWinforms|ThinkGeoCloudVectorMapsSample-WinForms]] for [[map_suite_desktop_for_winforms|Map Suite Desktop For WinForms]] 
-  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForWpf|ThinkGeoCloudVectorMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] 
-  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-WebForms]] for [[map_suite_web_for_webforms|Map Suite Web For WebForms]] +  * Sample code: [[https://​github.com/​ThinkGeo/​SpatialQueryThinkGeoVectorMapsSample-ForWpf|SpatialQueryThinkGeoVectorMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop ​For WPF]] 
-  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-MVC]] for [[map_suite_web_for_mvc|Map Suite Web For MVC]] +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoMBTilesMapsSample-ForWpf|ThinkGeoMBTilesMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop ​For WPF]] 
-  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-iOS]] for [[map_suite_mobile_for_ios|Map Suite Mobile For iOS]] +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForiOS|ThinkGeoCloudVectorMapsSample-iOS]] for [[map_suite_mobile_for_ios|Map Suite Mobile For iOS]] 
-  * Sample code: [[notexist|ThinkGeoCloudVectorMapsSample-Android]] for [[map_suite_mobile_for_android|Map Suite Mobile for Android]] +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoMBTilesMapsSample-ForiOS|ThinkGeoMBTilesMapsSample-iOS]] for [[map_suite_mobile_for_ios|Map Suite Mobile For iOS]] 
 +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForAndroid|ThinkGeoCloudVectorMapsSample-Android]] for [[map_suite_mobile_for_android|Map Suite Mobile for Android]] 
 +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoMBTilesMapsSample-ForAndroid|ThinkGeoMBTilesMapsSample-Android]] for [[map_suite_mobile_for_android|Map Suite Mobile for Android]] 
 +  * Sample code: [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForWebApi|ThinkGeoCloudVectorMapsSample-WebApi]] for [[map_suite_web_for_webapi|Map Suite Desktop For WebApi]]
  
  
 ==== From Client Side SDKs ==== ==== From Client Side SDKs ====
  
-.Net SDK //ThinkGeo Cloud Client// ​is provided ​to consume the ThinkGeo Cloud Service as well. It's available on [[https://​www.nuget.org/​packages/​ThinkGeo.Cloud.Client|NuGet]], ​here is the complete ​[[thinkgeo_cloud_.net_client_apis|API ​List]]. +Our .NET SDK //ThinkGeo Cloud Client// ​makes it easy to consume ​all of the ThinkGeo Cloud services in your applications. It's available on [[https://​www.nuget.org/​packages/​ThinkGeo.Cloud.Client|NuGet]].  IntelliSense hints will help you get startedand you can also refer to the [[thinkgeo_cloud_.net_client_apis|ThinkGeo Cloud Client ​API list]] for details. 
 + 
 +At the NuGet Package Manager terminal, you can install this package by running the command: ''​Install-Package ThinkGeo.Cloud.Client -Version VERSION_TO_BE_INSTALLED''​. ​ You can also check out ThinkGeo on GitHub for [[https://​github.com/​ThinkGeo?​utf8=%E2%9C%93&​q=cloud&​type=&​language=|samples utilizing the ThinkGeo Cloud Client]].
  
 Sample Code:  Sample Code: 
Line 158: Line 165:
  
 Coming soon Coming soon
- 
 </​code>​ </​code>​
  
-Web Sample:+  * [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForWinforms|ThinkGeoCloudVectorMapsSample-WinForms]] for [[map_suite_desktop_for_winforms|Map Suite Desktop For WinForms]] 
 +  * [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForWpf|ThinkGeoCloudVectorMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] 
 +  * [[https://​github.com/​ThinkGeo/​SpatialQueryThinkGeoVectorMapsSample-ForWpf|SpatialQueryThinkGeoVectorMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] 
 +  * [[https://​github.com/​ThinkGeo/​ThinkGeoMBTilesMapsSample-ForWpf|ThinkGeoMBTilesMapsSample-WPF]] for [[map_suite_desktop_for_wpf|Map Suite Desktop For WPF]] 
 + 
 +Mobile ​Sample: ​
 <code csharp> <code csharp>
  
 Coming soon Coming soon
- 
 </​code>​ </​code>​
  
-Mobile Sample: ​+  * [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForiOS|ThinkGeoCloudVectorMapsSample-iOS]] for [[map_suite_mobile_for_ios|Map Suite Mobile ​For iOS]] 
 +  * [[https://​github.com/​ThinkGeo/​ThinkGeoMBTilesMapsSample-ForiOS|ThinkGeoMBTilesMapsSample-iOS]] for [[map_suite_mobile_for_ios|Map Suite Mobile For iOS]] 
 +  * [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForAndroid|ThinkGeoCloudVectorMapsSample-Android]] for [[map_suite_mobile_for_android|Map Suite Mobile for Android]] 
 +  * [[https://​github.com/​ThinkGeo/​ThinkGeoMBTilesMapsSample-ForAndroid|ThinkGeoMBTilesMapsSample-Android]] for [[map_suite_mobile_for_android|Map Suite Mobile for Android]] 
 + 
 +Web Sample:
 <code csharp> <code csharp>
  
 Coming soon Coming soon
- 
 </​code>​ </​code>​
 +
 +  * [[https://​github.com/​ThinkGeo/​ThinkGeoCloudVectorMapsSample-ForWebApi|ThinkGeoCloudVectorMapsSample-WebApi]] for [[map_suite_web_for_webapi|Map Suite Web for WebApi]]
 +
thinkgeo_cloud_maps_vector_tiles.1552291952.txt.gz · Last modified: 2019/03/11 08:12 by johnnyz