我是如何通过geojson画个中国地图出来的 ｜Java 开发实战

{"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]]}}]}

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;

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这里不属于中国或者这里是大海");// 显示点击区域的
	}
}

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) ]));

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 = ' '
					+ e.target.getFeatures().getLength()
					+ ' selected features (last operation selected '
					+ e.selected.length + ' and deselected '
					+ e.deselected.length + ' features)';
		});
	}
};