首页 > 其他分享> > Openlayer3专题地图另一种表述

Openlayer3专题地图另一种表述

2019-06-27 21:49:14 作者：互联网

在webgis中如果遇到这样一种需求：同时展现一点的某一要素某一属性的大小和属于哪一类，这里面涉及两个属性值的表述，该如何去直观的表述出来，下面介绍一种表述方式。

效果图：
在这里插入图片描述
一、原理
将要素的符号大小通过属性A的值表现出来，将要素填充的颜色按着属性B归类（下面代码为了方便只通过一个属性来控制）。
二、ol.style.RegularShape 类
介绍这里面几个中的参数
fill:就是填充颜色。
stroke:边线的填充颜色
points：该图形有几个点，如上图该图形六个点
radius：外接圆的半径
angle：相邻两个点之间的夹角如上图
radius2: 一般和radius一块用，构造五角星一类
三、demo示例

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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.6.5/build/ol.js"></script>
</head>
<body>
    <div id="map" class="map"></div>
    <script>
        function getColor(value) {
            return value > 90 ? '#800026' :
                value > 70 ? '#BD0026' :
                    value > 50 ? '#E31A1C' :
                        value > 40 ? '#FC4E2A' :
                            value > 30 ? '#FD8D3C' :
                                value > 20 ? '#FEB24C' :
                                    value > 10 ? '#FED976' :
                                        '#FFEDA0';

        }
        function getFeatureStyle(value) {
            var ponitcolor = getColor(value);
            if (value > 20) {
                value = 20;
            }
            if (value < 5) {
                value = 5;
            }
            var pointstyle = new ol.style.Style({
                image: new ol.style.RegularShape({
                    fill: new ol.style.Fill({ color: ponitcolor }),
                    stroke: new ol.style.Stroke({ color: 'black', width: 2 }),
                    points: 6,
                    radius: value,
                    angle: Math.PI / 6
                }),
            });
            return pointstyle;
        }
        var styleFunction = function (feature) {
            console.log(feature.get("amount"));
            return getFeatureStyle(feature.get("amount"));
        };
      var source = new ol.source.Vector({
        features: features
      });
        var vectorLayer = new ol.layer.Vector({
            title: 'add Layer',
            source: new ol.source.Vector({
                projection: 'EPSG:4326',
                url: "http://localhost:8080/geoserver/school/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=school%3Achinaschool&maxFeatures=200&outputFormat=application%2Fjson", //GeoJSON的文件路径，用户可以根据需求而改变 
                format: new ol.format.GeoJSON()
            }),
            style: styleFunction
        });

      var vectorLayer = new ol.layer.Vector({
        source: source
      });

      var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            vectorLayer
        ],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });
    </script>
</body>
</html>

标签：style,专题地图,表述,value,source,ol,Openlayer3,var,new
来源： https://blog.csdn.net/weixin_40184249/article/details/93914244