openlayers基础

地图的组成

1. 地图是由控件、标注、矢量图形、图层等组成的，可以理解为ps对一个图片的操作
2. 一个地图可以有多个图层，图层上放置的是数据源，一个图层对应一个数据源，数据源放置要素，一个数据源可以有多个要素，要素包括了地理信息和样式信息

快速起步

• 引入ol和样式

  • <link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css">
    <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>

• 初始化地图

  • const gaode = new Layer.Tile({
        title: '高德地图',
        source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
        })
    })
    
    const map = new ol.Map({
        target: "map",
        layers: [
            gaode
        ],
        view: new ol.View({
            center: [114.30, 30.50],
            zoom: 18,
            projection: 'EPSG:4326'
        })
    })

  • target：指定挂在的元素
  • layers：地图需要加载的图层，可以设置多个图层
  • view 设置视图（显示的范围），center设置视图的中心点，zoom代表放大级别
  • EPSG:4326地理坐标系（经纬度来表示）EPSG:3857墨卡托坐标系（以米为单位）
  • 需要注意的是，必须在挂在元素渲染以后，才可以对地图进行实例化， 否则渲染不出来

地图控件

地图控件是应用程序或网站中用于显示和交互地理信息的组件，使用户能够查看、操作地图，并展示特定的地理信息。

视图跳转控件

extent 跳转可显示的范围

const zoomToExtent = new ol.control.ZoomToExtent({
    extent: [110, 30, 160, 30]
});

 放大缩小控件

const zoomSlider = new ol.control.ZoomSlider();

 全屏控件

const fullScreen = new ol.control.FullScreen();

添加控件

map.addControl('控件');

 

 绘制要素

要素包含几何信息和样式信息

创建几何信息

const point = new ol.Feature({
    geometry: new ol.geom.Point([114.30, 30.50])
})

 创建样式信息

• const style = new ol.style.Style({
      image: new ol.style.Circle({
          radius: 10,
          fill: new ol.style.Fill({
              color: '#ff2d15'
          }),
          stroke: new ol.style.Stroke({
              width: 2,
              color: '#000'
          })
      })
  })

  • radius：圆点的半径，单位是deg

  • fill：圆点的颜色

  • stroke：圆点的边框

要素的类型

• Point：点
• LineString：线
• Polygon：面
• MultiPoint：点集合

  • const multiPoint = new ol.Feature({
        geometry: new ol.geom.MultiPoint([[114.3, 30.5], [114.4, 30.6]])
    });

• MultiLineString

  • const multiLineString = new ol.Feature({
        geometry: new ol.geom.MultiLineString([
            [[114.3, 30.5], [115.3, 31.5]],
            [[114.5, 30.2], [115.1, 30.8]]
        ])
    });

• MultiPolygon：面集合

  • // 创建第一个多边形
    const polygon1 = new ol.geom.Polygon([
        [[114.2, 30.4], [114.3, 30.4], [114.3, 30.5], [114.2, 30.5], [114.2, 30.4]]
    ]);
    // 创建第二个多边形
    const polygon2 = new ol.geom.Polygon([
        [[114.4, 30.6], [114.5, 30.6], [114.5, 30.7], [114.4, 30.7], [114.4, 30.6]]
    ]);
    // 使用上面创建的两个多边形来创建一个多边形集合
    const multiPolygon = new ol.geom.MultiPolygon([polygon1.getCoordinates(), polygon2.getCoordinates()]);

加载geojson数据

构造指定的geojson数据，通过改变features中的type来指定绘制的要素

const data = {
    type: "FeatureCollection",
    features: [
        {
            type: "Feature",
            geometry: {
                type: "Polygon",
                coordinates: [[[114.30, 30.50], [116, 30.50], [116, 30]]]
            }
        }
    ]
}