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>

closed as unclear what you're asking by BBG_GIS, lynxlynxlynx, whyzar, Andre Silva, mgri Dec 9 '17 at 17:04

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

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.