四章-38-绘制常规形状

作者: 彩云飘过 | 来源:发表于2020-04-21 11:26 被阅读0次

四章-38-绘制常规形状
015 几何形状绘制
PPT：3-1 常用形状的绘制与调整（形状篇）
教你PPT如何简单的美化绘制的形状
canvas
PPT中的形状——基础技术贴
绘制view形状
CAShapeLayer
学习Android界面开发： Shape Drawable
菜鸟教程——iOS UIKit绘制图像

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1020.html ，对应的官网示例 https://openlayers.org/en/latest/examples/zoomslider.html?q=ZoomSlider

image.png

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <link rel="stylesheet" href="../include/ol.css" type="text/css" />
    <script src="../include/ol.js"></script>
  </head>

  <body>
    <div id="map" class="map"></div>

    <script>

      
      var stroke = new ol.style.Stroke({ color: "black", width: 2 });
      var fill = new ol.style.Fill({ color: "red" });

      var styles = {
        square: new ol.style.Style({
          image: new ol.style.RegularShape({
            fill: fill,
            stroke: stroke,
            points: 4,
            radius: 10,
            angle: Math.PI / 4
          })
        }),
        triangle: new ol.style.Style({
          image: new ol.style.RegularShape({
            fill: fill,
            stroke: stroke,
            points: 3,
            radius: 10,
            rotation: Math.PI / 4,
            angle: 0
          })
        }),
        star: new ol.style.Style({
          image: new ol.style.RegularShape({
            fill: fill,
            stroke: stroke,
            points: 5,
            radius: 10,
            radius2: 4,
            angle: 0
          })
        }),
        cross: new ol.style.Style({
          image: new ol.style.RegularShape({
            fill: fill,
            stroke: stroke,
            points: 4,
            radius: 10,
            radius2: 0,
            angle: 0
          })
        }),
        x: new ol.style.Style({
          image: new ol.style.RegularShape({
            fill: fill,
            stroke: stroke,
            points: 4,
            radius: 10,
            radius2: 0,
            angle: Math.PI / 4
          })
        })
      };

      var styleKeys = ["x", "cross", "star", "triangle", "square"];
      
      
      //随机生成250个点的坐标，为每个坐标设置样式，样式时常规形状
      var count = 250;
      var features = new Array(count);
      var e = 4500000;
      for (var i = 0; i < count; ++i) {
        var coordinates = [
          2 * e * Math.random() - e,
          2 * e * Math.random() - e
        ];
        features[i] = new ol.Feature(new ol.geom.Point(coordinates));
        features[i].setStyle(styles[styleKeys[Math.floor(Math.random() * 5)]]);
      }

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

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

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