使用openlayers
下图中数据任意绘制
高德地图+olintegrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous"/>
crossorigin="anonymous">
#map {
width: 100%;
height: 100%;
position: absolute;
}
//实例化Map对象,用于加载地图
var gaodeMapLayer = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
})
});
var map = new ol.Map({
layers: [gaodeMapLayer],
view: new ol.View({
center: [120,30],
projection: 'EPSG:4326',
zoom: 7
}),
target: 'map'
});
var geojsonObject = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
111.796875,
47.517200697839414
],
[
100.546875,
26.745610382199022
],
[
121.9921875,
28.92163128242129
],
[
121.640625,
48.22467264956519
],
[
111.796875,
47.517200697839414
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.00091552734375,
30.168875561169088
],
[
120.2783203125,
29.921613319695577
],
[
120.66009521484374,
30.152252297201876
],
[
120.29205322265625,
30.50311746839939
],
[
119.73724365234375,
30.237713497892038
],
[
120.00091552734375,
30.168875561169088
]
]
]
}
}
]
};
var vectorSource = new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
});
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: vectorSource,
style: styles
});
map.addLayer(vectorLayer)