examples/leaflet/vectorTileLayerNatural.html · SuperMap/iClient-JavaScript

Fetch the repository succeeded.

Scan WeChat QR to Pay

Cancel

Complete

richgiteeai

Watch

Unwatch Watching Releases Only Ignoring

48 Star 115 Fork 4

SuperMap/iClient-JavaScript

Code Issues 3 Wiki Insights Pipelines

Service

Tencent Cloud Serverless

Create your Gitee Account

Explore and code with more than 14 million developers,Free private repositories !:)

Already have an account? Sign in

文件

master

Branches (81)

Tags (32)

Manage

master

v11.3.x

v12.1.0

v12.0.1

dependabot/npm_and_yarn/src/common/fast-xml-parser-5.7.0

snyk-fix-54d9e7714a681c45b3ad4dacb6c8592a

dependabot/npm_and_yarn/turf/turf-7.3.3

snyk-fix-abdb4bdebc8b86ad9f7bfae6309e58ad

snyk-fix-4712f7a861c430e813f85333e4bfed82

snyk-upgrade-e88282fa32778b721e99887d92f3a0a7

snyk-upgrade-9a49cfee0586b226f385660495928af1

snyk-upgrade-976578446f1da59fc1ae66384683a906

snyk-upgrade-9b8759143442723b128989c089b4f3c3

dependabot/npm_and_yarn/mapbox-gl-3.18.1

dependabot/npm_and_yarn/elastic/elasticsearch-9.2.1

dependabot/npm_and_yarn/nightwatch-3.15.0

dependabot/npm_and_yarn/chromedriver-145.0.0

snyk-fix-34e860bf6537d6ef593f3733a0a21b4c

v12.0.0

v11.1.1

12.1.0-r

12.0.1-r

12.0.0-r

11.3.0

11.1.2

11.2.1

11.2.0

11.1.1

11.1.0

11.1.0-beta

11.0.1

11.0.0

11.0.0-beta

10.2.1

10.2.0

10.1.3

10.1.2

10.1.1

10.1.0

10.1.0-beta

Clone or Download

Clone/Download

HTTPS SSH SVN SVN+SSH Download ZIP

Prompt

To download the code, please copy the following command and execute it in the terminal

To ensure that your submitted code identity is correctly recognized by Gitee, please execute the following command.

git config --global user.name userName 
git config --global user.email userEmail

When using the SSH protocol for the first time to clone or push code, follow the prompts below to complete the SSH configuration.

1 Generate RSA keys.

2 Obtain the content of the RSA public key and configure it in SSH Public Keys

To use SVN on Gitee, please visit the usage guide

When using the HTTPS protocol, the command line will prompt for account and password verification as follows. For security reasons, Gitee recommends configure and use personal access tokens instead of login passwords for cloning, pushing, and other operations.

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # Private Token

Branches 81

Tags 32

iClient-JavaScript

examples

leaflet

vectorTileLayerNatural.html

vectorTileLayerNatural.html 3.60 KB

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title data-i18n="resources.title_vectorTileLayerNatural"></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" id="cartoCssStr">
 /*此处定义不同的颜色变量,在后面可以重复用这些颜色值*/

@waterColor:rgb(109,183,255);
 @roadColora:rgb(100,100,100);
 @roadColorb:rgb(250,250,250);
 @railwayColora:rgb(186,186,186);
 @railwayColorb:rgb(250,250,250);
 @vegetationColor:rgb(193,220,185);
 @continentColor:rgb(183,202,147);
 @provinceLineColor:rgb(100,100,100);

/*中国除外的其他国家的图层*/

#World_Continent_pl___China{
 polygon-fill:@continentColor;
 line-width:1;
 line-color:@continentColor;
 }
 #China_Province_pl___China{
 polygon-fill:@continentColor;
 line-color:rgba(0,0,0,0);
 }

#Arterial_Road_ln___China::one{
 line-color:@roadColora;
 line-width:2;}
 #Arterial_Road_ln___China::two{
 line-color:@roadColorb;
 line-width:1;}

#Arterial_Road_ln___China___1::one{
 line-color:@roadColora;
 line-width:2;}
 #Arterial_Road_ln___China___1::two{
 line-color:@roadColorb;
 line-width:1;}

#Arterial_Road_ln___China___1___1::one{
 line-color:@roadColora;
 line-width:2;}
 #Arterial_Road_ln___China___1___1::two{
 line-color:@roadColorb;
 line-width:1;}

#Main_Road_L___China::one{
 line-color:@roadColora;
 line-width:2;}
 #Main_Road_L___China::two{
 line-color:@roadColorb;
 line-width:1;}

#Main_Road_L___China___1::one{
 line-color:@roadColora;
 line-width:2;}
 #Main_Road_L___China___1::two{
 line-color:@roadColorb;
 line-width:1;}

#Main_Road_L___China___1___1::a{
 line-color:@roadColora;
 line-width:2;}
 #Main_Road_L___China___1___1::b{
 line-color:@roadColorb;
 line-width:1;}

#Hydside_Area_pl___Hydside{
 polygon-fill:@waterColor;
 line-color:@waterColor;
 }

#China_Provinces_L___China400{
 line-dasharray:10,10;
 line-color:@provinceLineColor;
 line-width:1;
 }

</script>
<script type="text/javascript">
 var host = window.isLocal ? window.server : "https://iserver.supermap.io";
 var map, layer,
 url = host + "/iserver/services/map-china400/rest/maps/China";
 map = L.map('map', {
 center: [39.89, 116.43],
 maxZoom: 12,
 zoom: 11
 });
 var cartoCSS = document.getElementById("cartoCssStr").text;
 layer = new L.supermap.TiledVectorLayer(url, {
 cacheEnabled: true,
 cartoCSS: cartoCSS,
 serverCartoCSSStyle: false,
 attribution: "Map 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);

</script>
</body>
</html>

Copy Edit Raw Blame History

songyumeng authored 2026年06月16日 14:56 +08:00 . 【copyright】2026

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

<!--********************************************************************
* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title data-i18n="resources.title_vectorTileLayerNatural"></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" id="cartoCssStr">
 /*此处定义不同的颜色变量,在后面可以重复用这些颜色值*/

 @waterColor:rgb(109,183,255);
 @roadColora:rgb(100,100,100);
 @roadColorb:rgb(250,250,250);
 @railwayColora:rgb(186,186,186);
 @railwayColorb:rgb(250,250,250);
 @vegetationColor:rgb(193,220,185);
 @continentColor:rgb(183,202,147);
 @provinceLineColor:rgb(100,100,100);


 /*中国除外的其他国家的图层*/

 #World_Continent_pl___China{
 polygon-fill:@continentColor;
 line-width:1;
 line-color:@continentColor;
 }
 #China_Province_pl___China{
 polygon-fill:@continentColor;
 line-color:rgba(0,0,0,0);
 }

 #Arterial_Road_ln___China::one{
 line-color:@roadColora;
 line-width:2;}
 #Arterial_Road_ln___China::two{
 line-color:@roadColorb;
 line-width:1;}

 #Arterial_Road_ln___China___1::one{
 line-color:@roadColora;
 line-width:2;}
 #Arterial_Road_ln___China___1::two{
 line-color:@roadColorb;
 line-width:1;}

 #Arterial_Road_ln___China___1___1::one{
 line-color:@roadColora;
 line-width:2;}
 #Arterial_Road_ln___China___1___1::two{
 line-color:@roadColorb;
 line-width:1;}

 #Main_Road_L___China::one{
 line-color:@roadColora;
 line-width:2;}
 #Main_Road_L___China::two{
 line-color:@roadColorb;
 line-width:1;}

 #Main_Road_L___China___1::one{
 line-color:@roadColora;
 line-width:2;}
 #Main_Road_L___China___1::two{
 line-color:@roadColorb;
 line-width:1;}

 #Main_Road_L___China___1___1::a{
 line-color:@roadColora;
 line-width:2;}
 #Main_Road_L___China___1___1::b{
 line-color:@roadColorb;
 line-width:1;}

 #Hydside_Area_pl___Hydside{
 polygon-fill:@waterColor;
 line-color:@waterColor;
 }

 #China_Provinces_L___China400{
 line-dasharray:10,10;
 line-color:@provinceLineColor;
 line-width:1;
 }

</script>
<script type="text/javascript">
 var host = window.isLocal ? window.server : "https://iserver.supermap.io";
 var map, layer,
 url = host + "/iserver/services/map-china400/rest/maps/China";
 map = L.map('map', {
 center: [39.89, 116.43],
 maxZoom: 12,
 zoom: 11
 });
 var cartoCSS = document.getElementById("cartoCssStr").text;
 layer = new L.supermap.TiledVectorLayer(url, {
 cacheEnabled: true,
 cartoCSS: cartoCSS,
 serverCartoCSSStyle: false,
 attribution: "Map 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);

</script>
</body>
</html>