本文共 2444 字，大约阅读时间需要 8 分钟。

   
  
    
Openlayers
  
    
    
     
Openlayers??????????????????Web?????
  
    
  
    
    
     
?????Openlayers??????
  
    
  
    
    
     
// ??????
    var map = new ol.Map({
      target: 'map-container',
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 0]),
        zoom: 2
      })
    });
    // ?????
    var vectorSource = new ol.source.Vector({
      wrapX: false
    });
    // ????
    var vectorStyle = new ol.style.Style({
      font: 'Courier New, Arial, sans-serif'
    });
    // ???
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: vectorStyle
    });
    map.addLayer(vectorLayer);
  
    
  
    
    
     
??Openlayers??????????
  
    
  
    
    
     
// ?????
    ol.map.setView({
      center: ol.proj.fromLonLat([0, 0]),
      zoom: 2
    });
    // ????
    new ol.layer.Tile({
      source: new ol.source.OSM()
    });
    // ????
    new ol.layer.Marker({
      coordinate: ol.proj.fromLonLat([0, 0]),
      title: '????'
    });
    // ????
    map.on('click', function(evt) {
      console.log('????:', evt.coordinate);
    });
  
    
  
    
    
     
Openlayers?????????GeoJSON?KML?????????????
  
    
  
    
    
     
// ??GeoJSON??
    var geojsonSource = new ol.source.GeoJSON({
      url: 'data.geojson'
    });
    var geojsonLayer = new ol.layer.GeoJSON({
      source: geojsonSource
    });
    map.addLayer(geojsonLayer);
    // ??KML??
    var kmlSource = new ol.source.KML({
      url: 'data.kml'
    });
    var kmlLayer = new ol.layer.KML({
      source: kmlSource
    });
    map.addLayer(kmlLayer);
  
    
  
    
    
     
Openlayers????????????
  
    
  
    
    
     
      
      
Tile?
      
      
Vector?
      
      
 GeoJSON?
      
      
 KML?
      
      
LayerGroup?
    
     
  
    
  
    
    
     
?????????????????????????
  
    
  
    
    
     
// ??Vector???
    var vectorStyle = new ol.style.Style({
      fill: '#ff0000',
      stroke: '#000000',
      strokeWidth: 2
    });
    // ????
    vectorStyle.set('fill', '#00ff00');
    vectorLayer.setStyle(vectorStyle);
  
    
  
    
    
     
Openlayers ????????????????????
  
    
  
    
    
     
map.on('pointermove', function(evt) {
      console.log('????:', evt.coordinate);
    });
    map.on('click', function(evt) {
      console.log('????:', evt.coordinate);
    });
    map.on('drag', function(evt) {
      console.log('?????:', evt.coordinate);
    });
  
    
  
    
    
     
Openlayers ??????????????????????????????????
  
    
   

转载地址：http://qupfk.baihongyu.com/