12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title data-i18n="resources.title_vectorTileLayerMVT"></title>
- <script type="text/javascript" src="../js/include-web.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" src="../../dist/leaflet/include-leaflet.js"></script>
- <script type="text/javascript">
- var host = window.isLocal ? window.server : "https://iserver.supermap.io";
- var map, selectId, selectLayerName, vectorLayer,
- url = host + "/iserver/services/map-china400/rest/maps/China";
- map = L.map('map', {
- center: [39.89, 116.43],
- maxZoom: 15,
- zoom: 1
- });
- vectorLayer = L.supermap.tiledVectorLayer(url, {
- tileSize: 512,
- format: L.supermap.VectorTileFormat.MVT,
- cacheEnabled: true,
- returnAttributes: true,
- attribution: "Tile Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a></span>"
- }).addTo(map);
- vectorLayer.on('click', function (evt) {
- var id = evt.layer.properties.id;
- var layerName = evt.layer.layerName;
- clearHighlight();
- selectId = id;
- selectLayerName = layerName;
- var selectStyle = {
- fillColor: '#800026',
- fillOpacity: 0.5,
- stroke: true,
- fill: true,
- color: 'red',
- opacity: 1,
- weight: 2
- };
- vectorLayer.setFeatureStyle(id, layerName, selectStyle);
- });
- function clearHighlight() {
- if (selectId && selectLayerName) {
- vectorLayer.resetFeatureStyle(selectId, selectLayerName);
- }
- selectId = null;
- selectLayerName = null;
- }
- </script>
- </body>
- </html>
|