制作不同风格的矢量分块地图

矢量瓦片对地图中的矢量图层以瓦片的形式进行切分和存储。相对于传统的栅格格式的地图瓦片，矢量瓦片的体积更小，存储、分发更方便，更适合于地图中对时效性要求较高的地物要素的表达，如 POI 信息、路线信息等。

常见的在线地图服务，如 Google Maps、Mapbox、百度地图等都使用了矢量瓦片。SuperMap服务器端可以通过分布式切图生产矢量瓦片，并在地图服务中直接发布使用（tileFeature资源）。同时，SuperMap的JavaScript客户端对接了矢量瓦片，并封装为矢量瓦片图层TiledVectorLayer，可以直接在客户端快速渲染出图，即矢量分块图。

矢量分块图可以使用默认的风格样式来渲染，也可以结合地图样式表CartoCSS自定义渲染风格。

示例：默认风格的矢量分块图

Step1 地图初始化

本例将使用SuperMap Online发布的在线地图服务map_China4003中的矢量瓦片。

    var map, layer, lat, lon, geolocate, infowin,lonLat,geometryInfo, 
        url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China";

    var value="IbooSg6gIBmhIRaesVgjSED0",
        name = "key";
    SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");

    function init() {
        if(!document.createElement('canvas').getContext) {
            alert('您的浏览器不支持 canvas，请升级');
            return;
        }

        map = new SuperMap.Map("map", {controls: [
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
        });

        ……

    }

Step2 通过 TiledVectorLayer 调用地图服务中的矢量瓦片

        layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true},{useLocalStorage:true});

Step3 把矢量分块图层添加到地图上

把上述矢量分块图层，添加到地图中，并设置地图显示的中心点和比例尺级别。

    function addLayer() {
        map.addLayers([layer]);
        var center = new SuperMap.LonLat(0,0);
        map.setCenter(center, 1);
    }
    ……

     layer.events.on({"layerInitialized": addLayer});

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

示例：自定义HelloKitty风格的矢量分块图

SuperMap JavaScript SDK支持通过CartoCSS自定义矢量瓦片的渲染风格。CartoCSS是Mapbox定义的地图样式预处理器，在制作矢量分块图时，可以使用其中的点、线、面、文本等符号样式。

Step0 使用CartoCSS预定义矢量图层样式

使用CartoCSS自定义矢量瓦片各图层的渲染风格，包括颜色、线宽及透明度等。


        @waterColor:rgb(245,169,193);
        @roadColora:rgb(244,73,116);
        @roadColorb:rgb(244,73,116);
        @railwayColora:rgb(50,50,50);
        @railwayColorb:rgb(255,255,255);
        @vegetationColor:rgb(239,169,193);
        @continentColor:rgb(250,250,250);
        @provinceLineColor:rgb(226,195,19);


        #China_Railway_L___China400::a{

        /*每一段的长度为15px,间隔也是15px*/
        line-color:@railwayColora;
        line-width:2.5;
        }
        #China_Railway_L___China400::b{

        /*每一段的长度为15px,间隔也是15px*/
        line-dasharray:18,18;
        line-color:@railwayColorb;
        line-width:1.5;
        }
        /*底下的地图背景图层*/

        #World_Division___China400{
        polygon-fill:@waterColor;
        }

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

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

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

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

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

        #China_Vegetation_R___China400{
        polygon-fill:@vegetationColor;
        line-color:@vegetationColor;
        }
        #China_Hydside_R___China400{
        polygon-fill:@waterColor;
        line-color:@waterColor;
        }

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

        #World_Division___China400{
        polygon-fill:@waterColor;
        }

Step1 地图初始化

本例将使用SuperMap Online发布的在线地图服务map_China4003中的矢量瓦片。

 var map, layer, lat, lon, geolocate, infowin, lonLat, geometryInfo, cartoCss,
 url = "http://www.supermapol.com/iserver/services/map_China4003/rest/maps/China";

 var value="IbooSg6gIBmhIRaesVgjSED0",
 name = "key";
 SuperMap.Credential.CREDENTIAL = new SuperMap.Credential(value, "key");

 function init() {
 if(!document.createElement('canvas').getContext) {
 alert('您的浏览器不支持 canvas，请升级');
 return;
 }

 map = new SuperMap.Map("map", {controls: [
 new SuperMap.Control.ScaleLine(),
 new SuperMap.Control.Zoom(),
 new SuperMap.Control.Navigation({
 dragPanOptions: {
 enableKinetic: true
 }
 })]
 });

 ……

 }

Step2 创建TiledVectorLayer图层并使用自定义的样式

通过 TiledVectorLayer 调用地图服务中的矢量瓦片，并使用CartoCSS中预定义的样式渲染出图（cartoCss参数）。

        cartoCss=document.getElementById("cartoCssStr").text;
        layer = new SuperMap.Layer.TiledVectorLayer("China", url,{cacheEnabled:true},{useLocalStorage:true,cartoCss:cartoCss});

Step3 把矢量分块图层添加到地图上

把自定义风格的矢量分块图层添加到地图上，并设置地图显示的中心点和比例尺级别。

    function addLayer() {
        map.addLayers([layer]);
        var center = new SuperMap.LonLat(12957388,4853991);
        map.setCenter(center, 11);
    }
    ……
    layer.events.on({"layerInitialized": addLayer});

在线演示与源码编辑

您可以在线访问完整代码、体验演示效果，也可以直接在线编辑源码并实时查看效果。

制作不同风格的矢量分块地图