openlayer实现的网页地图

【实例简介】使用openlayer开发一个网页地图，并在地图中绘制点线面

【实例截图】

【核心代码】

var map = null;
function init(){
var format = 'image/png';
map = new ol.Map({
target : 'map',
layers : [ 
new ol.layer.Tile({
source : new ol.source.OSM()
})
],
view : new ol.View({
// center: ol.proj.fromLonLat([37.41, 8.82]),
center : ol.proj.transform([
//121.26323242, 30.72608615
116.48095052083333,40.10504096137153
], 'EPSG:4326',
'EPSG:3857'),
// projection: 'EPSG:4326',
zoom : 10
})
});

$("#btn_show").click(function(){
var geo_type = $("input[name='geo_type']:checked").val();
var text_data = $("#tv_data").val();
var geo_obj = null;

var tmp = JSON.parse(text_data);

if(geo_type == "Point"){
var pt = JSON.parse(text_data);
//geo_obj = new ol.geom.Point(pt[0], pt[1]);
geo_obj = new ol.geom.Circle(pt, 0.00005);
}else if (geo_type == "MultiPoint"){
geo_obj = new ol.geom.MultiPoint( JSON.parse(text_data) );
}else if (geo_type == "LineString"){
geo_obj = new ol.geom.LineString( JSON.parse(text_data) );
}else if (geo_type == "MultiLineString"){
geo_obj = new ol.geom.MultiLineString( JSON.parse(text_data) );
}else if (geo_type == "Polygon"){
}else if (geo_type == "MultiPolygon"){
}

if(null == geo_obj){
console.log("data formate invalid.");
return ;
}
//console.log(map.getView().getProjection());

var polygon = (
new ol.geom.Polygon([[[120.97, 23.1],[115.97, 15.1],[118.97, 13.1],[120.97, 20.1],[120.97, 23.1]]])
).transform('EPSG:4326', map.getView().getProjection());
var line = geo_obj.transform('EPSG:4326', map.getView().getProjection());

var proper={"type":"火点"}
var geoMarker = new ol.Feature({
    geometry: polygon
});

var geoLine = new ol.Feature({
geometry: line
});

geoMarker.setProperties(proper,true)

var geojsonObject = "{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"id\":\"ROAD_LANE_GEO.1\",\"geometry\":{\"type\":\"MultiLineString\",\"coordinates\":[[[121.2661358,30.72727593],[121.26604926,30.72724013]]]},\"geometry_name\":\"the_geom\",\"properties\":{\"LaneID\":\"2758421\",\"SnodeID\":\"2407002\",\"EnodeID\":\"2450086\"}}],\"totalFeatures\":17524,\"numberMatched\":17524,\"numberReturned\":50,\"timeStamp\":\"2019-03-29T08:48:30.871Z\",\"crs\":{\"type\":\"name\",\"properties\":{\"name\":\"urn:ogc:def:crs:EPSG::4326\"}}}";
var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
    features: [ geoLine ]
}),
    style: new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'green'
    }),
    stroke: new ol.style.Stroke({
color: 'red',
        width: 2
    }),
    image: new ol.style.Circle({
        radius: 7,
        fill: new ol.style.Fill({
            color: 'red'
        })
    })
}),
    opacity:0.9
});
map.addLayer(vectorLayer);
map.getView().fit(geo_obj, map.getSize());
});
}