ajax读取geojson文件,shp文件解析成geojson格式后,怎么显示到高德地图上

使用openlayers

下图中数据任意绘制

bVbqlVk?w=406&h=286

高德地图+ol

integrity="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)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值