openlayer添加面图层和geojson数据

最新推荐文章于 2025-08-10 16:00:00 发布

晴天蜗牛

最新推荐文章于 2025-08-10 16:00:00 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_21048515/article/details/81708158

本文介绍了使用OpenLayers进行地图元素样式设置及空间坐标转换的方法。通过实例展示了如何定义样式，包括填充颜色、边框颜色及宽度等，并实现从EPSG:4326到地图视图投影的坐标转换。

关键是styles和空间坐标系的转换！！！！

var styles=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'
        })
    })
});

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());
console.log(map.getView().getProjection());
var proper={"type":"火点"}
var geoMarker = new ol.Feature({

    geometry: polygon//(new ol.geom.Point([120.97, 23.1])).transform('EPSG:4326', map.getView().getProjection())

});

geoMarker.setProperties(proper,true)

var source=new ol.source.Vector({
    features: (new ol.format.GeoJSON({featureProjection: 'EPSG:3857'})).readFeatures(geojsonObject)
});

var vectorLayer = new ol.layer.Vector({
    source: source,
    style:styles,
    opacity:0.5//styles['route']
});
map.addLayer(vectorLayer);