Openlayer3专题地图另一种表述

2019-06-27 21:49:14 阅读：233 来源： 互联网

标签：style 专题地图表述 value source ol Openlayer3 var new

在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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Openlayer3专题地图另一种表述