Как я рисовал карту Китая через geojson | Практика разработки на Java

задняя часть
Как я рисовал карту Китая через geojson | Практика разработки на Java

Это 9-й день моего участия в Gengwen Challenge.Подробности мероприятия смотрите:Обновить вызов

Эта статья участвует в "Java Theme Month - Java Development Practice", подробнее см.Ссылка на мероприятие

GeoJSON — это формат для кодирования различных структур географических данных.

Предисловие: В первые две недели я провел с вами анализ ключевых шагов в WebGis.загрузка плитки+событие щелчка(Подробности см. в первых двух статьях.) Далее я покажу вам загрузку Geojson и его события кликов.

  • Парсинг данных Geojson

GeoJSON — это формат для кодирования различных структур географических данных. Объекты GeoJSON могут представлять геометрию, функции или наборы функций. GeoJSON поддерживает следующие типы геометрии: точки, линии, полигоны, многоточечные, многолинейные, многополигональные и коллекции геометрии. Функция в GeoJSON содержит геометрический объект и другие свойства, а набор функций представляет собой набор функций.

Полная структура данных GeoJSON всегда является объектом (в терминологии JSON). В GeoJSON объекты состоят из коллекций пар имя/значение, также известных как члены. Для каждого члена имя всегда является строкой. Значением члена является строка, число, объект, массив или одна из следующих литеральных констант: "true", "false" и "null". Массивы состоят из элементов, значения которых описаны выше.

Особенности коллекции GeoJSON:

{"type":"FeatureCollection",
	"features":[
		{"type":"Feature",
		 "id":"001",
		 "properties":{"name":"新华001"},
		 "geometry":{"type": "Point", "coordinates":[121.9850,42.6737]}},
		{"type":"Feature",
		 "id":"002",
		 "properties":{"name":"新华002"},
		 "geometry":{"type": "Point", "coordinates":[121.8345,42.4898]}},
		{"type":"Feature",
		 "id":"003",
		 "properties":{"name":"峰山1"},
		 "geometry":{"type": "LineString", "coordinates":[[121.9850,42.6737],[121.8345,42.4898]]}},
		{"type":"Feature",
		 "id":"004",
		 "properties":{"name":"新华1001"},
		 "geometry":{"type": "Point", "coordinates":[128.9850,42.6737]}},
		{"type":"Feature",
		 "id":"005",
		 "properties":{"name":"新华1002"},
		 "geometry":{"type": "Point", "coordinates":[125.8345,42.4898]}},
		{"type":"Feature",
		 "id":"006",
		 "properties":{"name":"峰山2"},
		 "geometry":{"type": "LineString", "coordinates":[[121.9850,42.6737],[125.8345,42.4898]]}}]}

  • загрузка кода openlayers3

    Насчет того как загрузить карту в первой статьеЗагрузить мозаичную картуЭто уже упоминалось.После прочтения первой статьи вы должны знать, что я передаю карту карты в div страницы, и карта содержит много слоев маски.Теперь я загружаю GeoJSON, загружая url сверху слой данных.

var vector = new ol.layer.Vector( {
	source : new ol.source.Vector( {
		// url:
		// 'http://openlayers.org/en/v3.17.1/examples/data/geojson/countries.geojson',
		url : './source/china.json',
		format : new ol.format.GeoJSON()
	}),
	style : selectStyleFunction
});

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

Конкретная реализация метода:

	var style;
	if(feature.getGeometry().getType()=="Point"){
		style = [new ol.style.Style({
			image : new ol.style.Circle( {
				fill : new ol.style.Fill( {
					color : 'rgba(255,255,0,0.4)'
				}),
				radius : 2,
				stroke : new ol.style.Stroke( {
					color : 'black',
					width : 1
				})
			 }),
			 text : new ol.style.Text( {
					fill : textFill,
					stroke : textStroke,
					text : view.getZoom()>5?(feature.getId()>2?feature.get("name"):""):""
				})
	        })];
	}else if(feature.getGeometry().getType()=="LineString"){
		if(view.getZoom()<3){
			return ;
		}
		style = [new ol.style.Style( {
			stroke : new ol.style.Stroke( {
				color : '#CD950C',
				width : 2
			}),
			 text : new ol.style.Text( {
					fill : textFill,
					stroke : textStroke,
					text : view.getZoom()>6?feature.get("name"):""
				})
		})];
	}else if(feature.getGeometry().getType()=="Polygon"){
		style = [new ol.style.Style( {
			stroke : new ol.style.Stroke( {
				color : '#FFE4B5',
				width : 3
			}),
			 text : new ol.style.Text( {
					fill : textFill,
					stroke : textStroke,
					text : feature.get("name")
				})
		})];
	}else if(feature.getGeometry().getType()=="MultiLineString"){
		style = [new ol.style.Style( {
			stroke : new ol.style.Stroke( {
				color : 'black',
				width : 3
			})
		})];
	}
	return style;

Объявление Некоторые параметры не объявлены, потому что определены глобальные переменные, потому что они были изменены в предыдущих js, поэтому не весь код выложен. Если вам нужен полный код здесь, отправьте мне личное сообщение на CSDN или оставьте сообщение на доске объявлений.

  • Оценка эффекта

    1.Карта загружена.Карту вы здесь видите не в последний раз.В этот раз карта представляет собой данные в GeoJSON,но данные отображаются перед нами в графическом виде.Точка и линия есть? Все они подгружаются динамически через данные, то есть мне нужно только модифицировать данные в GeoJSON, и карта будет другая, что нам очень удобно модифицировать в фоновом режиме. И этот китайский фреймворк тоже есть в данных.. Словом, все элементы на карте, которую вы видите, заданы в данных (кроме стиля)

这里写图片描述

2. Эффект приближения и отдаления карты такой же, как и раньше.Стоит отметить, что уровень отображения я задал в js, то есть данные, отображаемые при разных уровнях приближения и отдаления, тоже отличаются. Например, для линии я установил уровень 6 или выше.Я могу только видеть.Я уменьшаю масштаб линии карты, и она исчезает.Ниже то, что исчезло и не слишком мало, чтобы его можно было увидеть.

这里写图片描述

3. При увеличении до определенного уровня имя точки отображается вокруг точки, которую я поставил! увидеть эффект

这里写图片描述

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

  • событие щелчка

Нам нужно привязать события в карте, то есть зарегистрировать события

map.on('singleclick', mapClick);

function mapClick(e) {
	var pixel = map.getEventPixel(e.originalEvent);
	var featureInfo = map.forEachFeatureAtPixel(pixel,
			function(feature, layer) {
				return {
					feature : feature,
					layer : layer
				};
			});
	var coordinate = e.coordinate;
	var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,
			'EPSG:3857', 'EPSG:4326'));
	if (featureInfo !== undefined && featureInfo !== null
			&& featureInfo.layer !== null) {
		if (featureInfo.feature.get("geometry").B.length == 2) {
//			alert(view.getZoom());
			alert(hdms + "\n这里属于" + featureInfo.feature.get("name") + "点");
		} else if (featureInfo.feature.get("geometry").B.length == 4) {
			alert(hdms + "\n这里属于" + featureInfo.feature.get("name") + "线");
			alert("两端信息" + featureInfo.feature.get("geometry").B);
		} else {
			// alert(hdms+"\n这里属于"+featureInfo.feature.get("name")+"省");//显示点击区域的
		}
		console.log('打印选择要素');
		console.log(featureInfo.feature);
		console.log('打印选择要素所属Layer');
		console.log(featureInfo.layer);
	} else {
		alert(hdms + "\n这里不属于中国或者这里是大海");// 显示点击区域的
	}
}

Здесь мне нужно пояснить:

Здесь featureInfo состоит из (feature+layer), которые мы объединили в методе.В оценке условия if мы featureInfo.feature.get("geometry").B.length == 2 должны судить о количестве цифровых точки в признаке, все думают о том, есть ли две цифровые точки, если это точка, если это линия, это две точки или четыре цифровые точки, если это площадь, это четное число, которое не менее больше 4, чтобы мы могли различать его.Точка-линия и площадь, а это значит, что мы осознали труднорешаемую ранее задачу о точках-линиях, и мы не будем обсуждать задачу о площади.

var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate,'EPSG:3857', 'EPSG:4326'));

Это для преобразования координат, тут особо нечего сказать

  • позиция

    Раньше наше позиционирование отображалось в центре определенной точки и добавлялось значком Это так называемое позиционирование Изменилось ли позиционирование в нашей новой технологии? Давайте узнаем.

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

 | 新旧对比 | openlayers2 | openlayers3 |
 |:-------------- |:-------------|:-----|
 | 点击 | 获取经纬度查询 | 点线类别区分 |
 | 定位 | map中心显示 | view中心显示 |

Из приведенной выше таблицы видно, что наше позиционирование по-прежнему отличается. В новой технологии мы можем использовать метод отображения центра обзора. Что такое метод отображения центра обзора? Это вызов метода установки центра через вид . . .

view.setCenter(ol.proj.fromLonLat( [

Number(document.getElementById('jd').value),

Number(document.getElementById('wd').value) ]));

  • Знакомство с другими часто используемыми событиями

обработчик события

Одной из новых возможностей HTML 4.0 является возможность запуска событий HTML в браузере, таких как запуск фрагмента JavaScript, когда пользователь щелкает элемент HTML. Ниже приведен список атрибутов, которые можно вставить в HTML-теги для определения действий по событию.

конкретное событие

Атрибуты Это событие происходит, когда FF N IE
onabort Загрузка изображения была прервана 1 3 4
onblur Элемент теряет фокус 1 2 3
onchange Пользователь изменяет содержимое домена 1 2 3
onclick щелчок мышью по объекту 1 2 3
ondblclick Двойной щелчок по объекту 1 4 4
onerror Произошла ошибка при загрузке документа или изображения 1 3 4
onfocus элемент получает фокус 1 2 3
onkeydown Клавиша на клавиатуре нажата 1 4 3
onkeypress Клавиша на клавиатуре нажата или удерживается 1 4 3

w3School упоминается здесь

Я только что добавил несколько случайных эффектов на свою карту.

var select = null; // ref to currently selected interaction
// select interaction working on "singleclick"
var selectSingleClick = new ol.interaction.Select();

// select interaction working on "click"
var selectClick = new ol.interaction.Select( {
	condition : ol.events.condition.click
});

// select interaction working on "pointermove"
var selectPointerMove = new ol.interaction.Select( {
	condition : ol.events.condition.pointerMove
});

var selectAltClick = new ol.interaction.Select( {
	condition : function(mapBrowserEvent) {
		return ol.events.condition.click(mapBrowserEvent)
				&& ol.events.condition.altKeyOnly(mapBrowserEvent);
	}
});

var selectElement = document.getElementById('type');

var changeInteraction = function() {
	if (select !== null) {
		map.removeInteraction(select);
	}
	var value = selectElement.value;
	if (value == 'singleclick') {
		select = selectSingleClick;
	} else if (value == 'click') {
		select = selectClick;
	} else if (value == 'pointermove') {
		select = selectPointerMove;
	} else if (value == 'altclick') {
		select = selectAltClick;
	} else {
		select = null;
	}
	if (select !== null) {
		map.addInteraction(select);
		select.on('select', function(e) {
			document.getElementById('status').innerHTML = '&nbsp;'
					+ e.target.getFeatures().getLength()
					+ ' selected features (last operation selected '
					+ e.selected.length + ' and deselected '
					+ e.deselected.length + ' features)';
		});
	}
};

Вся карта загрузки GeoJSON была объяснена здесь. Вышеизложенное предназначено только для того, чтобы помочь вам разобраться в ваших идеях, а не в полном коде проекта. Если вы новичок в проекте и не понимаете его, вы можете оставить сообщение ниже блог, и я вышлю вам исходный код.

Категории