1

this is my code script.

  <div id="tool-bar">
    <form class="form-inline">
      <label>Geometry type &nbsp;</label>
      <select id="type">
        <option value="Point">Point</option>
        <option value="LineString">LineString</option>
        <option value="Polygon">Polygon</option>       
        <option value="None" selected="selected">None</option>       
      </select>
    </form>
    </div>
          <div id="map">        
          </div>
    <div id="wrapper">
        <div id="location"></div>        
    <div style="margin-right:5px;margin-top:5px">
    <p id="nodelist">
        <em>Click on the map to get feature info</em>
    </p>
    </div>


         <script type="text/javascript">
            var source = new ol.source.Vector({ wrapX: false });
            var vector = new ol.layer.Vector({
                source: source
            });
            var pureCoverage = false;
            // if this is just a coverage or a group of them, disable a few items,
            // and default to jpeg format
            var format = 'image/png';
            var bounds = [437762.766104487, 4376882.69760637,
                          522118.932880649, 4461344.83731443];
            if (pureCoverage) {
                document.getElementById('filterType').disabled = true;
                document.getElementById('filter').disabled = true;
                document.getElementById('antialiasSelector').disabled = true;
                document.getElementById('updateFilterButton').disabled = true;
                document.getElementById('resetFilterButton').disabled = true;
                document.getElementById('jpeg').selected = true;
                format = "image/jpeg";
            }

            var mousePositionControl = new ol.control.MousePosition({
                className: 'custom-mouse-position',
                target: document.getElementById('location'),
                coordinateFormat: ol.coordinate.createStringXY(5),
                undefinedHTML: '&nbsp;'
            });



            var untiled = new ol.layer.Image({
                source: new ol.source.ImageWMS({
                    ratio: 1,
                    url: 'http://10.3.2.5:8081/geoserver/BaskentGaz/wms',
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.1',
                        STYLES: '',
                        LAYERS: 'BaskentGaz:M_DIZAYN_VANA',
                    }
                })
            });

            var tiled = new ol.layer.Tile({
                visible: false,
                source: new ol.source.TileWMS({
                    url: 'http://10.3.2.5:8081/geoserver/BaskentGaz/wms',
                    params: {
                        'FORMAT': format,
                        'VERSION': '1.1.1',
                        tiled: true,
                        STYLES: '',
                        LAYERS: 'BaskentGaz:M_DIZAYN_VANA',
                        tilesOrigin: 437762.766104487 + "," + 4376882.69760637
                    }
                })
            });

            var projection = new ol.proj.Projection({
                code: 'EPSG:5255',
                units: 'm',
                axisOrientation: 'neu'
            });

            var map = new ol.Map({
                controls: ol.control.defaults({
                    attribution: false
                }).extend([mousePositionControl]),
                target: 'map',
                layers: [
                  untiled,
                  tiled,
                  vector

                ],
                view: new ol.View({
                    projection: projection                   
                })
            });

            map.getView().on('change:resolution', function (evt) {
                var resolution = evt.target.get('resolution');
                var units = map.getView().getProjection().getUnits();
                var dpi = 25.4 / 0.28;
                var mpu = ol.proj.METERS_PER_UNIT[units];
                var scale = resolution * mpu * 39.37 * dpi;
                if (scale >= 9500 && scale <= 950000) {
                    scale = Math.round(scale / 1000) + "K";
                } else if (scale >= 950000) {
                    scale = Math.round(scale / 1000000) + "M";
                } else {
                    scale = Math.round(scale);
                }

            });
            map.getView().fit(bounds, map.getSize());            
            // sets the chosen WMS version
            function setWMSVersion(wmsVersion) {
                map.getLayers().forEach(function (lyr) {
                    lyr.getSource().updateParams({ 'VERSION': wmsVersion });
                });
                if (wmsVersion == "1.3.0") {
                    origin = bounds[1] + ',' + bounds[0];
                } else {
                    origin = bounds[0] + ',' + bounds[1];
                }
                tiled.getSource().updateParams({ 'tilesOrigin': origin });
            }
            // Tiling mode, can be 'tiled' or 'untiled'
            function setTileMode(tilingMode) {
                if (tilingMode == 'tiled') {
                    untiled.set('visible', false);
                    tiled.set('visible', true);
                } else {
                    tiled.set('visible', false);
                    untiled.set('visible', true);
                }
            }
            function setAntialiasMode(mode) {
                map.getLayers().forEach(function (lyr) {
                    lyr.getSource().updateParams({ 'FORMAT_OPTIONS': 'antialias:' + mode });
                });
            }
            // changes the current tile format
            function setImageFormat(mime) {

                map.getLayers().forEach(function (lyr) {
                    lyr.getSource().updateParams({ 'FORMAT': mime });
                });
            }

            function setStyle(style) {
                map.getLayers().forEach(function (lyr) {
                    lyr.getSource().updateParams({ 'STYLES': style });
                });
            }

            function setWidth(size) {
                var mapDiv = document.getElementById('map');
                var wrapper = document.getElementById('wrapper');

                if (size == "auto") {
                    // reset back to the default value
                    mapDiv.style.width = null;
                    wrapper.style.width = null;
                }
                else {
                    mapDiv.style.width = size + "px";
                    wrapper.style.width = size + "px";
                }
                // notify OL that we changed the size of the map div
                map.updateSize();
            }

            function setHeight(size) {
                var mapDiv = document.getElementById('map');
                if (size == "auto") {
                    // reset back to the default value
                    mapDiv.style.height = null;
                }
                else {
                    mapDiv.style.height = size + "px";
                }
                // notify OL that we changed the size of the map div
                map.updateSize();
            }

            function updateFilter() {
                if (pureCoverage) {
                    return;
                }
                var filterType = document.getElementById('filterType').value;
                var filter = document.getElementById('filter').value;
                // by default, reset all filters
                var filterParams = {
                    'FILTER': null,
                    'CQL_FILTER': null,
                    'FEATUREID': null
                };
                if (filter.replace(/^\s\s*/, '').replace(/\s\s*$/, '') != "") {
                    if (filterType == "cql") {
                        filterParams["CQL_FILTER"] = filter;
                    }
                    if (filterType == "ogc") {
                        filterParams["FILTER"] = filter;
                    }
                    if (filterType == "fid")
                        filterParams["FEATUREID"] = filter;
                }
                // merge the new filter definitions
                map.getLayers().forEach(function (lyr) {
                    lyr.getSource().updateParams(filterParams);
                });
            }

            function resetFilter() {
                if (pureCoverage) {
                    return;
                }
                document.getElementById('filter').value = "";
                updateFilter();
            }
            // shows/hide the control panel
            function toggleControlPanel() {
                var toolbar = document.getElementById("toolbar");
                if (toolbar.style.display == "none") {
                    toolbar.style.display = "block";
                }
                else {
                    toolbar.style.display = "none";
                }
                map.updateSize()
            }

            var typeSelect = document.getElementById('type');
            var draw;
            // global so we can remove it later
            function addInteraction() {
                var value = typeSelect.value;
                if (value !== 'None') {
                    $("#custom_widget").css("display", "none");
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
                    })                    
                    map.addInteraction(draw);
                    draw.on('drawend', function (e) {

                        var writer = new ol.format.GeoJSON();
                        //pass the feature as an array
                        var geojsonStr = writer.writeFeatures([e.feature]);                       
                        var x = JSON.parse(geojsonStr);
                        var pType = x['features'][0]['geometry']['type'];
                        var pCoordinate = x['features'][0]['geometry']['coordinates'];

                        $.ajax({
                            type: "POST",
                            url: "WebService.asmx/insertdraw",
                            data: "{ pType: '" + pType + "',pCoordinate: '" + pCoordinate + "'}",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: function (r) {
                                vector.getSource().clear();
                            },
                            error: function (r) {
                                alert(r.responseText);
                            },
                            failure: function (r) {
                                alert(r.responseText);
                            }
                        });                                                
                    });

                }

                if (value == 'None') {
                    $("#custom_widget").css("display", "inline");
                    map.on('singleclick', function (evt) {
                        document.getElementById('nodelist').innerHTML = "Loading... please wait...";
                        var view = map.getView();
                        var viewResolution = view.getResolution();
                        var source = untiled.get('visible') ? untiled.getSource() : tiled.getSource();
                        var url = source.getGetFeatureInfoUrl(
                          evt.coordinate, viewResolution, view.getProjection(),
                          { 'INFO_FORMAT': 'application/json', 'FEATURE_COUNT': 50 });                       
                        if (url) {
                            var xhttp = new XMLHttpRequest();
                            xhttp.onreadystatechange = function () {
                                if (this.readyState == 4 && this.status == 200) {

                                    var jsonResponse = JSON.parse(this.responseText);
                                    if (jsonResponse != null) {
                                        document.getElementById('nodelist').innerHTML = this.responseText;
                                        var myJson = JSON.parse(this.responseText);

                                        //alert("TABLO ADI:" + myJson["features"][0]["properties"]["TABLO_ADI"] + " \n" + "ID:" + myJson["features"][0]["properties"]["ID"]);

                                        $.ajax({
                                            type: "POST",
                                            url: "WebService.asmx/getData",
                                            data: "{ pID: '" + myJson["features"][0]["properties"]["ID"] + "'}",
                                            contentType: "application/json; charset=utf-8",
                                            dataType: "json",
                                            success: function (r) {
                                                var js = JSON.parse(r.d);
                                                //alert(js["ID"] + "\n" + js["MAHALLE_SOKAK_KODU"] + "\n" + js["BASINC_TIP_ID"] + "\n" + js["BASINC_SINIF_ID"] + "\n" + js["VANA_TUR"] + "\n" + js["VANA_CAP"] + "\n" + js["VANA_AMAC_ID"] + "\n" + js["HARITA_DURUM_ID"] + "\n" + js["MUNFERITLIK_ID"] + "\n" + js["PROJE_NO"] + "\n" + js["CIZIM_YAPAN_ID"] + "\n" + js["CIZIM_TARIH"] + "\n" + js["SAP_MALZEME_KODU"] + "\n" + js["SAP_ISCILIK_KODU"] + "\n" + js["KAYIT_BILGISI"]);
                                                $('#ID').val(js["ID"]);
                                                $('#MAHALLE_SOKAK_KODU').val(js["MAHALLE_SOKAK_KODU"]);
                                                $('#BASINC_TIP_ID').val(js["BASINC_TIP_ID"]);
                                                $('#BASINC_SINIF_ID').val(js["BASINC_SINIF_ID"]);
                                                $('#VANA_TUR').val(js["VANA_TUR"]);
                                                $('#VANA_CAP').val(js["VANA_CAP"]);
                                                $('#VANA_AMAC_ID').val(js["VANA_AMAC_ID"]);
                                                $('#HARITA_DURUM_ID').val(js["HARITA_DURUM_ID"]);
                                                $('#MUNFERITLIK_ID').val(js["MUNFERITLIK_ID"]);
                                                $('#PROJE_NO').val(js["PROJE_NO"]);
                                                $('#CIZIM_YAPAN_ID').val(js["CIZIM_YAPAN_ID"]);
                                                $('#CIZIM_TARIH').val(js["CIZIM_TARIH"]);
                                                $('#SAP_MALZEME_KODU').val(js["SAP_MALZEME_KODU"]);
                                                $('#SAP_ISCILIK_KODU').val(js["SAP_ISCILIK_KODU"]);
                                                $('#KAYIT_BILGISI').val(js["KAYIT_BILGISI"]);

                                            },
                                            error: function (r) {
                                                alert(r.responseText);
                                            },
                                            failure: function (r) {
                                                alert(r.responseText);
                                            }
                                        });
                                    }
                                }
                            };
                            xhttp.open("GET", url, true);
                            xhttp.send();
                        }                                              
                    });                                       
                }
            }
            /**
             * Handle change event.
             */
            typeSelect.onchange = function () {
                map.removeInteraction(draw);
                addInteraction();
            };
            addInteraction();
            //when draw end, it is called.        
            function readSourceAfterEachDraw() {
                var format = new ol.format.GeoJSON();
                var allFeatures = source.getFeatures();
                var routeFeatures = format.writeFeatures(allFeatures);                       
                alert(routeFeatures);
            }                     
        </script>
        </div>
1
draw.on('drawend', function (e) {
 (1)   vector.getSource().clear(); // that clear related vector.
 (2)  map.updateSize();   /*Force a recalculation of the map viewport size. This 
    should be called when third-party code changes the size of the map viewport*/      
});

second line is adequate to be showed changes on map.

Not the answer you're looking for? Browse other questions tagged or ask your own question.