tiledVectorLayer.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!--********************************************************************
  2. * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
  3. *********************************************************************-->
  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7. <meta charset="UTF-8">
  8. <title data-i18n="resources.title_vectorTiledLayer"></title>
  9. <script type="text/javascript" src="../js/include-web.js"></script>
  10. <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
  11. </head>
  12. <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
  13. <div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>
  14. <script type="text/javascript">
  15. var url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-china400/rest/maps/China";
  16. new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
  17. var map = new ol.Map({
  18. target: 'map',
  19. controls: ol.control.defaults({attributionOptions: {collapsed: false}})
  20. .extend([new ol.supermap.control.Logo()]),
  21. view: new ol.View({
  22. center: [12957388, 4853991],
  23. zoom: 11
  24. })
  25. });
  26. var stylesOptions = {
  27. url: url,
  28. view: map.getView()
  29. };
  30. var vectorTileStyles = new ol.supermap.VectorTileStyles(stylesOptions);
  31. var vectorTileOptions = ol.source.VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
  32. var vectorLayer = new ol.layer.VectorTile({
  33. source: new ol.source.VectorTileSuperMapRest(vectorTileOptions),
  34. style: vectorTileStyles.getFeatureStyle
  35. });
  36. map.addLayer(vectorLayer);
  37. map.on('click', function (e) {
  38. map.forEachFeatureAtPixel(e.pixel, function (feature) {
  39. vectorTileStyles.dispatchEvent({type: 'featureSelected',
  40. selectedId: feature.getProperties().id,
  41. layerName: feature.getProperties().layerName
  42. });
  43. return true;
  44. }, {hitTolerance: 5});
  45. vectorLayer.changed();
  46. })
  47. });
  48. </script>
  49. </body>
  50. </html>