baseLayer: new maptalks.TileLayer('base', { baseLayerRenderer: 'dom', urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', subdomains: ['a', 'b', 'c', 'd'], attribution: '© OpenStreetMap contributors, © CARTO ' var layer = new maptalks.VectorLayer('vector') .setStyle({ 'filter': ['count', '>=', 0], // set symbol style by filter 'symbol': getSymbol('#747474') .addTo(map); // set style to layer function styleLayer() { layer.setStyle([{ 'filter': ['==', 'count', 100], 'symbol': getSymbol('#1bbc9b') 'filter': ['==', 'count', 200], 'symbol': getSymbol('rgb(216,115,149)') 'filter': ['==', 'count', 300], 'symbol': getSymbol('rgb(135,196,240)') // prepare data for (var i = 0; i < 3; i++) { new maptalks.Polygon([ [-0.123049 + 0.02 * i, 51.503568], [-0.136049 + 0.02 * i, 51.503568], [-0.136049 + 0.02 * i, 51.488568], [-0.123049 + 0.02 * i, 51.488568] 'properties': { 'count': (i + 1) * 100 }).addTo(layer); function getSymbol(color) { return [{ 'polygonFill': color, 'polygonOpacity': 0.5, 'lineColor': '#000', 'lineWidth': 2 'textName': '{count}', 'textSize': 40, 'textFill': '#fff' html, body { margin:0px; height:100%; width:100% .container { width:100%; height:100% .pane { background:#34495e; line-height:28px; color:#fff; z-index:10; top:20px; right:20px .pane a { display:block; color:#fff; text-align:left; padding:0 10px; min-width:28px; min-height:28px; float:left