CTAPbIu_MABP's BLOG

Прошлый раз была небольшая заметочка о том как рисовать при помощи Raphaël на гуглокартах. На этот раз будет статья посерьезнее.

На этот раз я довел Эвклидову проекцию до ума, и теперь с ней действительно можно что-то рисовать. А так же накодил более менее сносную прокладку между Raphaël и Google Maps, теперь ею можно рисовать. Пожалуй вот сейчас этим и займемся.

Код прокладки еще сырой и выкладывать его пока не буду, чтобы потом по 10 раз не править. Но если кто хочет посмотреть то он может посмотреть его тут. А я пока прокомментирую. Для того чтобы нарисовать что-либо поверх карты рисуется див во всю ширину и высоту. Да-да вы правильно поняли если взять гуглокарту и приблизить уровень так на десятый, чтобы стало видно города, то ширина дива будет несколько тысяч пикселей. Потом в этом диве Raphaël уже рисует свои фигуры. Передаваемые параметры считаются за первый уровень приближения, дальше масштабируются по простой формуле [width = width * (1 << zoom)]. У меня на практике такой образ отрисовки совсем не тормозил, не смотря на космические цифры (Core2 2.33, RAM 4, FF 3.6.8), расскажите в каментах как быстро рисуеться у вас.

Из видимых недостатков только один - если подвигать карту чуть-чуть вправо-влево то видно что четвертушка круга рисуется то в правом, то в левом верхнем углу. И там и там она рисуется правильно, но еще правильнее было бы ели бы рисовался полный круг выходя за края карты, но поскольку див (соответственно и область рисования svg или vml) имеет ширину и высоту карты, то вылезти за его рамки не представляется возможным и фигура остается усеченной. Надо будет попробовать задавать размеры диву при отрисовке каждой новой фигуры.

А теперь я пожалуй покажу как этим добром пользоваться, думаю что при добавлении новых возможностей вид передаваемых данных не измениться

function initialize() {

	// для всяких недобраузеров или отключенного фаербага
	if (!("console" in window)){
		window.console = {log:alert};
	}

	// я использую Эвклидову проекцию но можно брать и обычные карты
	var map = new google.maps.Map(document.getElementById("map"), {
		zoom : 0,
		center : new google.maps.LatLng(0,0),
		mapTypeControlOptions : {
			mapTypeIds: ['myCustomMap']
		}
	});

	map.mapTypes.set('myCustomMap', new CoordMapType());
	map.setMapTypeId('myCustomMap');

	// маркер для того чтобы проверить координату
	var marker = new google.maps.Marker({
		position : new google.maps.LatLng(0, 0),
		map : map,
		draggable : true
	});

	google.maps.event.addListener(marker, 'dragend', function() {
		console.log(this.getPosition());
	});
	
	// а вот и новый слой
	new RaphaelOverlay({
		map : map,
		figures : [{
			position : new google.maps.LatLng(85, 175),
			type : "circle",
			radius : 100,
			attr : {
				"stroke" : "#fff", 
				"stroke-width" : 2, 
				"fill" : '#000', 
				"fill-opacity" : 0.3
			}
		},{
			position: new google.maps.LatLng(85, -175),
			type: "rect",
			width: 100,
			height: 100,
			attr : {
				"stroke" : "#fff", 
				"stroke-width" : 2, 
				"fill" : '#000', 
				"fill-opacity" : 0.3
			}
		},{
			position : new google.maps.LatLng(0, 0),
			type : "ellipse",
			rx : 100,
			ry : 50,
			attr : {
				"stroke" : "#fff", 
				"stroke-width" : 2, 
				"fill" : "#000", 
				"fill-opacity" : 0.3
			}
		},{
			position : new google.maps.LatLng(0, 0),
			src : "http://upload.wikimedia.org/wikipedia/commons/d/d6/Wikipedia-logo-v2-en.png",
			type : "image",
			width : 135,
			height : 155
		},{
			position : new google.maps.LatLng(0, 0),
			text : "CTAPbIu_MABP",
			type : "text",
			attr : {
				"fill" : "#fff", 
				"font-size" : 20
			}
		}]
	});
	
}

google.maps.event.addDomListener(window, 'load', initialize);

Самое сложное во всем этом было пожалуй пересчет координат из широты-долготы в пиксели по карте, но по моему получилось весьма неплохо. В ближайшее время думаю добавить еще пару функций и довести код до приличного вида.