SVG картография

[Kamur]

HTML5, CSS3, SVG, Canvas и т.д.. Хотелось бы обсудить перспективы, возможности и т.п. этих "новинок" в web-картографии. Смотрел Nokia Map (http://here.com), для новичка терпимо. Кто-то скажет: зачем, ведь есть Geoserver, OSM, Mapnik, Leaflet, Openlayers и т.п., но интуиция подсказывает , что у формата (SVG) большое будущее. У данного направления есть перспективы?

[SergeyRyzhkov]

HTML5, CSS3, SVG, Canvas и т.д.. Хотелось бы обсудить перспективы, возможности и т.п. этих "новинок" в web-картографии. Смотрел Nokia Map (http://here.com), для новичка терпимо. Кто-то скажет: зачем, ведь есть Geoserver, OSM, Mapnik, Leaflet, Openlayers и т.п., но интуиция подсказывает , что у формата (SVG) большое будущее. У данного направления есть перспективы?

Как-то ты смешал и ГИС-сервер, и набор данных, и инструмент генерации карт, и JavaScript движки и собственно сам формат.
Если брать конкретно твой вопрос, ИМНО!!!, для WEB-решений вполне комфортно, легко (как по производительности, так и по пониманию) использоваь canvas. SVG-слишком монструозно для данной задачи (из пушки по воробьям). Ты правильно привел пример Leaflet - изящно, легко красиво.

[Kamur]

Картограф на Canvas без SVG? Вы сами-то понимаете о чем речь? Leaflet и Openlayers начало на JS с поддержкой библиотек в сотни строк тяжелого кодинга (попробуйте правильно их подключить и настроить для вывода данных без головной боли), а SVG браузеры сами читают . Значит Mapnik уже не нужен. Tiles читаются с диска, можно IndexedDB подключить или просто кинуть их в папку. Osm-формат, как и SVG потомки XML, но SVG более читабелен. Привязан к координатам, маркеры, анимация и т.п. без проблем. В идеале: tiles, вектор дорог и строений для routing и jps. Как-то, так.

[SergeyRyzhkov]

Картограф на Canvas без SVG? Вы сами-то понимаете о чем речь? Флуднуть не подумав?

1. Кто такой "картограф" я не совсем понял, но и не хочу см. п.4
2. Я понимаю о чем речь, уж 20 лет в этому варюсь
3. Я не флудил, а как минимум постарался понять твой вопрос. Между прочим проявил уважение и высказал свое мнение, чего не скажешь о тебе ...
4. Далее не вижу смысл с таким как ты общаться.

ЗЫ: Все же тебе для общего образования кину пару ссылок из своего запасника:
http://blogs.msdn.com/b/kichinsky/archi ... s-svg.aspx
http://w3pro.ru/article/svg-ili-canvas- ... sti-vybora

[Kamur]

Я на Вы, а ты мне тыкаешь? Щегол уважительный.
1. Картограф - набор инструментов для вывода картографических данных.
2. Если не понимаешь, изучать или читать не пробовал?
3. Ляпнуть чушь не подумав ...
4. Нашим легче

[SergeyRyzhkov]

Уважаемый,Kamur !
На форумах принято на ты. Поэтому я с таким обращением и писал, ни в коем случае не в плане "тыканья" !
Во-первых просто в твоем первом сообщении не совсем понятно в чем вопрос то ? Если просто "хотелось бы обсудить перспективы", ну вряд ли коллеги прямо так бросятся на данном форуме эту тему обсуждать. Поэтому задай более узкий вопрос, на который действительно интересно было бы пообщаться, подумать.
Я не в плане упрека, но ты смешал в кучу разные продукты (компоненты) (ГИС-сервер, средства рендеринга исходных данных, средства клиентского рендеринга уже готового продукта карты) и уперся просто в формат (в SVG).

Я на Вы, а ты мне тыкаешь? Щегол уважительный.
1. Картограф - набор инструментов для вывода картографических данных.
2. Если не понимаешь, изучать или читать не пробовал?
3. Ляпнуть чушь не подумав ...
4. Нашим легче

Смешной ты ) . Как считаешь с таким образом ведения диалога он у тебя с кем-нибудь получится?
Знаешь, я вот на формах общаюсь по двум причинам:
1. По мере возможности поделиться своим опытом
2. Получить новые знания и опыт от других коллег
Собачиться нет у меня такой цели и тебе не советую...

[Kamur]

Canvas без SVG - спасибо за опыт.

[SergeyRyzhkov]

Canvas без SVG - спасибо за опыт.

Да не за что. При этом заметь я написал ИМНО (то есть свое личное мнение).
SVG- технология отличная. Но мое мнение для большинства случаев применения именно, как ты сам обозначил в WEB-картографии, SVG-тяжеловат. Вообще считаю нельзя их сравнивать, разные принципы, разная область применения.
У меня был проект для предоставлению информации о земельных участках коттеджного поселка. Там все сделали на SVG, так как нужна была красивая графика, динамика управления контентом и т.д.
Но ты же задал вопрос про WEB-картографию. Где нужно отобразить всего 5 типов геометрии (вектора). причем порой в очень болших объемах, с возможность "упрощения", решения гем.задач и чтобы все быстро было. Здесь считаю канвас (как попиксельный формат) для 2D карт самое то.
Удачи тебе!

[ericsson]

Разговор слепого с глухим, при том с каждой стороны - о чем-то своем.
То, что SVG может быть отдан сервером, как тайлы в TMS или как полный extent по WMS, с генерализацией на стороне сервера - никто не вспомнил?
Определитесь сначала (в большей степени касается топикстартера), что именно вы обсуждаете и в чем конкретно состоит вопрос. А мусолить невнятные "перспективы" - либо бессмысленно, либо слишком объемный труд выйдет.

[Kamur]

О том и речь. Поселок от мира мало чем отличается. Главное скорость передачи данных, которые зависят от объема передаваемых данных. Исключив посредственный код можно добиться хорошей интерактивности. И в данном случае при минимальной разнице (если таковая существует) SVG может заметь .osm и shapefile. Конечно проблем пока много и особенно по API и молодости технологий, но ведь не зря Yandex MAp, а возможно и другие "втихоря" переходят на SVG. Простой скрипт от лень искать источник, частично заменит Leaflet and OpenLayers. Надо допиливать, но сейчас занят другим. Согласись это много меньше весит и в разы быстрее, чем JS-script предлагаемые на сегодняшний день. Мне кажется у SVG приличные перспективы.

html5

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

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Zooming via HTML5 Canvas Context</title>
	<style type="text/css" media="screen">
		
		canvas { display:block; margin:1em auto; background:#fff; border:1px solid #ccc }
	</style>
</head><body>

<canvas>
	<object data="tiger.svg" type="image/svg+xml">
</canvas>

<script type="text/javascript" charset="utf-8">
	var canvas = document.getElementsByTagName('canvas')[0];
	canvas.width = 1000; canvas.height = 650;
	var gkhead = new Image;
		
	gkhead.src = "tiger.svg";

	window.onload = function(){		
		var ctx = canvas.getContext('2d');
		trackTransforms(ctx);
		function redraw(){
			// Clear the entire canvas - Очистить весь холст
			var p1 = ctx.transformedPoint(0,0);
			var p2 = ctx.transformedPoint(canvas.width,canvas.height);
			ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);

			ctx.drawImage(gkhead,20,20);

		}
		redraw();
		
		var lastX=canvas.width/2, lastY=canvas.height/2;
		var dragStart,dragged;
		canvas.addEventListener('mousedown',function(evt){
			document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
			lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
			lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
			dragStart = ctx.transformedPoint(lastX,lastY);
			dragged = false;
		},false);
		canvas.addEventListener('mousemove',function(evt){
			lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
			lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
			dragged = true;
			if (dragStart){
				var pt = ctx.transformedPoint(lastX,lastY);
				ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
				redraw();
			}
		},false);
		canvas.addEventListener('mouseup',function(evt){
			dragStart = null;
			if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
		},false);

		var scaleFactor = 1.1;//Коофициент зума
		var zoom = function(clicks){
			var pt = ctx.transformedPoint(lastX,lastY);
			ctx.translate(pt.x,pt.y);
			var factor = Math.pow(scaleFactor,clicks);
			ctx.scale(factor,factor);
			ctx.translate(-pt.x,-pt.y);
			redraw();
		}

		var handleScroll = function(evt){
			var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
			if (delta) zoom(delta);
			return evt.preventDefault() && false;
		};
		canvas.addEventListener('DOMMouseScroll',handleScroll,false);
		canvas.addEventListener('mousewheel',handleScroll,false);
	};
	
	
	// Adds ctx.getTransform() - returns an SVGMatrix
	// Adds ctx.transformedPoint(x,y) - returns an SVGPoint
	function trackTransforms(ctx){
		var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
		var xform = svg.createSVGMatrix();
		ctx.getTransform = function(){ return xform; };
		
		var savedTransforms = [];
		var save = ctx.save;
		ctx.save = function(){
			savedTransforms.push(xform.translate(0,0));
			return save.call(ctx);
		};
		var restore = ctx.restore;
		ctx.restore = function(){
			xform = savedTransforms.pop();
			return restore.call(ctx);
		};

		var scale = ctx.scale;
		ctx.scale = function(sx,sy){
			xform = xform.scaleNonUniform(sx,sy);
			return scale.call(ctx,sx,sy);
		};
		var rotate = ctx.rotate;
		ctx.rotate = function(radians){
			xform = xform.rotate(radians*180/Math.PI);
			return rotate.call(ctx,radians);
		};
		var translate = ctx.translate;
		ctx.translate = function(dx,dy){
			xform = xform.translate(dx,dy);
			return translate.call(ctx,dx,dy);
		};
		var transform = ctx.transform;
		ctx.transform = function(a,b,c,d,e,f){
			var m2 = svg.createSVGMatrix();
			m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
			xform = xform.multiply(m2);
			return transform.call(ctx,a,b,c,d,e,f);
		};
		var setTransform = ctx.setTransform;
		ctx.setTransform = function(a,b,c,d,e,f){
			xform.a = a;
			xform.b = b;
			xform.c = c;
			xform.d = d;
			xform.e = e;
			xform.f = f;
			return setTransform.call(ctx,a,b,c,d,e,f);
		};
		var pt  = svg.createSVGPoint();
		ctx.transformedPoint = function(x,y){
			pt.x=x; pt.y=y;
			return pt.matrixTransform(xform.inverse());
		}
	}
</script>
</body></html>

[SergeyRyzhkov]

Разговор слепого с глухим, при том с каждой стороны - о чем-то своем.
То, что SVG может быть отдан сервером, как тайлы в TMS или как полный extent по WMS, с генерализацией на стороне сервера - никто не вспомнил?
Определитесь сначала (в большей степени касается топикстартера), что именно вы обсуждаете и в чем конкретно состоит вопрос. А мусолить невнятные "перспективы" - либо бессмысленно, либо слишком объемный труд выйдет.

ЭЭЭ,меня то не надо сюда приписывать ) )
Я то сразу уточнил у автора, причем тут ГИС-сервер, рендер тайлов, конечный рендер (на клиенте).
Но используя телепатию, понял что автор имеет ввиду рендеринг уже конечного результата...
Но к сожалению. к своим уточнениям получил хамство...

[Kamur]

Вопрос: а wms и т.п. при каких делах? Узкая мысль.

[paleogis]

Господа! По вам баны плачут, особенно это касается топикстартера. Тема закрыта.

[ Сообщение с мобильного устройства ]