Openlayers Script

Load Image WMS

//mapserver ms4w<br />layer = new ol.layer.Image({
	title: 'layer', 
	baseLayer: true,
    source: new ol.source.ImageWMS({
      url: 'http://localhost:82/cgi-bin/mapserv.exe?map=C:/ms4w/file.map&',
      params: {
            'LAYERS': 'layer',
            'TRANSPARENT': true,
            'FORMAT': 'image/png',
            'TILED': true
      },
      serverType: 'mapserver',
      projection: 'EPSG:4326'
    })
});

Load GeoJSON

var source_ = new ol.source.Vector({<br />  url: 'build/geojson/aerial/json/display.geojson',
  format: new ol.format.GeoJSON()
})

//style color<br />var style_ = function(feature,resolution) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: 'rgba(254, 254, 254, 1)',
      width: 0.5
    }),
    fill: new ol.style.Fill({
      color: 'rgba(0, 190, 0, 0.3)'
    })
  });
};<br /><br />//sytle berdasarkan data feature<br />var style_data = function(feature,resolution) {
  return new ol.style.Style({
    stroke: new ol.style.Stroke({
      color: feature.getProperties().IDENTIFIED == null ?  'TRANSPARENT' :  'rgba(19, 71, 191, 0.8)',
      width: 3
    }),
    fill: new ol.style.Fill({
      color: 'TRANSPARENT'
    })
  });
};<br />

var layer = new ol.layer.Vector({
    title: 'Vector',
    source: source_,<br />    style: style_
});<br /><br />//waiting geojson<br />listenerKey = source_.on('change', function() {
    if (source_.getState() == 'ready') {
      ol.Observable.unByKey(listenerKey);
    }
 });

Pengaturan Map Openlayers

//Switch Layer<br />var baseLayers = new ol.layer.Group({
    title: 'Base Layers',
    openInLayerSwitcher: true,
    layers: [osm]
});<br /><br />//Switch Layer<br />var layer_group = new ol.layer.Group({
    title: 'Landuse',
    openInLayerSwitcher: false,
    layers: [layer1,layer2]
});

var fullscreen = new ol.control.FullScreen();
var layers = [baseLayers,layer_group];
var control = ol.control.defaults().extend([fullscreen]);

var popup = new ol.Overlay.Popup (
{ 
    popupClass: "default anim",
    closeBox: true,
    onclose: function(){ console.log("You close the box"); },
    positioning: 'auto',
    autoPan: true,
    autoPanAnimation: { duration: 100 }
});

map = new ol.Map({
    layers: layers,
    target: 'map',
    controls: control,
    overlays: [popup],
    // interactions : interactions,
    view: new ol.View({
      center:ol.proj.transform([102.343332,-0.22325], 'EPSG:4326', 'EPSG:3857') ,
      zoom: 15
    })
});