美文网首页
三章-28-样式化矢量图层

三章-28-样式化矢量图层

作者: 彩云飘过 | 来源:发表于2020-04-20 17:51 被阅读0次

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

源码 见 1028.html ,对应的 官网示例 https://openlayers.org/en/latest/examples/polygon-styles.html?q=Style

https://openlayers.org/en/latest/examples/regularshape.html?q=Style

image.png 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 styles = [
     //多边形内填充
      new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: 'blue',
          width: 3
        }),
        fill: new ol.style.Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      }),

     //对多边形的顶点样式化
      new ol.style.Style({
        image: new ol.style.Circle({
          radius: 5,
          fill: new ol.style.Fill({
            color: 'orange'
          })
        }),
        geometry: function (feature) {
          // 返回多边形polygon的第一个“环”的所有顶点坐标,作为一个多点几何体赋值给geometry
          var coordinates = feature.getGeometry().getCoordinates()[0];
          return new ol.geom.MultiPoint(coordinates);
        }
      })

    ];
    
     //定义几何体
    var geojsonObject = {
      'type': 'FeatureCollection',
      'crs': {
        'type': 'name',
        'properties': {
          'name': 'EPSG:3857'
        }
      },
      'features': [{
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
          [-3e6, 6e6], [-5e6, 6e6]]]
        }
      }, {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
          [0, 6e6], [-2e6, 6e6]]]
        }
      }, {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
          [3e6, 6e6], [1e6, 6e6]]]
        }
      }, {
        'type': 'Feature',
        'geometry': {
          'type': 'Polygon',
          'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
          [0, -1e6], [-2e6, -1e6]]]
        }
      }]
    };

    var source = new ol.source.Vector({
      features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
    });

    var layer = new ol.layer.Vector({
      source: source,
      style: styles
    });

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

</html>

相关文章

  • 三章-28-样式化矢量图层

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

  • Openlayers API-Style

    Style用于矢量图层的渲染,在添加矢量图层的时候,可以给图层中的几何体设置样式。样式类型包括Circle,Fil...

  • Openlayers指南-矢量切片图层

    这里主要介绍矢量切片图层在Openlayers中的应用,这里以加载mapbox样式图层为例来说明矢量切片图层的使用...

  • 章节七 图层的高级操作

    用混合模式制作车身花纹 单击 花纹图层 渐变叠加 改成0度 编辑 变换 变形 调整样式 栅格化图层样式将样式加入到...

  • 2021-02-23 天地图图层类型总结

    天地图图层类型 1. 矢量数据+地名中英文 vec: 矢量底图=Vector cva: 矢量注记图层(中文)=Ch...

  • 第五天 图层样式

    (一)图层样式的使用条件: 不能用图层样式的:背景图层能用图层样式的:像素图层,形状图层,图像图层,图层组,文字图...

  • qgis合并矢量数据

    矢量-数据管理工具-合并矢量图层

  • 3步创建一个抽象的几何背景色

    本教程将告诉你在创建几何背景色。这种技术使用矢量形状图层,图层样式,创建出一个惊人的背景。 步骤1 创建一个新的3...

  • 平面设计软件学习笔记

    前景色 白色 还原 黑透白不透,替代橡皮擦工具 (路径)矢量蒙版,剪切蒙版要有单个图层,栅格化图层(普通位图)—渐...

  • AI知识点-图层样式

    在菜单栏中选择:效果-风格化-选择不同的图层样式。 每点击一个图层样式,就会弹出相应的设置面板; 点击确定可能最终...

网友评论

      本文标题:三章-28-样式化矢量图层

      本文链接:https://www.haomeiwen.com/subject/hgxcuhtx.html