| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <!--********************************************************************
- * Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
- *********************************************************************-->
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8" />
- <title data-i18n="resources.title_componentsLayerManager_vue"></title>
- <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
- <script
- include="iclient-mapboxgl-vue,mapbox-gl-enhance"
- src="../../dist/mapboxgl/include-mapboxgl.js"
- ></script>
- <style>
- #main {
- margin: 0 auto;
- width: 100%;
- height: 100%;
- }
- .sm-component-layer-manager .sm-component-tree {
- font-size: 12px;
- }
- </style>
- </head>
- <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
- <div id="main">
- <sm-web-map :map-options="mapOptions">
- <!-- 图层管理组件：sm-layer-manager -->
- <sm-layer-manager
- position="top-left"
- :collapsed="false"
- :layers="layers"
- :default-expand-all="true"
- ></sm-layer-manager>
- </sm-web-map>
- </div>
- <script>
- new Vue({
- el: '#main',
- data() {
- var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
- var attribution =
- "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
- " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
- " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
- return {
- layers: [
- {
- title: '直辖市',
- children: [
- {
- title: '上海',
- mapInfo: {
- serverUrl: 'https://www.supermapol.com/',
- mapId: 394538195,
- layerFilter: function(layer) {
- if (layer.name === '上海_县级行政区划图@公众数据') {
- return true;
- }
- return false;
- }
- }
- },
- {
- title: '天津',
- mapInfo: {
- serverUrl: 'https://www.supermapol.com/',
- mapId: 849848633,
- layerFilter: function(layer) {
- if (layer.name === '天津_县级行政区划图@公众数据') {
- return true;
- }
- return false;
- }
- }
- },
- {
- title: '北京',
- mapInfo: {
- serverUrl: 'https://www.supermapol.com/',
- mapId: 1837435007,
- layerFilter: function(layer) {
- if (layer.name === '北京_县级行政区划图@公众数据') {
- return true;
- }
- return false;
- }
- }
- },
- {
- title: '重庆',
- mapInfo: {
- serverUrl: 'https://www.supermapol.com/',
- mapId: 1589273415,
- layerFilter: function(layer) {
- if (layer.name === '重庆_县级行政区划图@公众数据') {
- return true;
- }
- return false;
- }
- }
- }
- ]
- }
- ],
- mapOptions: {
- container: 'map', // container id
- style: {
- version: 8,
- sources: {
- 'raster-tiles': {
- attribution: attribution,
- type: 'raster',
- tiles: [host + '/iserver/services/map-china400/rest/maps/ChinaDark'],
- rasterSource: 'iserver',
- tileSize: 256
- }
- },
- layers: [
- {
- id: 'simple-tiles',
- type: 'raster',
- source: 'raster-tiles',
- minzoom: 0,
- maxzoom: 22
- }
- ]
- },
- center: [113.91814841850453, 34.946821449424775], // starting position
- zoom: 5.39 // starting zoom
- }
- };
- }
- });
- </script>
- </body>
- </html>
|
