OpenLayers 笔记

前端

创建多边形

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.     <meta charset=“UTF-8”>
  5.     <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
  6.     <meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
  7.     <title>Custom Polygon Styles</title>
  8.     <link href=“ol_v5.0.0/css/ol.css” rel=“stylesheet” type=“text/css” />
  9.     <script src=“ol_v5.0.0/build/ol.js” type=“text/javascript”></script>
  10. </head>
  11. <body>
  12.     <div id=“map”></div>
  14.     <script>
  15.         var styles = [
  16.             new ol.style.Style({
  17.                 stroke: new ol.style.Stroke({       // 线样式
  18.                     color: ‘blue’,
  19.                     width: 3
  20.                 }),
  21.                 fill: new ol.style.Fill({           // 填充样式
  22.                     color: ‘rgba(0, 0, 255, 0.1)’
  23.                 })
  24.             }),
  25.             new ol.style.Style({
  26.                 image: new ol.style.Circle({   // 点样式
  27.                     radius: 5,          // 圆形符号的半径
  28.                     fill: new ol.style.Fill({   // 圆形符号的填充样式
  29.                         color: ‘orange’
  30.                     })
  31.                 }),
  32.                 // 将样式设置为多边形外环独有的样式
  33.                 geometry: function(feature){
  34.                     // 返回多变形第一个外环的坐标（数组形式）
  35.                     var coordinates = feature.getGeometry().getCoordinates()[0];
  36.                     // 将返回的多边形外环的坐标以MultiPoint的形式重新创建为多点图形
  37.                     return new ol.geom.MultiPoint(coordinates);
  38.                 }
  39.             })
  40.         ];
  42.         // GeoJson格式的数据
  43.         var geojsonObject = {
  44.             ‘type’: ‘FeatureCollection’,
  45.             ‘crs’: {
  46.             ‘type’: ‘name’,
  47.             ‘properties’: {
  48.                 ‘name’: ‘EPSG:3857’
  49.             }
  50.             },
  51.             ‘features’: [{
  52.             ‘type’: ‘Feature’,
  53.             ‘geometry’: {
  54.                 ‘type’: ‘Polygon’,
  55.                 ‘coordinates’: [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
  56.                 [-3e6, 6e6], [-5e6, 6e6]]]
  57.             }
  58.             }, {
  59.             ‘type’: ‘Feature’,
  60.             ‘geometry’: {
  61.                 ‘type’: ‘Polygon’,
  62.                 ‘coordinates’: [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
  63.                 [0, 6e6], [-2e6, 6e6]]]
  64.             }
  65.             }, {
  66.             ‘type’: ‘Feature’,
  67.             ‘geometry’: {
  68.                 ‘type’: ‘Polygon’,
  69.                 ‘coordinates’: [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
  70.                 [3e6, 6e6], [1e6, 6e6]]]
  71.             }
  72.             }, {
  73.             ‘type’: ‘Feature’,
  74.             ‘geometry’: {
  75.                 ‘type’: ‘Polygon’,
  76.                 ‘coordinates’: [[[-2e6, -1e6], [-1e6, 1e6],
  77.                 [0, -1e6], [-2e6, -1e6]]]
  78.             }
  79.             }]
  80.         };
  82.         // 读取GeoJson数据并将其初始化为矢量图层源
  83.         var source = new ol.source.Vector({
  84.             features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
  85.         });
  87.         // 承载GeoJson数据的矢量图层
  88.         var layer = new ol.layer.Vector({
  89.             source: source,
  90.             style: styles           // 图层可以接受一个样式数组作为渲染的样式
  91.         });
  93.         var map = new ol.Map({
  94.             target: ‘map’,
  95.             layers: [
  96.                 layer
  97.             ],
  98.             view: new ol.View({
  99.                 center: [0, 3000000],
  100.                 zoom: 2
  101.             })
  102.         });
  103.     </script>
  104. </body>
  105. </html>

 

禁用鼠标双击缩放事件

 

  1. const dblClickInteraction = map  
  2.         .getInteractions()  
  3.         .getArray()  
  4.         .find(interaction => {  
  5.           return interaction instanceof ol.interaction.DoubleClickZoom;  
  6.         });  
  7. map.removeInteraction(dblClickInteraction);  

本文链接地址: OpenLayers 笔记