OpenLayers 3 支持的格式

Question

OpenLayers 3 支持哪些格式？

我需要在OpenLayers中打开一张不同颜色的地图，如下图。那么，我应该导出哪种格式？我正在使用 QGIS 和 ArcMap 来创建地图。

这张地图按地区表示巴西人口（颜色越深，人口越多）。数据来自一个 shapefile，其中每一行代表一个不同的区域（总共 5570 个区域）。

Shapefile 属性table:

Answer 1

我使用 JavaScript Leaflet API 而不是 OpenLayers 3 解决了这个问题。

我得到的结果是这样的：

为了帮助我找到解决方案，我遵循了 Interactive Choropleth Map 教程。

1. 我们正在使用 Leaflet，所以我们需要导入 leaflet.js 和 leaflet.css 文件。 Leaflet库可以下载here.

<script src="leaflet.js" type="text/javascript"></script>

<link rel="stylesheet" href="leaflet.css" type="text/css" >

2. 为了生成地图，我使用了一个包含每个区域信息的 GeoJSON 文件。由于我的数据来自 ShapeFile，因此我使用 ArcGIS Online 创建了我需要的 GeoJSON 文件。

3. 我正在使用 JQuery 通过 Ajax 打开 GeoJSON 文件，因此需要导入库。 JQuery可以下载here。例如：

<script type="text/javascript" src="jquery-3.0.0.js" ></script>

4. JavaScript 创建地图的代码：

<script type="text/javascript">

        // Create a map ('map' is the div id where the map will be displayed)
        var map = L.map('map').setView([-15, -55], 5); // Set the center of the map

        // Select the Basemap
        L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | CRR'
        }).addTo(map);

        // Var to save the GeoJSON opened
        var geojsonObject;

        // Open the GeoJSON with the informations
        // Change 'pop_2015_json.geojson' for your GeoJSON file
        $.getJSON("pop_2015_json.geojson", function(json) {
            geojsonObject = L.geoJson(json, {style: style, onEachFeature: onEachFeature});
            geojsonObject.addTo(map);
        });

        // Function to set the color of each region
        function getColor(p) {
            return p > 2000000  ? '#023858' :
                   p > 600000   ? '#045a8d' :
                   p > 300000   ? '#0570b0' :
                   p > 90000    ? '#3690c0' :
                   p > 20000    ? '#74a9cf' :
                   p > 10000    ? '#a6bddb' :
                                  '#d0d1e6';
        }

        // Function to apply the style
        function style(feature) {
            return {
                // 'pop_2015' is an information from GeoJSON
                fillColor: getColor(feature.properties.pop_2015),
                weight: 1,
                opacity: 0.9,
                color: 'grey',
                dashArray: '3',
                fillOpacity: 0.9
            };
        }

        // Change the style when mouse are hovered
        function highlightFeature(e) {
            var layer = e.target;

            // Change the border style
            layer.setStyle({
                weight: 3,
                color: '#666',
                dashArray: '',
                fillOpacity: 0.7,
                opacity: 1
            });

            if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                layer.bringToFront();
            }

            // Update the style of the hovered region
            info.update(layer.feature.properties);
        }

        // Reset the style on mouse over the region
        function resetHighlight(e) {
            geojsonObject.resetStyle(e.target);

            info.update();
        }

        // Zoom to region when clicked
        function zoomToFeature(e) {
            map.fitBounds(e.target.getBounds());
        }

        // Apply for each region
        function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,
                mouseout: resetHighlight,
                click: zoomToFeature
            });
        }

        // Add a field to display the region information
        var info = L.control();

        info.onAdd = function (map) {
            this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
            this.update();
            return this._div;
        };

        // Method that we will use to update the control based on feature properties passed
        info.update = function (props) {
            this._div.innerHTML = '<h4>População por Município &nbsp;</h4>' +  (props ?
                '<b>' + props.nome + '</b><br />' + props.pop_2015 + ' habitantes</sup>'
                : ' ');
        };

        info.addTo(map);


        // Lengend of the map
        var legend = L.control({position: 'bottomright'});

        // Create the legend
        legend.onAdd = function (map) {

            var div = L.DomUtil.create('div', 'legend'),
                // with the interval values
                grades = [0, 10000, 20000, 90000, 300000, 600000, 2000000],
                labels = [];

            // loop through our population intervals and generate a label with a colored square for each interval
            for (var i = 0; i < grades.length; i++) {
                div.innerHTML +=
                    '<i class="legenda" style="background:' + getColor(grades[i] + 1) + '"></i> ' +
                    grades[i] + (grades[i + 1] ? ' &ndash; ' + grades[i + 1] + '<br>' : ' +');
            }

            return div;
        };

        legend.addTo(map);

    </script>

5.一些注意事项：

还有另一种方法可以将 GeoJSON 文件打开到 JavaScript。您可以签到 this question.
函数 getColor(p) 中使用的颜色可以随意更改。查看 ColorBrewer 以帮助选择漂亮的 Choropleth 颜色。
关于在 Leaflet 中使用 GeoJSON 的更多信息：GeoJSON with Leaflet。
使用 Leaflet 创建 Choropleth 地图的另一种方法：Choropleth plugin for Leaflet。

感谢大家的帮助。

OpenLayers 3 支持的格式

OpenLayers 3 supported formats

javascript

leaflet

openlayers-3

choropleth