control_geolocateControl.html 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_geolocateControl"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. </head>
  11. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
  12. <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
  13. <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
  14. <script type="text/javascript">
  15. var host = window.isLocal ? window.server : "https://iserver.supermap.io";
  16. var url = host + "/iserver/services/map-world/rest/maps/World/zxyTileImage.png?prjCoordSys="+encodeURIComponent('{"epsgCode":3857}')+"&z={z}&x={x}&y={y}";
  17. var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
  18. "with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
  19. " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
  20. var map = new mapboxgl.Map({
  21. container: 'map',
  22. style: {
  23. "version": 8,
  24. "sources": {
  25. "raster-tiles": {
  26. "attribution": attribution,
  27. "type": "raster",
  28. "tiles": [url],
  29. "tileSize": 256,
  30. },
  31. },
  32. "layers": [{
  33. "id": "simple-tiles",
  34. "type": "raster",
  35. "source": "raster-tiles",
  36. "minzoom": 0,
  37. "maxzoom": 22
  38. }]
  39. },
  40. center: [-74.50, 40],
  41. maxZoom: 18,
  42. zoom: 2,
  43. });
  44. //mapboxgl 定位控件,当浏览器禁用定位后,该控件不再显示
  45. map.addControl(new mapboxgl.GeolocateControl({
  46. positionOptions: {
  47. enableHighAccuracy: true
  48. },
  49. trackUserLocation: true
  50. }),'top-left');
  51. map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');
  52. map.addControl(new mapboxgl.NavigationControl(), 'top-left');
  53. </script>
  54. </body>
  55. </html>