123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title data-i18n="resources.title_vectorTiledLayer"></title>
- <script type="text/javascript" src="../js/include-web.js"></script>
- <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
- <div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>
- <script type="text/javascript">
- var url = (window.isLocal ? window.server : "https://iserver.supermap.io")+"/iserver/services/map-china400/rest/maps/China";
- new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
- var map = new ol.Map({
- target: 'map',
- controls: ol.control.defaults({attributionOptions: {collapsed: false}})
- .extend([new ol.supermap.control.Logo()]),
- view: new ol.View({
- center: [12957388, 4853991],
- zoom: 11
- })
- });
- var stylesOptions = {
- url: url,
- view: map.getView()
- };
- var vectorTileStyles = new ol.supermap.VectorTileStyles(stylesOptions);
- var vectorTileOptions = ol.source.VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
- var vectorLayer = new ol.layer.VectorTile({
- source: new ol.source.VectorTileSuperMapRest(vectorTileOptions),
- style: vectorTileStyles.getFeatureStyle
- });
- map.addLayer(vectorLayer);
- map.on('click', function (e) {
- map.forEachFeatureAtPixel(e.pixel, function (feature) {
- vectorTileStyles.dispatchEvent({type: 'featureSelected',
- selectedId: feature.getProperties().id,
- layerName: feature.getProperties().layerName
- });
- return true;
- }, {hitTolerance: 5});
- vectorLayer.changed();
- })
- });
- </script>
- </body>
- </html>
|