ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ Fakulta Stavební Katedra mapování a kartografie

SEMESTRÁLNÍ PROJEKT Webová aplikace pro efektivnější vyhledávání realit

skupina F Praha květen 2012

Webová aplikace pro efektivnější vyhledávání realit

2012

Vedoucí semestrálního projektu:

Ing. Martin Landa

Autoři semestrálního projektu:

Filip Zavadil Kateřina Jarošová Eva Linhartová Markéta Sedláčková

2


2012

Obsah Úvod ..................................................................................................................................................... 4 1

Zdroj dat........................................................................................................................................ 5

2

Náplň databáze ............................................................................................................................. 5

3

Popis aplikace ............................................................................................................................... 6

4

Zájmové body ............................................................................................................................... 8

5

Publikování mapové služby......................................................................................................... 10

6

Vývoj aplikace a postup práce .................................................................................................... 10

7

Závěr ........................................................................................................................................... 13

8

Zdroje .......................................................................................................................................... 13

9

Skripty ......................................................................................................................................... 14

3


2012

Úvod Vytvoření webové aplikace, která bude sloužit pro efektivnější vyhledávání realit. Jako mapové podklady budou použita data OpenStreetMap, která obsahují zájmové body např (lékař, škola). Tyto zájmové body umožní uživateli lépe filtrovat výsledky vyhledávání. Dalším vyhledávacím kritériem bude vzdálenost, max. vzdálenost od zájmových bodů. Výsledkem vyhledávání bude přehled realit vyhovující podmínkám nastavených uživatelem. Informace o realitách budou obsahovat údaje o vzdálenostech od např. 3 nejbližších škol, vzdálenost od zastávek hromadné dopravy a dalších zájmových bodů. Bude využit ArcGIS Server a ArcGIS Java-Script API, případně ještě jiný JavaScript framework.

Výběr tématu naší aplikace byl odvíjen od situace, ve které se spousta mladých lidí v dnešní době nachází a to výběr bydlení. Téma nám je blízké a věříme, že hledání realit v určité vzdálenosti od zájmových bodů je velké zpříjemnění pro uživatele aplikace. Tu jsme se snažili vytvořit velice intuitivní a jednoduchou pro všechny uživatele.

4


1

2012

Zdroj dat Data poskytla realitní kancelář Dům realit dostupný na http://dumrealit.cz/ . Použitá data

slouží pouze k ukázce funkčnosti aplikace a tudíž nejsou aktuální. Data pokrývají pouze území hlavního města Prahy.

Zdrojem zájmových bodů byla data OpenStreetMap dostupný na http://www.openstreetmap.org/.

2

Náplň databáze Databáze realit byla plněna ručně, tedy všechny informace a fotky byly stahovány ze serve-

ru Dům realit. Data byla ukládána prakticky systematicky, bylo dodržováno pravidlo, aby domy a byty byly rozmístěny po celé Praze. Také pak, aby databáze obsahovala jak pronájem, tak prodej realit.

Po naplnění databáze byla data exportována do aplikace ArcMap a uložena do geodatabáze funkcí AddXY.

Ukázka struktury: CREATE TABLE nemovitosti ( id INT PRIMARY KEY AUTO_INCREMENT, url VARCHAR(256) NOT NULL, -- http:// …... druh VARCHAR(10) NOT NULL, -- byt, dum typ VARCHAR(10) NOT NULL, -- prodej, pronajem velikost VARCHAR(10), -- 1+kk, 3+1 … plocha DOUBLE NOT NULL, -- 64 , udavano v m3 mesto VARCHAR(256) NOT NULL, -- Praha 1 ulice VARCHAR(256) NOT NULL, -- Pobřežní 21 budova VARCHAR(256) NOT NULL, -- zděná, panelák vlastnictvi VARCHAR(256) NOT NULL, -- osobní GPSlon DOUBLE NOT NULL, -- delka v dekadickem tvaru GPSlat DOUBLE NOT NULL, -- sirka v dekadickem tvaru cena INTEGER NOT NULL, -- 64000 , udavano v CZK popis TEXT NOT NULL, poznamka TEXT

);

5


3

2012

Popis aplikace Webová aplikace slouží k vyhledávání nemovitostí na území Prahy podle těchto kritérií:  Městská část: Praha 1 / Praha 2 / Praha 10  Nabídka: nerozhoduje / prodej / pronájem  Nemovitost: nerozhoduje / dům / byt  Velikost: 1kk / 1+1 / 2+1 / ...  Plocha: [m2]  Cena: [Kč]  Vlastnictví: nerozhoduje / osobní / družstevní  Budova: nerozhoduje / cihlová / panelová / montovaná / dřevěná  Zájmový bod, kde uživatel vybere typ zájmového bodu (škola, lékař, …) a zadá vzdálenost [m2], do které by se měla nacházet realita.

Po zadání parametrů se vyhledají vyhovující nemovitosti, které jsou vypsány v pravé části obrazovky. V mapovém okně je na tyto reality přiblíženo a jsou zvýrazněny symbolem kresleného

domečku.

Po vybrání jedné z položek se otevře v aplikaci nový panel s podrobnostmi

reality a zároveň je na ni přiblíženo. Součástí informací o realitě jsou i fotografie, které se po kliknutí na odkaz zobrazí v plné velikosti v prohlížeči fotografií.

Obr. 1: Výběr realit podle městské části.

6


2012

Název a popis reality.

Vzdálenost k zájmovým bodům

Fotografie reality Obr. 2: Detail vyhledané nemovitosti.

7


4

2012

Zájmové body Zájmovými body se v naší aplikaci rozumí místa, v jejichž blízkosti je bydlení tzv.

příjemnější. Mnoho lidí si v dnešní době hledá byt či dům právě podle těchto zájmových bodů, jakými jsou např. lékaři, školy, ale i restaurace a kavárny.

Typy zájmových bodů a jejich symbologie:

8


2012

Data byla pomocí pluginu OpenStreetMap loader importována do geodatabáze v prostředí ArcGIS Desktop. Byla provedena jejich kontrola a editace formou atributových dotazů a nepotřebná data byla smazána (letiště, poštovní schránky, …). Symbologie zájmových bodů byla vytvořena v souladu s kartografickými pravidly v software AcrMap 10. Legenda je uvedena výše.

9


5

2012

Publikování mapové služby Součástí mapového dokumentu je vizualizace vrstvy „reality“ a „zájmové body“. Projekt

byl následně uložen ve formátu *.msd pomocí funkce Save Map Service Definition. Formát .msd je výhodný pro optimalizaci mapového dokumentu při publikování služby na ArcGIS Server 10 Enterprise.

Aplikace je dostupná na http://geo1.fsv.cvut.cz/pin2/2012/f/. Mapová služba byla vypublikována v serverovém prostředí ArcGIS Server Manager, který je určený pro administraci mapového serveru.

ArcGIS Server APIs Spolu s ArcGIS Serverem jsou dodávány i komplexní vývojové nástroje pro webové a mobilní platformy, které výrazně usnadňují tvorbu vlastních řešení. ArcGIS Server nabízí otevřenou platformou pro vývoj vlastních GIS aplikací s využitím moderních technologií jako jsou Java, .NET, Microsoft Silverlight, JavaScript a Adobe Flex. Možná je i integrace do aplikací založených na technologii Microsoft Sharepoint.

Vývojová rozhraní pro webové mapové aplikace Pro vývoj webových aplikací jsou k dispozici klientská aplikační prostředí Web API pro JavaScript, Flex a Silverlight. Integraci webových služeb GIS do komplexních informačních systémů pak umožňují standardizovaná rozhraní webových služeb ArcGIS Serveru (SOAP, REST a OGC).

6

Vývoj aplikace a postup práce Aplikace využívá tyto JavaScript knihovny:  ArcGIS JavaScript API - rozhraní pro definování webové mapy a pro její ovládání  ExtJS 4 - knihovna pro definici uživatelského rozhraní (panelů, oken, tlačítek, ...)  Dojo - GUI knihovna, se kterou ArcGIS JS API imlicitně pracuje  LightBox 2 - knihovna pro zobrazování fotografií

10


2012

Pro grafické uživatelské rozhraní byl zvolen JavaScript Framework ExtJS4, který je volně použitelný, pokud je výsledný projekt v souladu s jeho licenčními podmínkami. V aplikaci byly použity prvky jako panel, okno, tabulka, tlačítko. Jednotlivá prostředí prvků byla definována pomocí JavaScriptu. Díky této technologii byla zaručena jak interaktivita, tak dynamičnost celé aplikace. Grafické rozhraní by mělo pomoci uživateli lépe se orientovat při vyhledávání a výběru nemovitosti.

Dále je bodově uveden postup práce. index.html 

kód ve funkci init() je vykonán ihned při načítání stránky a obsahuje zejména definici mapového podkladu: o

vytvoření “extentu”, zájmová část Praha

o

zvolení referenčního systému webMercator (wkid:102100)

o

využití služby ArcGISTiledMapServiceLayer a přidána základní mapa, služba je dostupná na: http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer Základní mapa (Topografic Map) je poskytovaná zdarma pro uživatele ArcGIS.

o 

přidání vrstvy realit a zájmových bodů službou ArcGISDynamicMapServiceLayer

definovány fuknce pro identifikaci a dotazování o

function dotazovani() nastavení parametrů výstupu, odkazu na odtazovanou službu a příslušnou vrstvu a atributy, na které se dotazování má vztahovat

o

function execute(query) funkce, která vykoná dotaz, po vykonání dotazu a obdržení odpovědi se asynchronně vykoná funkce showResults(results)

o

function showResults(results) - funkce se automaticky vykonává po obrdžení odpovědi po vykonání dotazu - jsou zde použity parametry, které se nesou v odpovědi z dotazu - obdržené informace se zde formátují do konečného HTML kódu pro vizualizaci

11


o

2012

function mapReady(map) definování chování pro identifikaci prvků (co se má provést, pokud se klikne do mapy - je volána funkce executeIdentifyTask(evt) )

o

function executeIdentifyTask(evt) rozponaní prvku a formátování výstupu

GUI.js JS je soubor, kde je definováno uživatelské rozhraní využitím frameworku ExtJS4.

Jsou zde použity zejména tyto prvky: 

Ext.container.Viewport



Ext.panel.Panel



Ext.tab.Panel



Ext.form.Label



Ext.button.Button



Ext.form.ComboBox'



Ext.grid.Panel

vyhledavani.js Okno s vytvářením dotazu je definováno v tomto souboru. Jsou zde ošetřeny vstupní parametry a také vytvořen SQL dotaz (function createQuery), dle kterého se výsledky filtrují. Pro tvorbu GUI bylo využito frameworku ExtJS.

Obr. 4: Okno „zadej dotaz“.

12


2012

vysledky.js Odpověď dotazu je formátována právě skriptem v tomto souboru. Jednotlivé relity jsou přidávány jako řádky do datagridu, který se objevuje v pravé části aplikace. Je zde možné řadit jednotlivé atributy podle hodnot (vzestupně, sestupně, dle abecedy ...).

function feedBig(data) Po kliknutí na nemovitost jak v mapě či v datagridu je zavolána tato funkce, která načte data příslušné nemovitosti a zformátuje je do HTML kódu. Je vytvořena nová záložka, která obsahuje informace o příslušné nemovitosti.

photo.php Script, který je prováděn na straně serveru. Jako vstupní parametr je ID nemovitosti. Fotky jsou uložené na filesystemu a název adresáře odpovídá právě ID nemovitosti. Dále jsou nalezeny soubory v adresáři, vytvořen “kus” kódu HTML, pro zobrazování fotografií je použita knihovna lightbox 2. Script je z JavaScriptu volán metodou AJAX.

7

Závěr Při práci na tomto projektu jsme byli seznámeni s ArcGIS Serverem a vývojem takovéto ap-

likace. Naše webová aplikace pro efektivnější vyhledávání realit je dostupná pod všemi majoritními internetovými prohlížeči online na http://geo1.fsv.cvut.cz/pin2/2012/f/. Při navrhování uživatelského prostředí byl kladen důraz, aby aplikace byla pro uživatele jednoduchá a práce s ní příjemná.

8

Zdroje 

Dům realit



ArcGIS Server

http://dumrealit.cz/

http://www.arcdata.cz/produkty-a-sluzby/software/arcgis/serverova-reseni-esri/arcgis-server-apis/



OpenStreetMap http://www.openstreetmap.org/

V Praze dne 28.5.2012

skupina F

13


9

2012

Skripty

index.html <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"> <script type="text/javascript">var dojoConfig = {parseOnLoad: true}; <script type="text/javascript" src="http://cookbook.filipzava.cz/libs/ExtJS/extall-debug.js"> <script type="text/javascript" src="GUI.js"> <script type="text/javascript" src="vyhledavani.js"> <script type="text/javascript" src="vysledky.js"> <script src="js/jquery-1.7.2.min.js"> <script src="js/lightbox.js"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{ padding: 20px 20px; } #map{ padding:0; } #mapa { width: 100%; height: 100%; } #header {background-color: #dfe8f6} #footer {background-color: #dfe8f6} #titul {background-color: white} #legend {background-color: white} #lupaImg {background-image: url('images/lupa.jpeg'); width: 259px; height: 194px; border: 0; margin: 0; padding: 0; float: right;} /* .titul {background-color: #dfe8f6;border: 1px solid black;} */ Vyhledavání realit <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.tasks.find"); dojo.require("esri.map"); dojo.require("esri.graphic"); dojo.require("esri.dijit.Popup"); dojo.require("esri.tasks.geometry"); dojo.require("esri.dijit.Legend"); var map; var identifyTask,identifyParams; var legendLayers = []; function init() {

14


2012

//setup the popup window pro identifikaci var popup = new esri.dijit.Popup({ fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])) }, dojo.create("div")); var initExtent = new esri.geometry.Extent({"xmin":1579898.4692263813,"ymin":6433181.305441205,"xmax": 1645481.439494974,"ymax":6484164.80330735,"spatialReference":{"wkid":102100}}); map = new esri.Map("mapa",{infoWindow:popup,extent:initExtent}); var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer" var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL); map.addLayer(basemap); var imageParameters = new esri.layers.ImageParameters(); imageParameters.format = "png24"; var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://geo1.fsv.cvut.cz/ArcGIS/rest/se rvices/pin2/2012-F-REALITY/MapServer"); legendLayers.push({layer:dynamicMapServiceLayer,title:' '}); dojo.connect(map,'onLayersAddResult',function(results){ //add the legend var legend = new esri.dijit.Legend({ map:map, layerInfos:legendLayers, arrangement:esri.dijit.Legend.ALIGN_LEFT },"legend"); legend.startup(); }); map.addLayers([dynamicMapServiceLayer]); dojo.connect(map, 'onLoad', function(theMap) { dojo.connect(dijit.byId('mapa'), 'resize', map,map.resize); }); dojo.connect(map,"onLoad",mapReady); dotazovani(); } dojo.addOnLoad(init);

15


2012

Reality pod lupou

Tato aplikace byla vytvořena v rámci předmětu Projekt informatika 2 na magisterském studiu Stavební fakulty ČVUT v Praze oboru Geoinformatika.

Aplikace slouží k vyhledávání nemovitostí v rámci Prahy. Po stisknutí tlačítka zadat dotaz ! je možné uživatelem zadat přesné požadavky pro vyhledávání.

Data nemovitostí nám pro tento projekt poskytl Dům realit. Uvedená nabídka realit není aktuální a slouží spíše pro ukázku funkčnosti aplikace.

Tento projekt zpracovala skupina F složená z:

Filipa Zavadila
Kateřiny Jarošové
Evy Linhartové
Markéty Sedláčkové

Copyright© 2011-2012 OpenStreetMap, skupina F
Kontakt: filip.zavadil@fsv.cvut.cz, marketa.sedlackova@fsv.cvut.cz, eva.linhartova@fsv.cvut.cz, katerina.jarosova@fsv.cvut.cz

<script type="text/javascript"> // globalni promenne var findTask, findParams; // inicializace promennych pro vytvareni dotazu nad realitami function dotazovani(){ findTask = new esri.tasks.FindTask("http://geo1.fsv.cvut.cz/ArcGIS/rest/services/pin2/2012-FREALITY/MapServer"); findParams = new esri.tasks.FindParameters(); findParams.returnGeometry = true; findParams.layerIds = [0]; findParams.searchFields = ["url","druh","typ","vlastnictv","plocha"]; } // provádění dotazu function execute(query) { //set the search text to find parameters var definice=[]; definice[0]=query; findParams.layerDefinitions = definice;

16


2012

findParams.searchText = "."; findTask.execute(findParams, showResults); // showResults f-ce se zavolá pokud server vratí výsledek } function showResults(results) { // pole pro zapis souradnic delka/sirka vsech vyhledanych bodů var lon= new Array(); var lat= new Array(); // symboly //symbology for graphics var markerSymbol = new esri.symbol.PictureMarkerSymbol('http://icons.iconseeker.com/png/fullsize/smurfhouses/smurf-house-exterior.png', 25, 25); //find results return an array of findResult. map.graphics.clear(); myData= new Array(); // pro kazdy prvek ... dojo.forEach(results, function(result) { // pridani symbolu var graphic = result.feature; graphic.geometry=esri.geometry.geographicToWebMercator(graphic.geometry); graphic.setSymbol(markerSymbol); map.graphics.add(graphic); // end pridani symbolu var out=result.feature.attributes; myData.push([out.mesto,out.ulice,out.typ,out.druh,out.plocha,out.cena,out.velikost,o ut.vlastnictvi,out.budova,out.id,out.GPSlon,out.GPSlat,out.poznamka,out.popis,ou t.url,out.cinema_NAME,out.cinema_dist,out.cinema_GPSlon,out.cinema_GPSlat,out.ho spital_NAME,out.hospital_dist,out.hospital_GPSlon,out.hospital_GPSlat]); lon.push(result.feature.geometry.x) lat.push(result.feature.geometry.y) }); lon=lon.sort(); lat=lat.sort(); var extent = new esri.geometry.Extent({"xmin":lon[0]-1000,"ymin":lat[0]1000,"xmax":lon[lon.length-1]+1000,"ymax":lat[lat.length1]+1000,"spatialReference":{"wkid":102100}}); map.setExtent(extent) feed(); } // definovani chovani pro identifikaci prvku na mape function mapReady(map){ // propojení signálů dojo.connect(map,"onClick",executeIdentifyTask); //create identify tasks and setup parameters identifyTask = new esri.tasks.IdentifyTask("http://geo1.fsv.cvut.cz/ArcGIS/rest/services/pin2/2012F-REALITY/MapServer"); identifyParams = new esri.tasks.IdentifyParameters(); identifyParams.tolerance = 10; identifyParams.returnGeometry = true; identifyParams.layerIds = [0,1]; identifyParams.layerOption = esri.tasks.IdentifyParameters.LAYER_OPTION_ALL; identifyParams.width = map.width;

17


2012

identifyParams.height = map.height; } // kod se vykonava po kliknuti mysi do mapy function executeIdentifyTask(evt) { identifyParams.geometry = evt.mapPoint; identifyParams.mapExtent = map.extent; var deferred = identifyTask.execute(identifyParams); deferred.addCallback(function(response) { // response is an array of identify result objects // Let's return an array of features. return dojo.map(response, function(result) { var feature = result.feature; feature.attributes.layerName = result.layerName; if(result.layerName === 'reality'){ var out=feature.attributes; console.log(out); myData= new Array(); myData.push([out.mesto,out.ulice,out.typ,out.druh,out.plocha,out.cena,out.velikost,o ut.vlastnictvi,out.budova,out.id,out.GPSlon,out.GPSlat,out.poznamka,out.popis,ou t.url,out.cinema_NAME,out.cinema_dist,out.cinema_GPSlon,out.cinema_GPSlat,out.ho spital_NAME,out.hospital_dist,out.hospital_GPSlon,out.hospital_GPSlat]); storeVys.loadData(myData,false); feedBig(storeVys.getAt(0)); } if(result.layerName === 'zajmove_body'&& map.getLevel()>15){ var out=feature.attributes; var STRhtml="kategorie: "+out.CATEGORY+"
typ: "+out.type+"
název: "+ out.NAME+"" // vytvoreni okna s informacemi o yajmovzch bodech Ext.create('Ext.window.Window', { title: "zájmový bod", layout: 'fit', styleHtmlContent: true, closable:true, bodyPadding: 10, border: false, html: STRhtml, }).show(); console.log(feature) } return feature; }); }); }

18


2012

vyhledavani.js var form = Ext.create('Ext.form.Panel', { bodyPadding: 5, width: 550, layout: 'anchor', defaults: { anchor: '100%' }, }); var dataStore = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"Praha"}, {"name":"Praha 1"}, {"name":"Praha 2"}, {"name":"Praha 3"}, {"name":"Praha 4"}, {"name":"Praha 5"}, {"name":"Praha 6"}, {"name":"Praha 7"}, {"name":"Praha 8"}, {"name":"Praha 9"}, {"name":"Praha 10"}, ] }); var panelRadios_type= Ext.create('Ext.form.Panel', { border: 0, width:300, items:[{ xtype: 'radiogroup', fieldLabel: 'nabídka', vertical: false, items: [ { boxLabel: 'nerozhoduje', name: 'type', inputValue: '%', checked: true }, { boxLabel: 'prodej', name: 'type', inputValue: 'prodej' }, { boxLabel: 'pronájem', name: 'type', inputValue: 'pronájem'}, ] }] }); var panelRadios_druh= Ext.create('Ext.form.Panel', { border: 0, width:300, items:[{ xtype: 'radiogroup', fieldLabel: 'nemovitost', vertical: false, items: [ { boxLabel: 'nerozhoduje', name: 'druh', inputValue: '%', checked: true }, { boxLabel: 'dům', name: 'druh', inputValue: 'dům' }, { boxLabel: 'byt', name: 'druh', inputValue: 'byt' }, ] }] }); var dataStoreVel = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"nerozhoduje"}, {"name":"1+kk"}, {"name":"1+1"},

19


2012

{"name":"2+kk"}, {"name":"2+1"}, {"name":"3+kk"}, {"name":"3+1"}, {"name":"4+kk"}, {"name":"4+1"}, {"name":"5+kk"}, {"name":"5+1"}, {"name":"6+kk"}, {"name":"6+1"}, {"name":"garsoniéra"}, ] }); var comboBoxVel= Ext.create('Ext.form.ComboBox', { fieldLabel: 'velikost', store: dataStoreVel, displayField: 'name', valueField: "name", emptyText: "velikost", value: "nerozhoduje", }); var panelPlocha= Ext.create('Ext.form.Panel', { border:0, layout: { type: "hbox", align: "left", }, items: [{ xtype: 'label', text: 'Plocha', },{ xtype: 'numberfield', name: 'plocha_od', maxValue: 300, minValue: 0, margin: "0 0 0 35", enableKeyEvents: true, },{ xtype: 'numberfield', name: 'plocha_do', maxValue: 1000, minValue: 0, margin: "0 0 0 10", enableKeyEvents: true, } ] });

var panelCena= Ext.create('Ext.form.Panel', { border:0, padding: "10 0 10 0", layout: { type: "hbox", align: "left", }, items: [{ xtype: 'label', text: 'cena', },{ xtype: 'numberfield', name: 'plocha_od',

20


2012

maxValue: 300, minValue: 0, margin: "0 0 0 39", enableKeyEvents: true, },{ xtype: 'numberfield', name: 'plocha_do', maxValue: 10000000, minValue: 0, margin: "0 0 0 10", enableKeyEvents: true, } ] }); var panelRadios_budovy= Ext.create('Ext.form.Panel', { border: 0, width:500, items:[{ xtype: 'radiogroup', fieldLabel: 'budova', vertical: false, items: [ { boxLabel: 'nerozhoduje', name: 'budova', inputValue: '%', checked: true }, { { { {

boxLabel: boxLabel: boxLabel: boxLabel:

'cihlová', name: 'budova', inputValue: 'cihlová' }, 'panelová', name: 'budova', inputValue: 'panelová'}, 'montovaná', name: 'budova', inputValue: 'montovaná'}, 'dřevěná', name: 'budova', inputValue: 'dřevěná'},

] }] }); var panelRadios_vlastnictvi= Ext.create('Ext.form.Panel', { border: 0, width:300, items:[{ xtype: 'radiogroup', fieldLabel: 'vlastnictví', vertical: false, items: [ { boxLabel: 'nerozhoduje', name: 'vlastnictvi', inputValue: '%', checked: true }, { boxLabel: 'osobní', name: 'vlastnictvi', inputValue: 'osobní' }, { boxLabel: 'družstevní', name: 'vlastnictvi', inputValue: 'družstevní'}, ] }] }); var submit=Ext.create('Ext.Button', { text: 'odešli', width: 100, margin: "0 150 0 150", handler: function() { alll(); vyhledavani.hide(); } }); var comboBoxCast= Ext.create('Ext.form.ComboBox', { fieldLabel: 'městská část', store: dataStore, displayField: 'name', valueField: "name",

21


2012

value:"Praha" }); var dataStoreBuffer = Ext.create('Ext.data.Store', { fields: ['name',"value"], data : [ {"name":"nerozhoduje","value":"nerozhoduje"}, {"name":"kino","value":"cinema_dist"}, {"name":"nemocnice","value":"hospital_dist"}, ] }); var comboBoxBuffer= Ext.create('Ext.form.ComboBox', { fieldLabel: 'zajmový bod', store: dataStoreBuffer, displayField: 'name', valueField: "value", emptyText: "zájmový bod", value: "nerozhoduje", width: 200 }); var BufferDist= Ext.create('Ext.form.field.Number', { width: 100, name: 'plocha_od', maxValue: 5000, minValue: 0, margin: "0 0 0 39", value: "m", }); var labelBuffer= Ext.create('Ext.form.Label', { text: "m", margin: "0 0 0 9", }); var panelPOI= Ext.create('Ext.form.Panel', { border:0, layout: { type: "hbox", align: "left", }, items:[ comboBoxBuffer,BufferDist,labelBuffer ] }); form.add([comboBoxCast,panelRadios_type,panelRadios_druh,comboBoxVel,panelPlocha,panelCen a,panelRadios_vlastnictvi,panelRadios_budovy,panelPOI,submit]); vyhledavani=Ext.create('Ext.window.Window', { title: 'Vyhledání nemovitostí', closeAction: "hide", width: 550, layout: 'fit', items: form });

22


2012

vysledky.js var grid; var myData= new Array(); var storeVys; Ext.onReady(function() { Ext.QuickTips.init(); //out.cinema_Name,out.cinema_dist,out.cinema_GPSlon,out.cinema_GPSlat // create the data store storeVys= Ext.create('Ext.data.ArrayStore', { fields: [ {name: 'Místo'}, {name: 'ulice'}, {name: 'nabídka'}, {name: 'nemovitost'}, {name: 'plocha', type: 'float'}, {name: 'cena', type: 'float'}, {name: 'velikost'}, {name: 'vlastnictví'}, {name: 'budova'}, {name: 'id'}, {name: 'GPSlon'}, {name: 'GPSlat'}, {name: 'poznamka'}, {name: 'popis'}, {name: 'url'}, {name: 'cinema_name'}, {name: 'cinema_dist'}, {name: 'cinema_GPSlon'}, {name: 'cinema_GPSlat'}, {name: 'hospital_name'}, {name: 'hospital_dist'}, {name: 'hospital_GPSlon'}, {name: 'hospital_GPSlat'}, ], data: myData }); // create the Grid grid = Ext.create('Ext.grid.Panel', { store: storeVys, stateful: true, stateId: 'stateGrid', border: false, columns: [ { text : 'Místo', width : 90, sortable : true, dataIndex: 'Místo', }, { text : 'nabídka', width : 75, sortable : true, dataIndex: 'nabídka' },

23


2012

{ text : width : sortable : dataIndex:

'nemovitost', 75, true, 'nemovitost'

text : width : sortable : dataIndex:

'plocha', 75, true, 'plocha'


'cena', 85, true, 'cena'


'velikost', 85, true, 'velikost'


'vlastnictví', 85, true, 'vlastnictví'


'budova', 85, true, 'budova'


'id', 25, true, 'id'

}, {

},{

},{

},{

},{

},{

}, ], height: "800", viewConfig: { stripeRows: true }, listeners: { click: { element: 'el', //bind to the underlying el property on the panel fn: function(){ var selection=grid.getSelectionModel().getSelection(); var index=storeVys.find("id",selection[0].get("id")) feedBig(storeVys.getAt(index)); } } }, disableSelection : false, });

panelVysledky.add(grid); }); function feed(){

24


2012

storeVys.loadData(myData,false); //viewPort.items.items[1].expand(); panelVysledky.update(); } function feedBig(data){ var title=data.get("Místo")+"/"+data.get("velikost")+"/"+data.get("plocha")+"m2"; windowBig=Ext.create('Ext.panel.Panel', { title: title, layout: 'fit', styleHtmlContent: true, closable:true, bodyPadding: 10, border: false, autoScroll:true, }); var htmlVys; htmlVys="
"+data.get("poznamka")+"
"; htmlVys+="ulice: "+data.get("ulice")+"
"; htmlVys+="velikost: "+data.get("velikost")+"
"; htmlVys+="plocha: "+data.get("plocha")+" m<sup>2
"; htmlVys+="cena: "+data.get("cena")+" CZK
"; htmlVys+="
"+data.get("popis")+"
"; htmlVys+= "
"; htmlVys+= ""+data.get("cinema_name")+" "+data.get("cinema_dist")+" m" +"najdi kino na mapě "; htmlVys+= "
"; htmlVys+= ""+data.get("hospital_name")+" "+data.get("hospital_dist")+" m" +"najdi nemocnici na mapě "; htmlVys+= "
"; // nazoomavání na nemovitost var mapPoint =new esri.geometry.Point(data.get("GPSlon").replace(",","."),data.get("GPSlat").replace(",",". "), new esri.SpatialReference({ wkid:4326 })); var mercat=esri.geometry.geographicToWebMercator(mapPoint); htmlVys+="
najdi nemovitost na mapě "; htmlVys+=" nemovitost na Dumrealit.cz

"; Ext.Ajax.request({ url: 'photo.php', method: "POST", params: { id: data.get("id"), }, success: function(response){ htmlVys+=response.responseText; windowBig.update(htmlVys); tabPanel.add(windowBig); windowBig.show(); },

25


2012

failure: function() { alert("nepodarilo se spojit s PHP!") } }); var mapPoint =new esri.geometry.Point(data.get("GPSlon").replace(",","."),data.get("GPSlat").replace(",",". "), new esri.SpatialReference({ wkid:4326 })); var mercat=esri.geometry.geographicToWebMercator(mapPoint); map.centerAndZoom(mercat,16); //viewPort.items.items[1].expand(); } function zoomTo(lon,lat) { var mapPoint =new esri.geometry.Point(lon,lat, new esri.SpatialReference({ wkid:4326 })); var mercat=esri.geometry.geographicToWebMercator(mapPoint); map.centerAndZoom(mercat,16); }

GUI.js var panelVysledky;var windowPanel var viewPort;var windowBig;var tabPanel;var tabPanelWelcome; Ext.onReady(function(){ Ext.QuickTips.init(); var toolbar = Ext.create('Ext.toolbar.Toolbar', { border: false, });

var labelDotaz= Ext.create('Ext.form.Label', { text: "začněte zde: ", margin: "0 5 0 20", }); toolbar.add(labelDotaz); var labelZoomTo= Ext.create('Ext.form.Label', { text: "nazoomovat na městskou část:", margin: "0 5 0 20", border: false, });

var panel=Ext.create('Ext.panel.Panel', { contentEl: 'mapa', tbar: toolbar, border: false, });

26


2012

panelVysledky=Ext.create('Ext.panel.Panel', { title: 'nabídka', border: false, autoScroll: true, }); tabPanelWelcome=Ext.create('Ext.panel.Panel', { border: false, contentEl: "titul", styleHtmlContent: true, title: 'vítejte', padding: 10, baseCls: "titul", height: "100%" }); var windowLegend=Ext.create('Ext.window.Window', { border: false, contentEl: "legend", styleHtmlContent: true, padding: 10, height: 400, width: 200, autoScroll: true, closeAction: "hide", title: "legenda" }).show(); windowLegend.hide(); var panelSouth=Ext.create('Ext.panel.Panel', { border: false, html: "ahoj", styleHtmlContent: true, padding: 10, }); tabPanel=Ext.create('Ext.tab.Panel', { items: [tabPanelWelcome,panelVysledky], border: false, autoScroll: true, });

viewPort=Ext.create('Ext.container.Viewport', { layout: 'border', border: false, items: [{ region: 'north', contentEl: "header", height: 59, border: false, margins: '0 0 5 0' }, { region: 'east', collapsible: false, collapsed: false, split: true, width: 650, items: tabPanel, border: false,

27


2012

}, { region: 'center', xtype: "panel", items: panel, border: false, } , { region: 'south', xtype: "panel", contentEl: "footer", border: false, padding: 10, }] }); var Btn_dotaz = Ext.create('Ext.button.Button', {

//

text: "zadej dotaz!", enableToggle: true, pressed: true, icon: 'https://www.ctnbestpractices.org/duccs/question_mark.gif', scope: this, handler: function() { vyhledavani.show(); Btn_dotaz.toggle(true); }, //scale: 'normal',

}); var Btn_legend = Ext.create('Ext.button.Button', { text: "legenda", // scope: this, enableToggle: true, pressed: true, handler: function() { windowLegend.show(); Btn_legend.toggle(true); }, }); toolbar.add(Btn_dotaz,Btn_legend); var dataStore = Ext.create('Ext.data.Store', { fields: ['name'], data : [ {"name":"Praha"}, {"name":"Praha 1"}, {"name":"Praha 2"}, {"name":"Praha 3"}, {"name":"Praha 4"}, {"name":"Praha 5"}, {"name":"Praha 6"}, {"name":"Praha 7"}, {"name":"Praha 8"}, {"name":"Praha 9"}, {"name":"Praha 10"}, ] }); var comboBox= Ext.create('Ext.form.ComboBox', { store: dataStore,

28


2012

displayField: 'name', valueField: "name", emptyText: "najdi městskou část", listeners:{select:{fn:function(combo) {zoomToPraha(combo.getValue());}}} }); toolbar.add([labelZoomTo,comboBox]); });

photo.php "; while($entryName = readdir($myDirectory)) { $dirArray[] = $entryName; if (strpos($entryName,".jpg") || strpos($entryName,".JPG")) { // echo " "; echo " "; } } echo ""; // close directory closedir($myDirectory); ?>

29

ČESKÉ VYSOKÉ UČENÍ TECHNICKÉ

Recommend Documents

Reality pod lupou

"+data.get("poznamka")+"