<!DOCTYPE html> <html> <head> <title>CartoDB source example</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css"> <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --> <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script> </head> <body> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> <div> <form class="form-horizontal"> <label> Show countries larger than <select id="country-area" class="form-control"> <option value="0" default>0 ㎢</option> <option value="5000">5000 ㎢</option> <option value="10000">10000 ㎢</option> <option value="50000">50000 ㎢</option> <option value="100000">100000 ㎢</option> </select> </label> </form> </div> </div> <script> var mapConfig = { 'layers': [{ 'type': 'cartodb', 'options': { 'cartocss_version': '2.1.1', 'cartocss': '#layer { polygon-fill: #F00; }', 'sql': 'select * from european_countries_e where area > 0' } }] }; var cartoDBSource = new ol.source.CartoDB({ account: 'documentation', config: mapConfig }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }), new ol.layer.Tile({ source: cartoDBSource }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 }) }); function setArea(n) { mapConfig.layers[0].options.sql = 'select * from european_countries_e where area > ' + n; cartoDBSource.setConfig(mapConfig); } document.getElementById('country-area').addEventListener('change', function() { setArea(this.value); }); </script> </body> </html>
OpenLayers示例代码:CartoDB源示例
Copyright © Since 2014.
开源地理空间基金会中文分会
吉ICP备05002032号
Powered by TorCMS