openlayer4中使用geojson数据

来源：互联网发布：飞控算法编辑：程序博客网时间：2024/06/07 18:33
<!DOCTYPE html><html><head>    <title>GeoJSON</title>    <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>    <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script></head><body><div id="map" class="map"></div><script>    var image = new ol.style.Circle({        radius: 5,        fill: null,        stroke: new ol.style.Stroke({color: 'red', width: 1})    });    var styles = {        'Point': new ol.style.Style({            image: image        }),        'LineString': new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'green',                width: 1            })        }),        'MultiLineString': new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'green',                width: 1            })        }),        'MultiPoint': new ol.style.Style({            image: image        }),        'MultiPolygon': new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'yellow',                width: 1            }),            fill: new ol.style.Fill({                color: 'rgba(255, 255, 0, 0.1)'            })        }),        'Polygon': new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'blue',                lineDash: [4],                width: 3            }),            fill: new ol.style.Fill({                color: 'rgba(0, 0, 255, 0.5)'            })        }),        'GeometryCollection': new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'magenta',                width: 2            }),            fill: new ol.style.Fill({                color: 'magenta'            }),            image: new ol.style.Circle({                radius: 10,                fill: null,                stroke: new ol.style.Stroke({                    color: 'magenta'                })            })        }),        'Circle': new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'red',                width: 2            }),            fill: new ol.style.Fill({                color: 'rgba(255,0,0,0.2)'            })        })    };    var styleFunction = function(feature) {        return styles[feature.getGeometry().getType()];    };    var geojsonObject = //geojson数据    var vectorSource = new ol.source.Vector({        features: (new ol.format.GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(geojsonObject),//将EPSG:4326坐标系修改为EPSG:3857（根据数据格式来）    });    var vectorLayer = new ol.layer.Vector({        source: vectorSource,        style: styleFunction    });    var map = new ol.Map({        layers: [            new ol.layer.Tile({                source: new ol.source.OSM()            }),            vectorLayer        ],        target: 'map',        controls: ol.control.defaults({            attributionOptions: /** @type {olx.control.AttributionOptions} */ ({                collapsible: false            })        }),        view: new ol.View({            center: ol.proj.transform([117.2736, 31.8646], 'EPSG:4326', 'EPSG:3857'),            //地图中心为117.2736, 31.8646，并把坐标投影转换为3857（web 墨卡托投影）            zoom: 5            // 并且定义地图显示层级为5        })    });</script></body></html>
注意：ol.format.GeoJSON默认参考坐标系为 EPSG:4326.，根据实际需要进行更改。
安徽省轮廓的geojson数据加载
阅读全文
0 0