直接上代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高德地圖+ol</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css"
integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"
integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA="
crossorigin="anonymous"></script>
<style>
#map {
width: 100%;
height: 100%;
position: absolute;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
//執行個體化Map對象，用于加載地圖
var gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?
})
});
var map = new ol.Map({
layers: [gaodeMapLayer],
view: new ol.View({
center: [0.281830008803421,0.245858887676368],
projection: 'EPSG:4326',
zoom: 14
}),
target: 'map'
});
var styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
fill: new ol.style.Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({
color: 'orange'
})
}),
})
];
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
// url: 'data/demonew.geojson',
url: 'data/28new.geojson',
format: new ol.format.GeoJSON(),
}),
style: styles
});
map.addLayer(vectorLayer)
/*overlay 單擊選中要素核心代碼*/
/*select*/
var selectSingleClick = new ol.interaction.Select();
map.addInteraction(selectSingleClick);
/*單擊選中核心代碼*/
selectSingleClick.on('select', function(e) {
var features=e.target.getFeatures().getArray();
if (features.length>0)
{
var feature=features[0];
var type=feature.getGeometry().getType();
var property=feature.getProperties();
console.log('property',property)
console.log('type',type)
}
else
{
}
});
</script>
</body>
</html>
![VectorDraw入門必備手冊（二）：如何控制多面照明平滑度的屬性？[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)