openlayer选择geojson对象代码示例

openlayers select geojson object example

webgis, openlayer, 交互

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 859
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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
    }),
    '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.1)'
        })
    })
};

var styleFunction = function(feature) {
    return styles[feature.getGeometry().getType()];
};

var geojsonObject = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {},
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [-90,
                        41.50857729743935
                    ],
                    [-94.921875,
                        34.30714385628804
                    ],
                    [-88.24218749999999,
                        34.30714385628804
                    ],
                    [-90,
                        41.50857729743935
                    ]
                ]
            ]
        }
    }]
};

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

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: styleFunction,
    wrapX: false
});

编译

CSS

HTML

openlayers select geojson object example

webgis, openlayer, 交互

编辑器支持Emmet

快捷键

openlayers select geojson object example

webgis, openlayer, 交互

three.js + openlayers gis 3d example

Three.js 可交互操控的3D电视机

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：