Проблема с OpenLayers через компоненту TWebBrowser (Delphi)

arev · Сообщение **arev** » 25 мар 2013, 07:47

Работаю с картой OpenStreetMap с использованием java-библиотеки OpenLayers, отображая ее в компоненте TWebBrowser (Delphi7, Delphi-XE3, одинаковый результат). Сам скрипт отлажен отдельно, и в виде html-файла отображается правильно. А вот компонента не отображает элементы одного векторного слоя, хотя проверено, что в память они добавляются, программно все доступно.
Подскажите, пожалуйста, кто в теме, в чем м.б. проблема. В смысле, конкретно, кроме кривизны рук новичка в таких приложениях))

Суть кода (дальше не привожу, потому что не всё отображается уже при инициализации карты):
//-----
public
HTMLWindow_Main: IHTMLWindow2;
v: Variant;
HTMLDocument: IHTMLDocument2;
end;

procedure TfmEx_OSM.FormCreate(Sender: TObject);
begin
wbMain.Navigate('about:blank'); {инициализация WebBrouser'а}
HTMLWindow_Main:=(wbMain.Document as IHTMLDocument2).parentWindow;
end;

procedure TfmEx_OSM.sbMapClick(Sender: TObject); //просто по кнопке
var
HTMLStr : AnsiString;
begin
HTMLStr:='<html> '+
'<head> '+
'<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /> '+
'<script src="http://www.openlayers.org/api/OpenLayers.js"></script> '+
'<script type="text/javascript"> '+
//и т.д., текст скрипта

HTMLDocument:=wbMain.Document as IHTMLDocument2;
//wbMain - компонента TWebBrowser на форме, отображающая скрипт (карту OSM)
v:=VarArrayCreate([0, 0], varVariant);
v[0]:=HTMLStr;
HTMLDocument.Write(PSafeArray(TVarData(v).VArray));
HTMLDocument.Close;
end;
//-----

Сообщение **bim2010** » 25 мар 2013, 08:50

Рабочий пример совместной работы Visual studio и OL:

Код: Выделить всё

PROCEDURE F3GOROD
   SELECT KATPER
   XBMPFILE=BMPFILE 
   XCODEKART=CODEKARTA
   TIK7=2
   XF3GOROD=0
SCATTER MEMVAR
SET DECIMALS TO 18
pipi=3.141592653589793238462
M.Long = M.Long * 20037508.34/180
M.Lat = log(tan((90 + M.Lat) * pipi / 360)) / (pipi / 180)
M.Lat = M.Lat * 20037508.34 / 180
TEXT TO lcHtml NOSHOW TEXTMERGE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">
		  <head>
		    <title>Смоленск</title>
		    <meta http-equiv='imagetoolbar' content='no'/>
		    <style type="text/css"> v\:* {behavior:url(#default#VML);}
		        html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
		        body { margin: 10px; background: #fff; }
		        h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
		        #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
		        #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
		        #map { height: 95%; border: 1px solid #888; }
		    </style>
		    <script src="file://localhost/c:/_transport/OpenLayers-2.9.1/OpenLayers-2.9.1/lib/OpenLayers.js"    type="text/javascript"></script>
		    <script type="text/javascript">
		        var map;		    
			    var mapBounds = new OpenLayers.Bounds( 3510928.9959, 7298658.69525, 3598060.05994, 7360004.41386);
			    var mapMinZoom = 0;
			    var mapMaxZoom = 9;
		        // avoid pink tiles
		        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		        OpenLayers.Util.onImageLoadErrorColor = "transparent";
		        function init(){
	            var options = {
	                controls: [],
		            maxExtent: new OpenLayers.Bounds(  3510928.9959, 7298658.69525, 3598060.05994, 7360004.41386 ),
		            maxResolution: 393.645920,
		            numZoomLevels: 10
		            };
	            map = new OpenLayers.Map('map', options);
		        var layer = new OpenLayers.Layer.TMS( "TMS Layer","file://localhost/c:/_map2010/sm_mercat84/",		        
		            {  url: '', serviceVersion: '.', layername: '.', alpha: true,
						type: 'png', getURL: overlay_getTileURL 
					});
		        map.addLayer(layer);
				map.zoomToExtent( mapBounds );		
	            map.addControl(new OpenLayers.Control.PanZoomBar());
	            map.addControl(new OpenLayers.Control.MousePosition());
	            map.addControl(new OpenLayers.Control.MouseDefaults());
	            map.addControl(new OpenLayers.Control.KeyboardDefaults());
                map.setCenter(new OpenLayers.LonLat(<<ALLTRIM(STR(M.Long,12,6))>>,                                      
                <<ALLTRIM(STR(M.Lat,12,6))>>),<<TRANSFORM(8)>>);                
                
           // allow testing of specific renderers via "?renderer=Canvas", etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
             var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap({'default':{
                    strokeColor: "#00FF00",
                    strokeOpacity: 1,
                    strokeWidth: 3,
                    fillColor: "#FF5500",
                    fillOpacity: 0.5,
                    pointRadius: 4,                    
                    pointerEvents: "visiblePainted",
                    label : " ${nam1}",
                    fontColor: "${favColor}",
                    fontSize: "14px",                   
                    fontFamily: "Courier New, monospace",
                    fontWeight: "bold",
                    labelAlign: "${align}",
                    labelXOffset: "${xOffset}",
                    labelYOffset: "${yOffset}"
                }}),
                renderers: renderer
            });
            
            // create a point feature
            var point = new OpenLayers.Geometry.Point(<<ALLTRIM(STR(M.Long,12,6))>>,<<ALLTRIM(STR(M.Lat,12,6))>>);           
            var pointFeature = new OpenLayers.Feature.Vector(point);
            pointFeature.attributes = {
                nam1: "<<strconv(ALLTRIM(m.name),9,1049)>>",
                favColor: 'red',
                align: "cm",
               // positive value moves the label to the right
                xOffset: 60,
                // negative value moves the label down
                yOffset: -15                
            };
            map.addLayer(vectorLayer);
            vectorLayer.addFeatures([pointFeature]);           
	        }
			
	        function overlay_getTileURL(bounds) {
	            var res = this.map.getResolution();
	            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	            var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
	            var z = this.map.getZoom();
				if (x >= 0 && y >= 0) {
		            return this.url + z + "/" + x + "/" + y + "." + this.type;				
				} else {
	                return "http://www.maptiler.org/img/none.png";
				}
			}
			
		   function getWindowHeight() {
		        if (self.innerHeight) return self.innerHeight;
		        if (document.documentElement && document.documentElement.clientHeight)
		            return document.documentElement.clientHeight;
		        if (document.body) return document.body.clientHeight;
			        return 0;
		    }

		    function getWindowWidth() {
			    if (self.innerWidth) return self.innerWidth;
			    if (document.documentElement && document.documentElement.clientWidth)
			        return document.documentElement.clientWidth;
			    if (document.body) return document.body.clientWidth;
			        return 0;
		    }

		    function resize() {  
			    var map = document.getElementById("map");  
   		        map.style.height = (getWindowHeight()-10) + "px";		    
			    map.style.width = (getWindowWidth()-10) + "px";			    		    
				if (map.updateSize) { map.updateSize(); };
		    } 

		    onresize=function(){ resize(); };
		    </script>
		  </head>
		  <body onload="init()">
		    <div id="map" style="height: 700px; z-index: 1; width: 990px; position: absolute; top: 3px; left: 200px;"></div>
		  </body>
		</html>
    ENDTEXT
    STRTOFILE(lcHtml,"MiHtml.htm")
     THISFORM.oleIE.Navigate2(FULLPATH("MiHtml.htm"))
  IF XXSPRAV=3
     SELECT katper
  ENDIF
RETURN

Тект MiHtml.htm:

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">
		  <head>
		    <title>Смоленск</title>
	            <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
            
		    <style type="text/css"> v\:* {behavior:url(#default#VML);}
		        html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: Arial, Helvetica, sans-serif; }
		        body { margin: 10px; background: #fff; }
		        h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
		        #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
		        #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
		        #map { height: 95%; border: 1px solid #888; }
		    </style>
		    <script src="file://localhost/c:/_transport/OpenLayers-2.9.1/OpenLayers-2.9.1/lib/OpenLayers.js"    type="text/javascript"></script>
		    <script type="text/javascript">
		        var map;
			    var mapBounds = new OpenLayers.Bounds( 3539261.38567, 7269311.58712, 3586037.98224, 7296133.88638 );
			    var mapMinZoom = 1;		    		    
			    var mapMaxZoom = 9;			    
		        // avoid pink tiles
		        OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
		        OpenLayers.Util.onImageLoadErrorColor = "transparent";
		        function init(){
	            var options = {
	                controls: [],
		            maxExtent: new OpenLayers.Bounds(  3539261.38567, 7269311.58712, 3586037.98224, 7296133.88638 ),
		            maxResolution: 225.144348,
		            numZoomLevels: 10		            
		            };
	            map = new OpenLayers.Map('map', options);
	

		        var layer = new OpenLayers.Layer.TMS( "TMS Layer","file://localhost/c:/map2011/",		        
		            {  url: '', serviceVersion: '.', layername: '.', alpha: true,
						type: 'png', getURL: overlay_getTileURL 
					});
		        map.addLayer(layer);
				map.zoomToExtent( mapBounds );	
	            map.addControl(new OpenLayers.Control.PanZoomBar());
	            map.addControl(new OpenLayers.Control.MousePosition());
	            map.addControl(new OpenLayers.Control.MouseDefaults());
	            map.addControl(new OpenLayers.Control.KeyboardDefaults());
                          map.addControl(new OpenLayers.Control.Permalink());
  	            map.addControl(new OpenLayers.Control.Permalink('permalink'));
                map.setCenter(new OpenLayers.LonLat(3574015.1106,                                      
                7283322.9051),8.000000000000000000);                
           // allow testing of specific renderers via "?renderer=Canvas", etc
            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
             var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap({'default':{
                    strokeColor: "#00FF00",
                    strokeOpacity: 1,
                    strokeWidth: 3,
                    fillColor: "#FF5500",
                    fillOpacity: 0.5,
                    pointRadius: 4,                    
                    pointerEvents: "visiblePainted",
                    label : " ${nam1}",
//                    fontColor: "${favColor}",
                    fontColor: "#FF5500",
                    fontSize: "14px",                   
                    fontFamily: "Times New Roman",                    
                    fontWeight: "bold",
                    labelAlign: "${align}",
                    labelXOffset: "${xOffset}",
                    labelYOffset: "${yOffset}"
                }}),
                renderers: renderer
            });
            
            // create a point feature
            var point = new OpenLayers.Geometry.Point(3574015.1106,7283322.9051);           
            var pointFeature = new OpenLayers.Feature.Vector(point);
            pointFeature.attributes = {
                nam1: "ЭЛИТИС, ООО/3574015.1106/7283322.9051",                
                favColor: 'red',
                align: "cm",
               // positive value moves the label to the right
                xOffset: 60,
                // negative value moves the label down
                yOffset: -15                
            };
            map.addLayer(vectorLayer);
            vectorLayer.addFeatures([pointFeature]);           
	        }
	        function overlay_getTileURL(bounds) {
	            var res = this.map.getResolution();
	            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
	            var y = Math.round((bounds.bottom - this.maxExtent.bottom) / (res * this.tileSize.h));
	            var z = this.map.getZoom();
				if (x >= 0 && y >= 0) {
		            return this.url + z + "/" + x + "/" + y + "." + this.type;				
				} else {
	                return "http://www.maptiler.org/img/none.png";
				}
			}
			

		   function getWindowHeight() {
		        if (self.innerHeight) return self.innerHeight;
		        if (document.documentElement && document.documentElement.clientHeight)
		            return document.documentElement.clientHeight;
		        if (document.body) return document.body.clientHeight;
			        return 0;
		    }
		    function getWindowWidth() {
			    if (self.innerWidth) return self.innerWidth;
			    if (document.documentElement && document.documentElement.clientWidth)
			        return document.documentElement.clientWidth;
			    if (document.body) return document.body.clientWidth;
			        return 0;
		    }
		    function resize() {  
 		       var map = document.getElementById("map");  
   		        map.style.height = (getWindowHeight()-10) + "px";		    
		       map.style.width = (getWindowWidth()-10) + "px";			    		    
				if (map.updateSize) { map.updateSize(); };
		    } 
		    onresize=function(){ resize(); };
		    </script>
		  </head>
		  <body onload="init()">
		    <div id="map" style="height: 700px; z-index: 1; width: 990px; position: absolute; top: 3px; left: 200px;"></div>
		  </body>
		</html>

arev · Сообщение **arev** » 25 мар 2013, 11:06

Не силен в VisualStudio и OLE, но это

THISFORM.oleIE.Navigate2(FULLPATH("MiHtml.htm"))

видимо используется для отображения скрипта. В Delphi так не получится, вроде как?.. А проект д.б. выполнен именно там. Там кроме TWebBrowser ничего подходящего не знаю...
Скрипт сам аналогичен, кстати, вот тот vectorLayer и не отображается. А в браузере отображается.

Сообщение **bim2010** » 25 мар 2013, 16:33

В двух словах в приведенном выше тексте на форме создан OLE Control к Internet Explorer.
Все это с рождения было в Delphi.
Возможно несколько способов:
TWebBrowser
MSHTML DLL
Ссылки:
http://delphiworld.narod.ru/base/webbrowser_notes.html
http://super-memory.com/sml/colls/webbrowser.htm
Delphi HTML Viewer Components http://code.google.com/p/thtmlviewer/
http://citforum.ru/programming/delphi/delphi_web.shtml
http://www.delphiplus.org/articles/api/ ... index.html
http://www.codenet.ru/progr/delphi/stat/html.php
Вообще идея скрестить VS+OL или Delphi+OL не очень хорошая. Openlayers имеет ряд ограничений, посмотрите в сторону взаимодействия Delphi с полноценными ГИС.
http://www.delphikingdom.com/asp/itemq. ... itemid=471
http://freegis.org/database/?cat=25
Тема внедрение ГИС в delphi 7 уже была на Gis-lab
viewtopic.php?f=2&t=10613

arev · Сообщение **arev** » 26 мар 2013, 09:06

Не знаю, чем это обернется в будущем, но пока все получилось, спасибо!
По примеру дошло с трудом, просто, что ActiveX компонент TWebBrowser это потомок OleControl, у меня-то не Visual studio, в моей среде он именно как TWebBrowser в свойствах значится, в чистом виде OleControl там нет. Ну, так или иначе, если в тот же TWebBrowser загружать файл посредством Navigate2, все отображается правильно:

var
Src : OleVariant;
//...
Src:='file:///E:/DOCUMENTS/COOP/FOR_OFFER_WEBMAP/EX_OSM/test.html';
//позже доработаю, FULLPATH тут не доступен
wbMain.Navigate2(Src);

А большего, вроде, и не надо. Да, и спасибо за ссылки, честное слово, искал по сайту, не додумался именно ГИС с delphi ввести) Просто задача так не стоит - какую выбрать ГИС, это определено жестко, да и использовать какие-то специализированные компоненты, позволяющие аналог 2gis сделать - как из пушки по воробьям тут.

Жаль, правда, что так и не понял, в чем причина такой избирательности IE, при работе через IHTMLDocument2.

Форумы GIS-Lab.info

Проблема с OpenLayers через компоненту TWebBrowser (Delphi)

Проблема с OpenLayers через компоненту TWebBrowser (Delphi)

Re: Проблема с OpenLayers через компоненту TWebBrowser (Delp

Re: Проблема с OpenLayers через компоненту TWebBrowser (Delp

Re: Проблема с OpenLayers через компоненту TWebBrowser (Delp

Re: Проблема с OpenLayers через компоненту TWebBrowser (Delp

Кто сейчас на конференции