文件引入

<script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol.js"></script>

HTML

<div id="container" style="height: 100vh;"></div>

初始化

// 地图瓦片资源
let source = new ol.source.XYZ();
source.setUrl("tiles/{z}/{y}/{x}.png");

// 地图初始化
let map = new Map({
    // html元素
  target: 'container',
  layers: [
    // 加载地图瓦片
    new Tile({
      source: source
    })
  ],
  view: new View({
    // 设置中心点
    center: [98.61, 37.94],
    // 切换百度坐标系
    projection: 'EPSG:4326',
    zoom: 5
  })
});

绘制多个不同样式点

let data = [
    {
      longitude: 96,
      latitude: 35,
      num: 1
    },
    {
      longitude: 102,
      latitude: 35,
      num: 10
    }
  ]
// 创建矢量层
let vectorSource = new ol.source.Vector({});
for (let i in data) {
  let r = data[i]
  let point = [r.longitude, r.latitude]
  let iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(point),
    data: r
  });
  // 将图标特性添加进矢量中
  vectorSource.addFeature(iconFeature);
}
let layer = new ol.layer.Vector({
  source: vectorSource,
  // 创建图标样式
  style: (d) => {
    // 循环时写入的数据
    let r = d.get('data')
    return new ol.style.Style({
      image: new ol.style.Icon({
        src: "images/icon.png"
      }),
      text: new ol.style.Text({
        font: '12px',
        fill: new ol.style.Fill({
          color: '#fff',
        }),
        text: r.num + '',
        // offsetY: '-10',
      }),
    });
  },
});
// 将矢量层添加进map层
map.addLayer(layer);

删除指定矢量层

map.removeLayer(layer);

绘制多条不同样式线

let roadSource = new ol.source.Vector({});
  // 值为number类型
  let data = [
    [
      [98, 37],
      [99, 38],
      [100, 38.5],
    ],
    [
      [88, 37],
      [87, 38],
      [86, 38.5],
    ]
  ]
  for (let i in data) {
    let lineFeature = new ol.Feature({
      geometry: new ol.geom.LineString(data[i]),
      name: i
    });
    roadSource.addFeature(lineFeature);
  }
  let lines = new ol.layer.Vector({
    source: roadSource,
    style: (d) => {
      return new ol.style.Style({
        stroke: new ol.style.Stroke({
          width: 8,
          color: d.get('name') == 0 ? 'blue' : 'red',
        }),
      })
    }
  });
  map.addLayer(lines);

绘制闭合区域

//绘制区域
let data = [
  [126, 45],
  [116, 65],
  [156, 55],
]
let styles = {
  Polygon: [new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(255,255,255,.5)',
      lineDash: [0],
      width: 1
    }),
    fill: new ol.style.Fill({
      color: 'rgba(255,255,255,.3)'
    })
  })],
};
//区域
let features = [{
    type: 'Feature',
    geometry: {
        type: 'Polygon',
        coordinates: [data],
    }
}]

let geojsonObject = {
  type: 'FeatureCollection',
  crs: {
    type: 'name',
  },
  features: features
};
let vectorSource = new ol.source.Vector({
  features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
let styleFunction = function (feature) {
  return styles[feature.getGeometry().getType()];
};
let layer = new ol.layer.Vector({
  source: vectorSource,
  style: styleFunction,
});
map.addLayer(layer)