var charset=""; /********************************************************************** * * $Id: startUp.js,v 1.8 2006/12/14 17:24:41 lbecchi Exp $ * * purpose: start up code to bootstrap initialization of kaMap within * the sample interface. Examples of using many parts of * the kaMap core api. * * purpose: This is the sample ka-Map interface. Feel free to use it * as the basis for your own applications or just to find out * how ka-Map works. * * author: Lorenzo Becchi and Andrea Cappugi (www.ominiverdi.org) * * ka-Explorer interface has been developer for Food and Agriculture * Organization of the United Nations (FAO-UN) * * ********************************************************************** * * Copyright (c) 2006 Food and Agriculture Organization of the United Nations (FAO-UN) * * Permission is hereby granted, free of charge, to any person obtaining a * copy of this software and associated documentation files (the "Software"), * to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included * in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER * DEALINGS IN THE SOFTWARE. * **********************************************************************/ /****************************************************************************** * * To customize startUp: * * 1) modify toolbar Layout * act on screen.css file and modify the funcion myMapInitialized(). * If you change pan and identifyer images edit switchMode() function too. * *****************************************************************************/ var ICTMAP = null; var ICTMAP_URL = "http:/"+"/map.kumamoto-net.ne.jp/ictmap/"; var ICTMAP_INIT = "/*init*/aszScales=new Array('600000','300000','100000','50000','25000','12500','10000','7500','5000','2500');defaultKihonLayer=new Array();defaultGeomLayer=new Array('4');var map = new _map({name:'gmap',title:'amakusaict',currentScale: 0,units:5,resolution:72,version:'',scales:aszScales});map.setDefaultExtents(129.942751522,32.0900215666,131.339655464,33.2329429742);map.setBackgroundColor('#9BAFCD');map.addLayer(new _layer( { name:'back',name2:'背景',visible:true,opacity:100,imageformat:'AGG_PNG24',queryable:false,tileSource:'auto',redrawInterval:-1,refreshInterval:-1,scales: new Array('1','1','1','1','1','1','1','1','1','1'),visibilityContorol:0}));map.addLayer(new _layer( { name:'base',name2:'地図標準アイコン',visible:false,opacity:100,imageformat:'AGG_PNG24',queryable:false,tileSource:'auto',redrawInterval:-1,refreshInterval:-1,scales: new Array('0','0','0','0','1','1','1','1','1','1'),visibilityContorol:1}));map.addLayer(new _layer( { name:'schoolarea',name2:'学校区域線',visible:false,opacity:100,imageformat:'AGG_PNG24',queryable:false,tileSource:'auto',redrawInterval:-1,refreshInterval:-1,scales: new Array('1','1','1','1','1','1','1','1','1','1'),visibilityContorol:1}));map.resolution = 72;this.addMap( map );this.tileWidth=256;this.tileHeight=256;this.server = '"+ICTMAP_URL+"';this.tileURL = 'tile.phtml';this.selectMap('gmap');this.hl='0';" var ICTMAP_INIT_POINT = "130.71514754505813,32.8029555744417,12500"; //var oJsr = null; /* var myKaMap = myKaNavigator = myKaQuery = myScalebar = null; var queryParams = null; var mgpath = ""; */ /** * parse the query string sent to this window into a global array of key = value pairs * this function should only be called once */ /* function parseQueryString() { queryParams = {}; var s=window.location.search; if (s!='') { s=s.substring( 1 ); var p=s.split('&'); for (var i=0;i width){ this.scalebar.minWidth=width-10; } this.scalebar.maxWidth=width; this.scalebar.update(); }; //コントローラーの表示・非表示 this.DspContorol = function(mode){ var obj = getRawObject(this.controlID); if(mode){ this.dspContorol = true; obj.style.display = 'block'; }else{ this.dspContorol = false; obj.style.display = 'none'; } }; //学校名の表示・非表示 this.DspSchoolname = function(mode){ var obj = getRawObject(this.schoolnameID); if(mode){ this.dspContorol = true; obj.style.display = 'block'; }else{ this.dspContorol = false; obj.style.display = 'none'; } }; //サブマップの表示・非表示 this.DspSubmap = function(mode){ var obj = getRawObject(this.submapID); if(mode){ this.dspSubmap = true; obj.style.display = 'block'; }else{ this.dspSubmap = false; obj.style.display = 'none'; } }; //this.ICTMAP = this.myKaNavigator = this.myKaQuery = this.myScalebar = null; this.queryParams = null; this.mgpath = ""; //SetCenter(x,y[,scale]) //指定した経度・経度を中心にして、指定された //スケールで地図を表示する //引数:経度、緯度、スケール this.SetCenter = function(x,y){ var str = arguments[2]; if(str != null && str != ""){ var scale = convertNum(str); if(this.CheckScale(scale)){ ICTMAP.zoomTo(x,y,scale); } }else{ ICTMAP.zoomTo(x,y); } }; //指定されたスケールに拡大・縮小する //引数:スケール this.SetZoom = function(scale){ if(this.CheckScale(scale)){ ICTMAP.zoomToScale(scale); } }; //妥当なスケールかどうかチェックする this.CheckScale = function(scale){ var arrScales = ICTMAP.aMaps[ICTMAP.currentMap].getScales(); var arrLen = arrScales.length; var matchFlg = false; for(i=0;i 0){ this.arrOnclick[this.arrOnclickAnimeIdx](); this.arrOnclickAnimeIdx++; if(this.arrOnclickAnimeIdx == this.arrOnclick.length){ this.arrOnclickAnimeIdx=0; } } } //初期処理 if(initX != null && initY != null && initScale != null){ this.init(objname,initX,initY,initScale); }else{ this.init(objname); } } //***************************** // ポイントを一つ追加する // sakai //***************************** IctMap.prototype.AddPoint = function(pointid,lon,lat,icon,opts,pointName){ var my_point = ICTMAP.myXmlOverlay.addNewPoint(ICTMAP.USERPOINT_PREFIX+pointid, lon, lat,opts,pointName); if(icon != null && typeof(icon) == "object"){ my_point.addGraphic(icon.Icon); }else{ var my_symbol = new kaXmlSymbol(); my_symbol.size = 12; my_symbol.color = '#ff0000'; my_point.addGraphic(my_symbol); } return my_point; }; //***************************** // ポイントを削除する(ユーザポイント) // pointidがnullの場合ユーザポイントを全て削除する // sakai //***************************** IctMap.prototype.RemovePoint = function(pointid){ if(pointid != null && pointid != ""){ ICTMAP.myXmlOverlay.removePoint(ICTMAP.USERPOINT_PREFIX+pointid); }else{ ICTMAP.myXmlOverlay.removePoint("",ICTMAP.USERPOINT_PREFIX); } }; //***************************** // アイコンオブジェクト // sakai //***************************** function ictMapIcon(){ this.img_src = null; this.icon_w = 0; this.icon_h = 0; /*this.markerOption = new GMarkerOptions(); this.markerOption.icon = new GIcon(); this.markerOption.icon.image = this.img_src; this.markerOption.icon.size = null;*/ this.Icon = new kaXmlIcon(); this.Icon.img_src = this.img_src; }; //***************************** // 数値に変換する // sakai //***************************** function convertNum(str){ try{ var dst = parseInt(str,10); return dst; }catch(e){ return null; } }; //***************************** // イベントを追加する // sakai //***************************** function addEvent(target, type, func){ if(target.attachEvent){ target.attachEvent("on" + type, func); }else if(target.addEventListener){ target.addEventListener(type, func, true); }else { target["on" + type] = func; } }; /* addEvent(window,"load",function(){ var css = document.createElement("link"); css.setAttribute("rel","stylesheet"); css.setAttribute("type","text/css"); css.setAttribute("href",ICTMAP.server+"ictmap.css"); var head = document.getElementsByTagName("head"); head[0].appendChild(css); }); */ //***************************** // 初期処理 // sakai //***************************** IctMap.prototype.init = function(objname) { initDHTMLAPI(); //window.onresize=drawPage; //ベースHTMLを描画する var targetObj = getRawObject(objname); if(targetObj){ targetObj.innerHTML = getBaseHtml(); }else{ alert("マップ表示用HTMLオブジェクトが不正です"); return; } //VIEWPORTのサイズを設定 var mapWidth = getObjectWidth(targetObj); var mapHeight = getObjectHeight(targetObj); var viewport = getRawObject(this.CONST_VIEWPORT_ID); viewport.style.width = mapWidth+"px"; viewport.style.height = mapHeight+"px"; ICTMAP = new kaMap(this.CONST_VIEWPORT_ID,"",ICTMAP_INIT); ICTMAP.IctMap = this; //var szMap = getQueryParam('map'); //var szExtents = getQueryParam('extents'); //var szCPS = getQueryParam('cps'); var szMap = ""; var szExtents = ""; var szCPS = ""; if(arguments.length > 2){ szCPS = arguments[1]+","+arguments[2]+","+arguments[3]; } // デモ用にデフォルトを熊本市中心で表示 if(szCPS == ""){ szCPS = ICTMAP_INIT_POINT; } var gbLegendOpacityControl = false; var gbLegendOrderControl = false; var gbLegendQueryControl = false; var legendOptions = {}; legendOptions.visibility = typeof gbLegendVisibilityControl != 'undefined' ? gbLegendVisibilityControl : true; legendOptions.opacity = typeof gbLegendOpacityControl != 'undefined' ? gbLegendOpacityControl : true; legendOptions.order = typeof gbLegendOrderControl != 'undefined' ? gbLegendOrderControl : true; legendOptions.query = typeof gbLegendQueryControl != 'undefined' ? gbLegendQueryControl : true; //var myKaLegend = new kaLegend( ICTMAP, 'legend', false, legendOptions); var myKaKeymap = new kaKeymap( ICTMAP, this.CONST_SUBMAP_ID); ICTMAP.kaKeymap = myKaKeymap; myKaNavigator = new kaNavigator( ICTMAP ); myKaNavigator.activate(); myKaQuery = new kaQuery( ICTMAP, KAMAP_RECT_QUERY ); myKaRubberZoom = new kaRubberZoom( ICTMAP ); myKaTracker = new kaMouseTracker(ICTMAP); myKaTracker.activate(); ICTMAP.registerForEvent( KAMAP_INITIALIZED, null, myInitialized ); ICTMAP.registerForEvent( KAMAP_MAP_INITIALIZED, null, myMapInitialized ); ICTMAP.registerForEvent( KAMAP_SCALE_CHANGED, null, myScaleChanged ); ICTMAP.registerForEvent( KAMAP_EXTENTS_CHANGED, null, myExtentChanged ); ICTMAP.registerForEvent( KAMAP_LAYERS_CHANGED, null, myLayersChanged ); ICTMAP.registerForEvent( KAMAP_LAYER_STATUS_CHANGED, null, myLayersChanged ); ICTMAP.registerForEvent( KAMAP_QUERY, null, myQuery ); ICTMAP.registerForEvent( KAMAP_MAP_CLICKED, null, myMapClicked ); ICTMAP.registerForEvent( KAMAP_MOUSE_TRACKER, null, myMouseMoved ); myScalebar = new ScaleBar(1); myScalebar.divisions = 3; myScalebar.subdivisions = 2; myScalebar.minWidth = 100; myScalebar.maxWidth = 200; if(this.scalebarWidth != null){ myScalebar.maxWidth = this.scalebarWidth; myScalebar.minWidth = this.scalebarWidth - 10; getRawObject(this.scalebarID).style.width=this.scalebarWidth+"px"; } myScalebar.place('scalebar'); this.scalebar = myScalebar; //toolTip = new kaToolTip( ICTMAP ); ICTMAP.myXmlOverlay = new kaXmlOverlay( ICTMAP, 200); //drawPage(); ICTMAP.initialize( szMap, szExtents, szCPS ); myKaSearch = new kaSearch( ICTMAP ); ICTMAP.myXmlOverlay.setBaseUrl(); //スタイルシート読み込み if(ICTMAP.isIE6CSS&&!isFIREFOX){ var css = document.createElement("link"); css.setAttribute("rel","stylesheet"); css.setAttribute("type","text/css"); css.setAttribute("href",ICTMAP.server+"ictmap.css"); var head = document.getElementsByTagName("head")[0].appendChild(css); }else{ var defaultStyle = document.createElement('style'); var styleText = '@import url(\"' + ICTMAP.server + 'ictmap.css\");'; var styleTextElem = document.createTextNode(styleText); defaultStyle.appendChild(styleTextElem); //ここでエラーが出るときはDOCTYPEを調整 defaultStyle.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(defaultStyle); } /* var tmp = ""; for(i in defaultStyle){ //console.log(i); tmp += "," + i } window.clipboardData.setData("text",tmp); */ }; /** * event handler for KAMAP_INITIALIZED. * * at this point, ka-Map! knows what map files are available and we have * access to them. */ function myInitialized() { //myMapInitialized( null, ICTMAP.getCurrentMap().name ); //dispOverLay(); //updateLinkToView(); } /** * event handler for KAMAP_MAP_INITIALIZED * * the scales are put into a select ... this will be used for zooming */ function myMapInitialized( eventID, mapName ) { //get list of maps and populate the maps select box var aMaps = ICTMAP.getMaps(); //update the scales select var currentMap = ICTMAP.getCurrentMap(); var scales = currentMap.getScales(); var currentScale=ICTMAP.getCurrentScale(); //oSelect = document.toolbar.scales; oSelect = getRawObject("toolbar_scales"); if(oSelect){ while( oSelect.options[0] ) oSelect.options[0] = null; j=0; //for(var i in scales) for(i=0;i 50){ ICTMAP.myXmlOverlay.removePoint("",ICTMAP.BASEPOINT_PREFIX); // 標準ポイントを一旦削除 }; dispOverLayKihon(ICTMAP.dspLandmark); var extents=ICTMAP.getGeoExtents(); dispSchoolName(extents); } function checkboxserialize2(elem,sep){ var dst = ""; if(elem){ len = elem.length; if(len > 1){ for(i=0;iy: ' + roundIt(position.y,2); */ } function myLayersChanged(eventID, map) { updateLinkToView(); } function updateLinkToView() { var port = (window.location.port)? window.location.port : 80; var url = window.location.protocol+'/'+'/'+window.location.host +':'+ port +''+window.location.pathname+'?'; var extents = ICTMAP.getGeoExtents(); var cx = (extents[2] + extents[0])/2; var cy = (extents[3] + extents[1])/2; var cpsURL = 'cps='+cx+','+cy+','+ICTMAP.getCurrentScale(); //var mapURL = 'map=' + ICTMAP.currentMap; var theMap = ICTMAP.getCurrentMap(); var aLayers = theMap.getLayers(); var layersURL = 'layers='; var sep = ''; for (var i=0;i' + 'miny: ' + roundIt(extents[1],2) +'
' + 'maxx: ' + roundIt(extents[2],2) +'
' + 'maxy: ' + roundIt(extents[3],2) +'
'; } */ } function sendLinkToView(email,body) { var mySubject = myUrlEncode('Authomatic ka-Map mail'); var myBody = myUrlEncode(body); location.replace( 'mailto:' + email + '?subject=' + mySubject + '&body=' + body); } /** * called when kaMap tells us the scale has changed */ function myScaleChanged( eventID, scale ) { getRawObject("pointinfo").style.visibility='hidden'; // sakai //var oSelect = document.toolbar.scales; var oSelect = getRawObject("toolbar_scales"); if(oSelect){ for (var i=0; i= 1000000) { scale = scale / 1000000; scale = scale + " Million"; } var outString = 'current scale 1:'+ scale; getRawObject('scale').innerHTML = outString; */ } /** * called when the user changes scales. This will cause the map to zoom to * the new scale and trigger a bunch of events, including: * KAMAP_SCALE_CHANGED * KAMAP_EXTENTS_CHANGED */ function mySetScale( scale ) { ICTMAP.zoomToScale( scale ); } /** * called when the map selection changes due to the user selecting a new map. * By calling ICTMAP.selectMap, this triggers the KAMAP_MAP_INITIALIZED event * after the new map is initialized which, in turn, causes myMapInitialized * to be called */ function mySetMap( name ) { ICTMAP.selectMap( name ); } function myQuery( eventID, queryType, coords ) { var szLayers = ''; var layers = ICTMAP.getCurrentMap().getQueryableLayers(); if(layers.length==0) { alert("No queryable layers at this scale and extent"); return; } for (var i=0;i
\"ドラック&ドロップで移動\"\"範囲指定拡大\"\"拡大\"\"縮小\"
\"読み込み中\"
読み込み中
"; return baseHtml; } /************************************************************************************/ /* IctMap 機能追加クラス 2010.02.19 M.KAKIMOTO */ /************************************************************************************/ /****************************************************************/ /* (method)IctMap.AddPolyline マップ上に多角線を引きます。 id : ポイントID (多角線の開始位置のポイント) coordinates : "経度 緯度,経度 緯度" の形式の文字列 options : オプション { color : "線の色", stroke : "ラインの太さ(pixel)", opacity : "透明度(1.0で不透明、0.0で完全透明)" } (戻り値) 開始点のkaXmlPointクラス */ /****************************************************************/ IctMap.prototype.AddPolyline = function(id, coordinates, options) { return this.__AddMultiPointObject(id, coordinates, options, kaXmlLinestring); }; /****************************************************************/ /* (method)IctMap.AddPolygon マップ上に多角形を作成します。 id : ポイントID (多角線の開始位置のポイント) coordinates : "経度 緯度,経度 緯度" の形式の文字列 options : オプション { color : "線の色", stroke : "ラインの太さ(pixel)", opacity : "透明度(1.0で不透明、0.0で完全透明)" } (戻り値) 開始点のkaXmlPointクラス */ /****************************************************************/ IctMap.prototype.AddPolygon = function(id, coordinates, options) { return this.__AddMultiPointObject(id, coordinates, options, kaXmlPolygon); }; /****************************************************************/ /* (method)IctMap.__AddMultiPointObject PolylineまたはPolygon生成の共通処理です。 id : ポイントID (多角線の開始位置のポイント) coordinates : "経度 緯度,経度 緯度" の形式の文字列 options : オプション { color : "線の色", stroke : "ラインの太さ(pixel)", opacity : "透明度(1.0で不透明、0.0で完全透明)" } _class : 生成するクラス(kaXmlLinestringまたはkaXmlPolygonを想定) (戻り値) 開始点のkaXmlPointクラス */ /****************************************************************/ IctMap.prototype.__AddMultiPointObject = function(id, coordinates, options, _class) { var op = {color:"", stroke:"", opacity:""}; if(options) { for(var o in op) { op[o] = (options[o]) ? options[o] : ""; } } op.color = (op.color.length == 0) ? "black" : op.color; op.stroke = (op.stroke.length == 0) ? "1" : op.stroke; op.opacity = (op.opacity.length == 0) ? "1" : op.opacity; var coords = coordinates.split(","); var pos = coords[0].split(/\s/); var x = parseFloat(pos[0]); var y = parseFloat(pos[1]); var point = ICTMAP.myXmlOverlay.addNewPoint(ICTMAP.USERPOINT_PREFIX+id, x, y); var polyline = new _class(point); polyline.readCoordinates(point, coordinates); for(var o in op) { polyline[o] = op[o]; } point.addGraphic(polyline); return point; } /****************************************************************/ /* (method)IctMap.RemovePolyline マップ上の多角線を削除します。 id : ポイントID (多角線の開始位置のポイント) (戻り値) void */ /****************************************************************/ IctMap.prototype.RemovePolyline = function(id) { var reg; if(id != null && id != ""){ var pointid = ICTMAP.USERPOINT_PREFIX+id; reg = new RegExp("^"+pointid+"$"); }else{ reg = new RegExp("^" + ICTMAP.USERPOINT_PREFIX); } for(var i=0; i 0) { var o = this.GetDrawObject(); var m = this.GetDrawMethod(); var p = m.apply ( o, [this.TOOL_LINE_PREFIX, coordinates.join(","), this.LineStyle] ); var canvases = p.div.getElementsByTagName("canvas"); if(canvases.length > 0) { this.Canvas = canvases[0]; } this.StartPoint = p; var drawObj = p.graphics[0]; var scf = ICTMAP.myXmlOverlay.kaMap.getCurrentScale() / drawObj.maxScale; this.PixelCollection = []; for(var i=0; i" + "このポイントを削除する
"; //ポイント追加のメニューリンク var insertLink = "" + "間にポイントを追加する
"; //ポイントの作成 var x = this.PointCollection[index].x; var y = this.PointCollection[index].y; var point = ICTMAP.myXmlOverlay.addNewPoint(id+"p"+index, x, y); //ポイントアイコンの作成(divタグ) var div = this.CreatePointIconElement(); point.div.appendChild(div); //アイコンの位置がポイントの中心に行くように位置を調整 var top = point.div.style.top.replace("px",""); var left = point.div.style.left.replace("px",""); var width = div.style.width.replace("px",""); var height = div.style.height.replace("px",""); top = parseInt(top)-parseInt(parseInt(height)/2); left = parseInt(left)-parseInt(parseInt(width)/2); point.div.style.top = top + "px"; point.div.style.left = left + "px"; //イベントハンドラの登録 var self = this; //ツールが有効じゃない場合は、イベントを登録しない。 if(!this.IsActive) { div.style.cursor=""; return point; } //ポイントのクリック(ドラッグ開始) div.onmousedown = function() { if(self.DraggingPointIndex > -1) return; self.DraggingPointIndex = index; self.OnDragPointStart.apply(self, arguments); self._OnDragPointStart.apply(self, arguments); }; //ポイント削除メニューのクリック(グローバルスコープに関数追加) window["__ictmap_tools_activetool_removepoint"] = function() { self.IsClickLocked = true; self.RemovePoint.apply(self, arguments); clearOverlaysymbolhtml(); if(typeof self.OnAfterRemovePoint == "function") { self.OnAfterRemovePoint.apply(self, arguments); } } //ポイント追加メニューのクリック window["__ictmap_tools_activetool_insertpoint"] = function() { self.IsClickLocked = true; self.InsertAfterPoint.apply(self, arguments); clearOverlaysymbolhtml(); if(typeof self.OnAfterInsertPoint == "function") { self.OnAfterInsertPoint.apply(self,arguments); } } var menuString = removeLink; if(index < this.PointCollection.length-1) { menuString += insertLink; } //ポイントをクリックしたときのポップアップ表示 point.div.onclick = function() { self.OnClickPoint(self, arguments); self.IsPopupMenuOpened = true; clickIconEvent(point, menuString); //clearOverlaysymbolhtmlを呼び出したときポイントが //追加されないようにオーバーライド var clearOverlaysymbolhtml_ = clearOverlaysymbolhtml; clearOverlaysymbolhtml = function() { self.IsClickLocked = true; self.IsPopupMenuOpened = false; clearOverlaysymbolhtml_(); clearOverlaysymbolhtml = clearOverlaysymbolhtml_; }; }; return point; }, /************************************************************/ /* (method) CreatePointIconElement ドラッグ用のポイントアイコンを生成します。 */ /************************************************************/ CreatePointIconElement : function() { var div = document.createElement("div"); for(var p in this.PointStyle) { div.style[p] = this.PointStyle[p]; } return div; }, /************************************************************/ /* (public virtual method) GetDrawMethod 本クラスはTools.Polygonクラスに継承されます。 その為、描画メソッドをクラスによって選択できるようにしました。 このメソッドは、Tools.Polygonクラスでoverrideされます。 */ /************************************************************/ GetDrawMethod : function() { return ICTMAP.IctMap.AddPolyline; }, /************************************************************/ /* (public virtual method) GetDrawObject 本クラスはTools.Polygonクラスに継承されます。 その為、描画オブジェクトをクラスによって選択できるようにしました。 このメソッドは、Tools.Polygonクラスでoverrideされます。 */ /************************************************************/ GetDrawObject : function() { return ICTMAP.IctMap; }, /************************************************************/ /* (property) LockDblClickEvent OnDblClickイベントを排他的にロック */ /************************************************************/ LockDblClickEvent : function() { var self = this; this.ExclusiveEvents.LockEventHandler ( "dblclick", function(e) { var p = ICTMAP.IctMap.Tools.ToGeometory(e); self.OnDblClick.apply(self, arguments); self._OnDblClick.apply(self, arguments); } ); }, /************************************************************/ /* (method) OnDblClick ダブルクリックしたときに発生するイベントのイベントハンドラです。 */ /************************************************************/ OnDblClick : function() { }, /************************************************************/ /* (private method) _OnDblClick ダブルクリックしたときに発生するイベントのイベントハンドラです。 (*)ユーザーに公開していない処理部分です。 */ /************************************************************/ _OnDblClick : function(e) { if(this.IsClosed) return; var geo = ICTMAP.IctMap.Tools.ToGeometory(e); this.PointCollection.push(geo); this._createBox(geo); if(this.PointCollection.length > 0) { this.IsClosed = true; this.IsClickLocked = true; this.Reflesh(); } }, /************************************************************/ /* (method) OnMapClick MAPをクリックしたときに発生するイベントハンドラです。 */ /************************************************************/ OnMapClick : function() { }, /************************************************************/ /* (private method) _OnMapClick MAPをクリックしたときに発生するイベントハンドラです。 (*)ユーザーに公開していない処理部分です。 */ /************************************************************/ _OnMapClick : function() { }, /************************************************************/ /* (private method) _OnMapClickTrigger イベントハンドラとして登録される処理実体です。 _OnMapClickを、thisをこのクラスとして実行します。 */ /************************************************************/ _OnMapClickTrigger : function() { }, /************************************************************/ /* (private method) _OnMouseEventsTrigger マウスイベントのブラウザ依存を吸収します。 */ /************************************************************/ _OnMouseEventsTrigger : function(eventid, p) { if(this.StartPoint == null) { return; } var gp = {x:(p.x) ? p.x : p[0], y:(p.y) ? p.y :p[1]}; gp = {x:parseFloat(gp.x), y:parseFloat(gp.y)}; if(gp.x > this.Box.maxX || gp.y > this.Box.maxY || gp.x < this.Box.minX || gp.y < this.Box.minY) { if(this.IsMouseOverPosition) { this.OnMouseOut.apply(this, arguments); this.IsMouseOverPosition = false; } return; } var pp = ICTMAP.IctMap.Tools.ToCanvasOffset(this.StartPoint.graphics[0], gp); if(this.IsMouseOver(pp)) { if(!this.IsMouseOverPosition) { this.OnMouseOver.apply(this, arguments); this.IsMouseOverPosition = true; } } else { if(this.IsMouseOverPosition) { this.OnMouseOut.apply(this, arguments); this.IsMouseOverPosition = false; } } }, /************************************************************/ /* (method) OnDragPointStart ポイントのドラッグ開始のイベントハンドラです。 */ /************************************************************/ OnDragPointStart : function() { }, /************************************************************/ /* (method) OnDragPoint ポイントのドラッグ中のイベントハンドラです。 (*)ユーザーに公開していない処理部分です。 */ /************************************************************/ OnDragPoint : function() { }, /************************************************************/ /* (method) OnDragPointEnd ポイントのドラッグ終了のイベントハンドラです。 */ /************************************************************/ OnDragPointEnd : function() { }, /************************************************************/ /* (private method) _OnDragPointStart ポイントのドラッグ開始のイベントハンドラです。 (*)ユーザーに公開していない処理部分です。 */ /************************************************************/ _OnDragPointStart : function() { var self = this; //地図フィールドのonmousedownと、onmouseupを無効化 this.ExclusiveEvents.LockEventHandler("mousedown", null); this.ExclusiveEvents.LockEventHandler("mouseup", null); //移動させる前の座標情報を保存 var startCoordinates = this.GetCoordinates(); //onmousemoveを排他的に上書き this.ExclusiveEvents.LockEventHandler ( "mousemove", function() { self._OnDragPoint.apply(self, arguments); self.OnDragPoint.apply(self, arguments); } ); //ドラッグ終了はどこからでもハンドリング出来るように //document.bodyにセット this.BodyOnMouseUp = document.body.onmouseup; document.body.onmouseup = function() { //少しでも座標の変更があればドラッグとみなす if(startCoordinates != self.GetCoordinates()) { self.OnDragPointEnd.apply(self, arguments); } self._OnDragPointEnd.apply(self, arguments); }; }, /************************************************************/ /* (private method) _OnDragPoint ポイントのドラッグ中のイベントハンドラです。 (*)ユーザーに公開していない処理部分です。 */ /************************************************************/ _OnDragPoint : function(e) { //マウスの位置情報を緯度・経度に変換 var geo = ICTMAP.IctMap.Tools.ToGeometory(e); //位置情報をドラッグ中のポイントに再セット this.PointCollection[this.DraggingPointIndex] = geo; this.Box = {maxX:0, maxY:0, minX:0,maxY:0}; for(var i=0; ieのベクトル var se = {x:e.x-s.x, y:e.y-s.y}; //s-->eに垂直で交わり、sを通る座標 var sp = {x:se.y*-1 + s.x, y:se.x + s.y}; //s-->eに垂直で交わり、eを通る座標 var ep = {x:se.y*-1 + e.x, y:se.x + e.y}; // sp、epに対してpの位置を判定 var sd = this._getDistancePerpendicular(sp, s, p); var ed = this._getDistancePerpendicular(ep, e, p); return (sd <= 0 && ed >= 0); }, /************************************************************/ /* (private method) _getDistancePerpendicular 2点が結ぶラインに対して、任意の点が垂線を引ける位置にある時、 任意の位置からラインまでの距離を測ります。 (s-->eのラインに対して、pから垂線を引き、その交点とpとの距離を測ります。) s : 始点の{x:x, y:y} e : 終点の{x:x, y:y} p : 任意の{x:x, y:y} (戻り値) ライン|se|に対するpからの距離。 正の値 ==> ライン|se|のベクトルに対して左 負の値 ==> ライン|se|のベクトルに対して右 */ /************************************************************/ _getDistancePerpendicular : function(s, e, p) { //s-->p のベクトル var sp = {x:p.x-s.x, y:p.y-s.y}; //s-->e のベクトル var se = {x:e.x-s.x, y:e.y-s.y}; //seの長さ var d = Math.sqrt(se.x * se.x + se.y * se.y); if(d == 0) { //seの長さ0は点なので、sとpとの距離を求める return Math.sqrt( sp.x * sp.x + sp.y * sp.y ); } /* s-->pのベクトル|sp| * sin(@) ==> 距離d * 外積の公式 sp * se = |sp| |se| sin(@) から * d= |sp| sin(@) = (sp*se) / |se| と考える */ return (sp.x*se.y - sp.y*se.x) / d; }, /************************************************************/ /* (private method) _createBox バウンディングボックスを作成します。 */ /************************************************************/ _createBox : function(p) { this.Box.maxX = (this.Box.maxX < p.x) ? p.x : this.Box.maxX; this.Box.maxY = (this.Box.maxY < p.y) ? p.y : this.Box.maxY; this.Box.minX = (this.Box.minX ==0 || this.Box.minX > p.x) ? p.x : this.Box.minX; this.Box.minY = (this.Box.minY ==0 || this.Box.minY > p.y) ? p.y : this.Box.minY; } }; /***********************************************************************************/ /* (class)IctMap.Tools.Polygon extends IctMap.Tools.Polyline IctMap上に、多角形を入力する為のUIツールです。 */ /***********************************************************************************/ IctMap.prototype.Tools.Polygon = function() { this.Initialize.apply(this, arguments); } //extends IctMap.Tools.Polyline for(var p in IctMap.prototype.Tools.Polyline.prototype) { IctMap.prototype.Tools.Polygon.prototype[p] = IctMap.prototype.Tools.Polyline.prototype[p]; } IctMap.prototype.Tools.Polygon.prototype["parent"] = IctMap.prototype.Tools.Polyline.prototype; var __ictmap_tools_polygon_prototype = { /************************************************************/ /* (property) IsMouseOverPosition マウスがポリゴン上に乗った事を示します。 */ /************************************************************/ IsMouseOverPosition : false, /************************************************************/ /* (property) IsCanvasMouseOutOccured canvasに対するマウスアウトイベントの発生を保持します。 (*)IE用 */ /************************************************************/ IsCanvasMouseOutOccured : false, /************************************************************/ /* (property) Initialize コンストラクタ */ /************************************************************/ Initialize : function() { this.parent.Initialize.apply(this, arguments); this.TOOL_PREFIX = "_polygon_" this.TOOL_LINE_PREFIX = "line_polygon"; this.LockDblClickEvent(); var onmapclick = this.OnMapClick; var self = this; this.OnMapClick = function() { if(!self.IsClosed) { onmapclick.apply(self, arguments); } }; ICTMAP.registerForEvent(KAMAP_MAP_CLICKED, this, this._OnMouseEventsTrigger); }, /************************************************************/ /* (method) OnClick マウスがポリゴン上をクリックした時、発生するイベント */ /************************************************************/ OnClick : function() { }, /************************************************************/ /* (override method) RemovePoint ポイント配列からポイントを削除します。 */ /************************************************************/ RemovePoint : function(index) { this.PointCollection.splice(index, 1); if(this.PointCollection.length < 3) { this.IsClosed = false; } this.Reflesh(); }, /************************************************************/ /* (override method) AfterReflesh ポリゴンを描画後の処理です。 */ /************************************************************/ AfterReflesh : function() { if(this.Canvas == null) return; var self = this; }, /************************************************************/ /* (private orveride method) _OnMouseEventsTrigger マウスイベントのブラウザ依存を吸収します。 */ /************************************************************/ _OnMouseEventsTrigger : function(eventid, p) { if(!this.IsClosed) return; var gp = {x:(p.x) ? p.x : p[0], y:(p.y) ? p.y :p[1]}; gp = {x:parseFloat(gp.x), y:parseFloat(gp.y)}; if(gp.x > this.Box.maxX || gp.y > this.Box.maxY || gp.x < this.Box.minX || gp.y < this.Box.minY) { if(this.IsMouseOverPosition) { this.OnMouseOut.apply(this, arguments); this.IsMouseOverPosition = false; } return; } var pp = ICTMAP.IctMap.Tools.ToCanvasOffset(this.StartPoint.graphics[0], gp); switch(eventid) { case KAMAP_MOUSE_TRACKER : if(this.IsMouseOver(gp)) { if(this.IsMouseOverPosition) return; this.OnMouseOver.apply(this, arguments); this.IsMouseOverPosition = true; } else { if(!this.IsMouseOverPosition) return; if(!this.parent.IsMouseOver.apply(this, [pp])) { this.OnMouseOut.apply(this, arguments); this.IsMouseOverPosition = false; } } return; case KAMAP_MAP_CLICKED : if(this.IsMouseOver(gp)) { this.OnClick.apply(this, arguments); } return; default : return; } }, /************************************************************/ /* (override method) GetDrawMethod 本クラスのデータを画面に描画するメソッドを取得します。 */ /************************************************************/ GetDrawMethod : function() { return (this.IsClosed) ? ICTMAP.IctMap.AddPolygon : ICTMAP.IctMap.AddPolyline; }, /************************************************************/ /* (override method) GetDrawObject 本クラスのデータを画面に描画するオブジェクトを取得します。 */ /************************************************************/ GetDrawObject : function() { return ICTMAP.IctMap; }, /************************************************************/ /* (override method) IsMouseOver マウスが多角形の内点を指しているかを判定します。 */ /************************************************************/ IsMouseOver : function(point) { var geo = point; var coordinates = []; for(var i=0; i 0) { var st = coordinates[0]; var ed = coordinates[coordinates.length-1]; if(st.x != ed.x || st.y != ed.y) { coordinates.push(coordinates[0]); } } geo.x = parseFloat(geo.x); geo.y = parseFloat(geo.y); var clossLineCount = 0; var geo0 = coordinates[0]; var isClossX0 = (geo.x <= geo0.x); var isClossY0 = (geo.y <= geo0.y); for(var i=1; i 2 && Math.abs(startp.y - pos.y) > 2) { self.OnPointDragEnd.apply(self, [point, -1, g]); } else { self.OnPointClick.apply(self, [point, KAMAP_MAP_CLICKED, g]); } document.body.onmouseup = bodymouseup; return false; } self.PointExclusiveEvents.ReleseEventHandler("mousedown"); return false; } ); } }, /************************************************************/ /* (method) _OnPointClickEventTrigger レイヤの重なりにより、点へのクリックイベント(ドラッグイベント)が 発生しない問題に対応します。 */ /************************************************************/ _OnPointClickEventTrigger : function(eventid, p) { if(this.BaloonOpenObject != null) return; p = {x:(p.x)?p.x:p[0], y:(p.y)?p.y:p[1]}; var pixes = ICTMAP.geoToPix(p.x, p.y); var x = pixes[0]; var y = pixes[1]; var top = (y - ICTMAP.yOrigin); var left = (x - ICTMAP.xOrigin); var handlerSetten = false; for(var i=this.PointCollection.length-1; i>-1; i--) { var point = this.PointCollection[i]; var obj = point.div; var pointx = parseInt(point.div.style.left); var pointy = parseInt(point.div.style.top); var iconw = (point.graphics[0].icon_w) ? parseInt(point.graphics[0].icon_w) : 0; var iconh = (point.graphics[0].icon_h) ? parseInt(point.graphics[0].icon_h) : 0; var isover = ( left >= pointx-(iconw/2) && left <= pointx+(iconw/2) && top >= pointy-(iconh/2) && top <= pointy+(iconh/2) ); if(isover) { this._OnPointMouseOver.apply(this, [point, eventid, p]); point["isover"] = true; if(!handlerSetten) { this.SetPointEventHandler(point, p); handlerSetten = true; } } else { if(point["isover"]) { this._OnPointMouseOut.apply(this, [point, eventid, p]); point["isover"] = false; } } } if(!handlerSetten) { this.PointExclusiveEvents.ReleseEventHandler("mousedown"); this.PointExclusiveEvents.ReleseEventHandler("mousemove"); } }, /************************************************************/ /* (method) OnToolMouseOver ツールからマウスカーソルが触れた時に発生するイベントです。 tool : イベントを発生させたツールのインスタンスです。 eventid : 発生したイベントID p : ポイントの緯度・経度 */ /************************************************************/ OnToolMouseOver : function() { }, /************************************************************/ /* (method) OnToolMouseOut ツールからマウスカーソルが離れた時に発生するイベントです。 tool : イベントを発生させたツールのインスタンスです。 eventid : 発生したイベントID p : ポイントの緯度・経度 */ /************************************************************/ OnToolMouseOut : function(tool) { }, /************************************************************/ /* (method) OnToolClick ツールをクリックした時に発生するイベントです。 tool : イベントを発生させたツールのインスタンスです。 eventid : 発生したイベントID p : ポイントの緯度・経度 */ /************************************************************/ OnToolClick : function() { }, /************************************************************/ /* (method) OnToolDblClick ツールをダブルクリックした時に発生するイベントです。 tool : イベントを発生させたツールのインスタンスです。 eventid : 発生したイベントID p : ポイントの緯度・経度 */ /************************************************************/ OnToolDblClick : function() { }, /************************************************************/ /* (method) OnPointAdded ポイントが追加されたときに発生します。 p : 追加されたkaXmlPointオブジェクト */ /************************************************************/ OnPointAdded : function(p) { }, /************************************************************/ /* (method) OnPointClick 点をクリックした時に発生するイベントです。 p : クリックされたkaXmlPointオブジェクト */ /************************************************************/ OnPointClick : function(p) { }, /************************************************************/ /* (method) OnPointDragStart 点や多角線・多角形の関節をドラッグしたとき発生するイベントです。 tool : kaXmlPointオブジェクト無いし、Polyline または Polygonオブジェクト */ /************************************************************/ OnPointDragStart : function(tool) { }, /************************************************************/ /* (method) OnPointDrag 点や多角線・多角形の関節をドラッグ中に発生するイベントです。 tool : kaXmlPointオブジェクト無いし、Polyline または Polygonオブジェクト */ /************************************************************/ OnPointDrag : function(tool) { }, /************************************************************/ /* (method) OnPointDragEnd 点や多角線・多角形の関節のドラッグが終了したときに、 発生するイベントです。 tool : kaXmlPointオブジェクト無いし、Polyline または Polygonオブジェクト */ /************************************************************/ OnPointDragEnd : function(tool) { }, /************************************************************/ /* (method) OnPointMouseOver ポイントにマウスが乗った時の処理です。 */ /************************************************************/ OnPointMouseOver : function(p) { }, /************************************************************/ /* (method) OnPointMouseOver ポイントからマウスが離れた時の処理です。 */ /************************************************************/ OnPointMouseOut : function(p) { }, /************************************************************/ /* (method) OnCloseBaloon バルーン(吹き出し)が閉じられた時発生するイベントです。 */ /************************************************************/ OnCloseBaloon : function() { }, /************************************************************/ /* (method) OnAfterInsertPoint 多角線・多角形にポイントを追加したときに発生するイベントです。 */ /************************************************************/ OnAfterInsertPoint : function() { }, /************************************************************/ /* (method) OnAfterRemovePoint 多角線・多角形からポイントを削除したときに発生するイベントです。 */ /************************************************************/ OnAfterRemovePoint : function() { }, /************************************************************/ /* (method) OnToolActive ツールのActivateメソッドが呼び出された時実行されます。 */ /************************************************************/ OnToolActive : function() { }, /************************************************************/ /* (method) OnToolDeactive ツールのDeactivateメソッドが呼び出された時実行されます。 */ /************************************************************/ OnToolDeactive : function() { }, /************************************************************/ /* (method) _OnPointMouseOver ポイントにマウスが乗った時の処理です。 */ /************************************************************/ _OnPointMouseOver : function(p, eventid, g) { if(this.BaloonOpenObject == null) this._AddNameList(p, g); }, /************************************************************/ /* (method) _OnPointMouseOver ポイントからマウスが離れた時の処理です。 */ /************************************************************/ _OnPointMouseOut : function(p, eventid, g) { this._RemoveNameList(p, g); }, /************************************************************/ /* (method) _OnToolMouseOver ツールからマウスカーソルが離れた時に発生するイベントです。 本クラスは既定の動作として、ツールを有効(Activate)にします。 */ /************************************************************/ _OnToolMouseOver : function(tool, eventid, p) { if(this.BaloonOpenObject ==null) this._AddNameList(tool, p); if(!this.IsEditable) return; if(this.ActiveTool!=null) { if ( this.ActiveTool.DraggingPointIndex == -1 && this.ActiveTool.IsClosed && !this.ActiveTool.IsMouseOverPosition && !this.ActiveTool.IsPopupMenuOpened ) { this.ChangeActiveTool(tool); } } else { if(this.BaloonOpenObject == null) { this.ChangeActiveTool(tool); } } }, /************************************************************/ /* (method) _OnToolMouseOut ツールからマウスカーソルが離れたときに発生するイベントです。 本クラスは既定の動作として、ツールを無効(Deactivate)にします。 */ /************************************************************/ _OnToolMouseOut : function(tool) { this._RemoveNameList(tool); if(!this.IsEditable) return; if(this.ActiveTool!=null && tool.IsActive) { if ( this.ActiveTool.DraggingPointIndex == -1 && this.ActiveTool.IsClosed && !this.ActiveTool.IsPopupMenuOpened ) { tool.Deactivate(true); } } }, /************************************************************/ /* (method) _OnToolClick ツールをクリックした時に発生するイベントです。 本クラスは既定の動作としてツールを有効(Activate)にします。 */ /************************************************************/ _OnToolClick : function(tool) { if(!this.IsEditable) return; if ( this.ActiveTool != null && !tool.IsActive && this.ActiveTool.IsClosed && this.BaloonOpenObject == null ) { this.ChangeActiveTool(tool); } else { if(this.ActiveTool == null) { this.ChangeActiveTool(tool); } } }, /************************************************************/ /* (method) _OnMapClick ポイントモードの時、マップをクリックしたとき実行させる ロジックの入れ子です。 */ /************************************************************/ _OnMapClick : function() { }, /************************************************************/ /* (method) IsPoint オブジェクトがkaXmlPointオブジェクトかどうかを判定します。 */ /************************************************************/ IsPoint : function(o) { return o.constructor.toString().match(/^function\skaXmlPoint\(/g) != null; }, /************************************************************/ /* (method) DisplayNumberBaloon オブジェクト番号を表示します。 */ /************************************************************/ DisplayNumberBaloon : function(object, number) { var pp = (this.IsPoint(object)) ? object : (object.StartPoint) ? object.StartPoint :null; if(pp == null) return; var p = ICTMAP.myXmlOverlay.addNewPoint(pp.sid + "___num_baloon___", pp.geox, pp.geoy); if(p.div) { var rdiv = document.getElementById(p.div.id + "___baloon___"); if(rdiv) { rdiv.parentNode.removeChild(rdiv); } var div = document.createElement("div"); div.setAttribute("id", p.div.id + "___baloon___"); div.style.width = "30px"; div.style.height = "40px"; div.style.top = "-38px"; div.style.left = "-5px"; div.style.position="absolute"; var self = this; div.onclick = function(e) { if(!self.IsPoint(object)) { var g = ICTMAP.IctMap.Tools.ToGeometory(e); self.OnToolClick.apply(self, [object, KAMAP_MAP_CLICKED, g]); } else { self.OnPointClick.apply(self, [object]); } }; div.style.cursor = "pointer"; var img = document.createElement("img"); img.src = ICTMAP_URL + "common/images2/number_label.gif"; img.width = 30; img.height = 40; div.appendChild(img); div.innerHTML += "
" /* div.style.backgroundImage="url('" + ICTMAP_URL + "common/images2/number_label.gif')"; div.style.backgroundRepeat = "no-repeat"; div.style.paddingTop = "3px"; div.style.paddingLeft = "3px"; div.style.zIndex = "999"; */ var cdiv = document.createElement("div"); cdiv.style.position = "absolute"; cdiv.style.top = "4px"; cdiv.style.left = "2px"; cdiv.style.width = "22px"; cdiv.style.textAlign = "center"; cdiv.innerHTML = number; div.appendChild(cdiv); p.div.appendChild(div); this.NumberBaloonCollection.push(pp.sid + "___num_baloon___"); } }, /************************************************************/ /* (method) CloseNumberBaloon オブジェクト番号の表示を閉じます。 */ /************************************************************/ CloseNumberBaloon : function(object) { if(typeof object == "undefined" || arguments.length == 0) { for(var i=0; i 2 && Math.abs(s_top - d_top) > 2) { nameList.style.left = o.div.offsetLeft + "px"; nameList.style.top = o.div.offsetTop + "px"; this._RemoveNameObjects(); } o.div.canvas.appendChild(nameList); } if(nameList.style.display == "none") { nameList.innerHTML = ""; nameList.style.display = "block"; } var a = $(p.sid + suffix); if(typeof a == "undefined" || a == null) { a = document.createElement("a"); a.setAttribute("id", p.sid + suffix); a.href = "#"; var callback = (this.IsPoint(o)) ? this.OnPointClick : this.OnToolClick; var g = {x:p.geox, y:p.geoy}; a.onclick = function() { clearOverlaysymbolhtml(); callback.apply(self, [o, KAMAP_MAP_CLICKED, g]); return false; }; if(name) { a.innerHTML = name; nameList.appendChild(a); } } }, /************************************************************/ /* (private method) _RemoveNameList 名前リストからの削除予約を行います。 削除は、レイヤー位置が変更になったときに実行されます。 */ /************************************************************/ _RemoveNameList : function(o) { var p = (this.IsPoint(o)) ? o : o.StartPoint; var suffix = "__title_link"; var a = $(p.sid + suffix); this._RemoveNameObjectsList.push(a); }, /************************************************************/ /* (private method) _RemoveNameObjects 名前リストから削除予約された名前を削除します。 */ /************************************************************/ _RemoveNameObjects : function() { var nameList = getRawObject("namelist"); for(var i=0; i display Small Window */ function markerClickPoint(pt1,pt2){ if(typeof google != "undefined"){ if(google.maps){ ICTMAP.points.each(function(pt){ if(pt.pointid==ICTMAP.USERPOINT_PREFIX+pt1+"-"+pt2){ google.maps.event.trigger(pt,'click'); } $break; }); } else { var tgtDiv='xmlovr_user_'+pt1+'-'+pt2+'_div'; $(tgtDiv).firstChild.onclick(); } }else{ var tgtDiv='xmlovr_user_'+pt1+'-'+pt2+'_div'; $(tgtDiv).firstChild.onclick(); } } var charset=""; /* *********************************************************** Example 4-3 (DHTMLapi.js) "Dynamic HTML:The Definitive Reference" 2nd Edition by Danny Goodman Published by O'Reilly & Associates ISBN 1-56592-494-0 http://www.oreilly.com Copyright 2002 Danny Goodman. All Rights Reserved. ************************************************************ */ // DHTMLapi.js custom API for cross-platform // object positioning by Danny Goodman (http://www.dannyg.com). // Release 2.0. Supports NN4, IE, and W3C DOMs. // Global variables var isCSS, isW3C, isIE4, isNN4, isIE6CSS, isFIREFOX; // initialize upon load to let all browsers establish content objects function initDHTMLAPI() { if (document.images) { isCSS = (document.body && document.body.style) ? true : false; isW3C = (isCSS && document.getElementById) ? true : false; isIE4 = (isCSS && document.all) ? true : false; isNN4 = (document.layers) ? true : false; isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false; isFIREFOX = (navigator.userAgent.match(/Firefox/)) ? true : false; } } // set event handler to initialize API //window.onload = initDHTMLAPI; // Seek nested NN4 layer from string name function seekLayer(doc, name) { var theObj; for (var i = 0; i < doc.layers.length; i++) { if (doc.layers[i].name == name) { theObj = doc.layers[i]; break; } // dive into nested layers if necessary if (doc.layers[i].document.layers.length > 0) { theObj = seekLayer(document.layers[i].document, name); } } return theObj; } // Convert object name string or object reference // into a valid element object reference function getRawObject(obj) { var theObj; if (typeof obj == "string") { if (isW3C) { theObj = document.getElementById(obj); } else if (isIE4) { theObj = document.all(obj); } else if (isNN4) { theObj = seekLayer(document, obj); } } else { // pass through object reference theObj = obj; } return theObj; } // Convert object name string or object reference // into a valid style (or NN4 layer) reference function getObject(obj) { var theObj = getRawObject(obj); if (theObj && isCSS) { theObj = theObj.style; } return theObj; } // Position an object at a specific pixel coordinate function shiftTo(obj, x, y) { var theObj = getObject(obj); if (theObj) { if (isCSS) { // equalize incorrect numeric value type var units = (typeof theObj.left == "string") ? "px" : 0; theObj.left = x + units; theObj.top = y + units; } else if (isNN4) { theObj.moveTo(x,y) } } } // Move an object by x and/or y pixels function shiftBy(obj, deltaX, deltaY) { var theObj = getObject(obj); if (theObj) { if (isCSS) { // equalize incorrect numeric value type var units = (typeof theObj.left == "string") ? "px" : 0; theObj.left = getObjectLeft(obj) + deltaX + units; theObj.top = getObjectTop(obj) + deltaY + units; } else if (isNN4) { theObj.moveBy(deltaX, deltaY); } } } // Set the z-order of an object function setZIndex(obj, zOrder) { var theObj = getObject(obj); if (theObj) { theObj.zIndex = zOrder; } } // Set the background color of an object function setBGColor(obj, color) { var theObj = getObject(obj); if (theObj) { if (isNN4) { theObj.bgColor = color; } else if (isCSS) { theObj.backgroundColor = color; } } } // Set the visibility of an object to visible function show(obj) { var theObj = getObject(obj); if (theObj) { theObj.visibility = "visible"; } } // Set the visibility of an object to hidden function hide(obj) { var theObj = getObject(obj); if (theObj) { theObj.visibility = "hidden"; } } // Retrieve the x coordinate of a positionable object function getObjectLeft(obj) { var elem = getRawObject(obj); var result = 0; if (document.defaultView) { var style = document.defaultView; var cssDecl = style.getComputedStyle(elem, ""); result = cssDecl.getPropertyValue("left"); } else if (elem.currentStyle) { result = elem.currentStyle.left; } else if (elem.style) { result = elem.style.left; } else if (isNN4) { result = elem.left; } return parseInt(result); } // Retrieve the y coordinate of a positionable object function getObjectTop(obj) { var elem = getRawObject(obj); var result = 0; if (document.defaultView) { var style = document.defaultView; var cssDecl = style.getComputedStyle(elem, ""); result = cssDecl.getPropertyValue("top"); } else if (elem.currentStyle) { result = elem.currentStyle.top; } else if (elem.style) { result = elem.style.top; } else if (isNN4) { result = elem.top; } return parseInt(result); } // Retrieve the rendered width of an element function getObjectWidth(obj) { var elem = getRawObject(obj); var result = 0; if (elem.offsetWidth) { result = elem.offsetWidth; } else if (elem.clip && elem.clip.width) { result = elem.clip.width; } else if (elem.style && elem.style.pixelWidth) { result = elem.style.pixelWidth; } return parseInt(result); } // Retrieve the rendered height of an element function getObjectHeight(obj) { var elem = getRawObject(obj); var result = 0; if (elem.offsetHeight) { result = elem.offsetHeight; } else if (elem.clip && elem.clip.height) { result = elem.clip.height; } else if (elem.style && elem.style.pixelHeight) { result = elem.style.pixelHeight; } return parseInt(result); } // Return the available content width space in browser window function getInsideWindowWidth() { if (window.innerWidth) { return window.innerWidth; } else if (isIE6CSS) { // measure the html element's clientWidth return document.body.parentElement.clientWidth; } else if (document.body && document.body.clientWidth) { return document.body.clientWidth; } return 0; } // Return the available content height space in browser window function getInsideWindowHeight() { if (window.innerHeight) { return window.innerHeight; } else if (isIE6CSS) { // measure the html element's clientHeight return document.body.parentElement.clientHeight; } else if (document.body && document.body.clientHeight) { return document.body.clientHeight; } return 0; } var charset=""; /********************************************************************** * * $Id: xhr.js,v 1.8 2006/02/07 03:19:55 pspencer Exp $ * * purpose: a simple cross-browser XmlHttpRequest interface that adds * support for multiple, concurrent requests * * author: Paul Spencer (pspencer@dmsolutions.ca) * * TODO: * - reponse only contains responseText, should contain response so * access to reponseXML is possible if we ever want to implement * xml stuff (i.e. real AJAX) * ********************************************************************** * * Copyright (c) 2005, DM Solutions Group Inc. * * Permission is hereby granted, free of charge, to any person obtaining a * copy of this software and associated documentation files (the "Software"), * to deal in the Software without restriction, including without limitation * the rights to use, copy, modify, merge, publish, distribute, sublicense, * and/or sell copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included * in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER * DEALINGS IN THE SOFTWARE. * **********************************************************************/ /* to make an asynchronous call to the server, execute the call() function * with the URL to the script to be executed. The second and third * parameters to call() define object and method to call when the server * returns its response ... if the second parameter is null, third is * just a function. If second is an object, then the third is a method * of that instance. * * There is an optional fourth parameter to issue the request as a POST * to the server. This is important in some browsers due to limited * URL length. * * The callback function is called when the request completes. There is * currently no callback for errors so they just silently fail if the * server side script dies. The callback function is passed a single * parameter, the text output of the server side script. In ka-Map, this * text is typically some javascript to eval(). */ var aXmlHttp = new Array(); var aXmlResponse = new Array(); function xmlResult() { for(var i=0;i url // o -> object (can be null) to invoke function on // f -> callback function // p -> optional argument to specify POST function call(u,o,f) { var method = "GET"; var dat; if (arguments.length==4){ method = "POST"; tmp = u.split(/\?/); u = tmp[0]; dat = tmp[1]; } var idx = aXmlHttp.length; for(var i=0; i * * 2) add a
element to your page to contain the legend. The div must * have a unique id: * *
* * 3) create a new instance of kaLegend and pass it the id of the div: * * myKaLegend = new kaLegend( 'legend' ); * * and that's it :) * *****************************************************************************/ /****************************************************************************** * kaLegend * * internal class to handle the legend. * * oKaMap - the ka-Map object to attach to. * szID - string, the id of a div that will contain the legend * bStatic - boolean, true to use static legends, false to use dynamic legends * *****************************************************************************/ function kaLegend(oKaMap, szID, bStatic, options) { this.kaMap = oKaMap; this.domObj = this.kaMap.getRawObject(szID); this.type = (bStatic)?'static':'dynamic'; this.expanders = []; this.queryCBs = []; this.urlBase = this.kaMap.server; this.urlBase += (this.urlBase!=''&&this.urlBase.substring(-1)!='/')?'':'/'; this.showQueryCBs = true; if (this.type == 'static') { this.domImg = document.createElement( 'img' ); this.domImg.src = this.kaMap.aPixel.src; this.domObj.appendChild( this.domImg ); } else { this.domObj.innerHTML = ' '; } this.showVisibilityControl = true; this.showQueryControl = true; this.showOpacityControl = true; this.showOrderControl = true; if (typeof options != 'undefined') { this.showVisibilityControl = typeof options.visibility != 'undefined' ? options.visibility : true; this.showQueryControl = typeof options.query != 'undefined' ? options.query : true; this.showOpacityControl = typeof options.opacity != 'undefined' ? options.opacity : true; this.showOrderControl = typeof options.order != 'undefined' ? options.order : true; } this.kaMap.registerForEvent( KAMAP_SCALE_CHANGED, this, this.update ); this.kaMap.registerForEvent( KAMAP_MAP_INITIALIZED, this, this.update ); this.kaMap.registerForEvent( KAMAP_LAYERS_CHANGED, this, this.draw ); this.kaMap.registerForEvent( KAMAP_LAYER_STATUS_CHANGED, this, this.update ); }; kaLegend.prototype.update = function(eventID) { var url = ''; if (this.type == 'static') { var newImg = document.createElement('img'); newImg.src = 'legend.phtml?map=' + this.kaMap.currentMap + '&scale='+this.kaMap.getCurrentScale(); this.domObj.replaceChild(newImg, this.domImg); this.domImg = newImg; } else { if (eventID == KAMAP_MAP_INITIALIZED) { while(this.domObj.childNodes.length > 0) { this.domObj.removeChild(this.domObj.childNodes[0]); } this.draw(); } else if (eventID == KAMAP_SCALE_CHANGED) { var oMap = this.kaMap.getCurrentMap(); var aLayers = oMap.getAllLayers(); var s = this.kaMap.getCurrentScale(); for (var i in aLayers) { var oLayer = aLayers[i]; var oImg = this.kaMap.getRawObject( 'legendImg_' + oLayer.name); if (oImg) { //added by Lorenzo var oParent = oImg.parentNode; var tId = oImg.id; var tVisibility = oImg.visibility; oParent.removeChild(oImg); oImg = document.createElement('img'); oImg.id = tId; oImg.title = tId; oImg.visibility = tVisibility; oImg.src = 'legend.phtml?map=' + this.kaMap.currentMap + '&scale=' + s + '&g=' + oLayer.name; oParent.appendChild(oImg); /* expander = getRawObject('expander_'+oLayer.name); expander.expandable = oImg; expander.expanded = true; kaLegend_expander.apply( expander ); */ } //added by cappu this.setOnOffLayer(oLayer); } } else if (eventID == KAMAP_LAYER_STATUS_CHANGED) { var layer = arguments[1]; for (var i=0; i=0;i--) { if (aLayers[i].kaLegendObj == null) { this.createLayerHTML( aLayers[i] ); } else { try{this.domObj.removeChild( aLayers[i].kaLegendObj );} catch(e){}; } } for (var i=(aLayers.length-1);i>=0;i--) { this.domObj.appendChild( aLayers[i].kaLegendObj ); } if (this.kaMap.isIE4) { for(var i=0; i 1) { //OPACITY IMAGES if (this.showOpacityControl) { td = document.createElement('td'); td.width = '19'; img = document.createElement( 'img' ); img.src = 'common/images2/sun_white.png'; img.width = '7'; img.alt = "Decrease layer opacity"; img.title = "Decrease layer opacity"; img.style.cursor ='crosshair'; img.kaLegend = this; img.oLayer = oLayer; img.onclick = kaLegend_opacityDown; td.appendChild( img ); img = document.createElement( 'img' ); img.src = 'common/images2/sun_grey.png'; img.width = '7'; img.style.marginLeft = '2px'; img.alt = "Increase layer opacity"; img.title = "Increase layer opacity"; img.style.cursor ='crosshair'; img.kaLegend = this; img.oLayer = oLayer; img.onclick = kaLegend_opacityUp; td.appendChild( img ); tr.appendChild(td); } if (this.showOrderControl) { //SHIFT LAYERS UP DOWN td = document.createElement('td'); td.width = '10'; td.style.padding = '1px'; img = document.createElement( 'img' ); img.src = 'common/images2/arrow_up.png'; img.width = '10'; img.height = '8'; img.style.marginBottom = '2px'; img.alt = "Shift Layer Up"; img.title = "Shift Layer Up"; img.style.cursor ='crosshair'; img.kaLegend = this; img.oLayer = oLayer; img.myDiv = d; img.onclick = kaLegend_moveLayerUp; td.appendChild( img ); img = document.createElement( 'img' ); img.src = 'common/images2/arrow_down.png'; img.width = '10'; img.height = '8'; img.alt = "Shift Layer Down"; img.title = "Shift Layer Down"; img.style.cursor ='crosshair'; img.kaLegend = this; img.oLayer = oLayer; img.myDiv = d; img.onclick = kaLegend_moveLayerDown; td.appendChild( img ); tr.appendChild(td); } } if (this.showQueryControl) { //layer queryable images td = document.createElement('td'); td.width = '14'; img = document.createElement( 'img' ); img.width = '14'; img.height = '14'; if (oLayer.queryable) { if (oLayer.isQueryable()) { img.src = 'common/images2/icon_query_on.png'; } else { img.src = 'common/images2/icon_query_off.png'; } img.onmouseover = kaLegend_queryOnMouseOver; img.onmouseout = kaLegend_queryOnMouseOut; img.onclick = kaLegend_queryOnClick; img.oLayer = oLayer; } else { img.src = 'common/images2/icon_query_x.png'; } td = document.createElement( 'td' ); td.appendChild(img); td.width = '16'; tr.appendChild(td); } td = document.createElement( 'td' ); td.innerHTML = oLayer.name2; tr.appendChild(td); tb.appendChild(tr); t.appendChild( tb ); d.appendChild(t); //img = document.createElement( 'img' ); //img.id = 'legendImg_' + oLayer.name; //img.src = this.urlBase + 'legend.phtml?map='+this.kaMap.currentMap+'&scale='+this.kaMap.getCurrentScale()+'&g='+oLayer.name; /*modificato da kappu, nel cvs dimentica di aggiungere immagine */ //d.appendChild(img); //expander.expandable = img; sakai oLayer.kaLegendObj = d; //kaLegend_expander.apply( expander ); sakai //adedd by cappu this.setOnOffLayer(oLayer,oLayer.isVisible); //prototype.jsを入れたらエラーになるのでコメントアウト }; function kaLegend_toggleLayerQueryable() { this.kaLegend.kaMap.setLayerQueryable( this.value, this.checked ); }; function kaLegend_queryOnMouseOver() { if (this.oLayer.queryable) { this.src = 'common/images2/icon_query_over.png'; } }; function kaLegend_queryOnMouseOut() { if (this.oLayer.queryable) { if (this.oLayer.isQueryable()) { this.src = 'common/images2/icon_query_on.png'; } else { this.src = 'common/images2/icon_query_off.png'; } } }; function kaLegend_queryOnClick() { if (this.oLayer.queryable) { if (this.oLayer.isQueryable()) { this.oLayer.setQueryable( false ); this.src = 'common/images2/icon_query_off.png'; } else { this.oLayer.setQueryable( true ); this.src = 'common/images2/icon_query_on.png'; } } }; function kaLegend_toggleLayerVisibility() { this.kaLegend.kaMap.setLayerVisibility( this.value, this.checked ); } function kaLegend_expander() { this.expanded = !this.expanded; this.src = (this.expanded)?'common/images2/collapse.png':'common/images2/expand.png'; this.expandable.style.display = (this.expanded)?'block':'none'; }; function kaLegend_expandAll() { var kaLeg = this.kaLegend; for (var i=0; i