geojson 河流_openlayers之点,线,面(以城市,河流,省份为例,分别对应点线面)...

该博客介绍了如何利用OpenLayers库和GeoJSON数据格式,创建地图图层来展示河流、省份和城市的点、线、面元素。通过定义不同的样式,为河流、省份和城市设置独特的视觉效果,包括线条宽度、填充颜色和标注样式。最后,通过函数将这些图层添加到地图中并进行管理。
摘要由CSDN通过智能技术生成

// 设置标注样式函数

function createStyle(name) {

// 河流style

var riverStyle = new Style({

stroke: new Stroke({

color: '#4e89d4',

width: 2

}),

fill: new Fill({

color: '#eee'

})

})

// 省份style·

var provinceStyle = new Style({

stroke: new Stroke({

color: '#4e89d4',

width: 1

}),

fill: new Fill({

color: '#eee'

})

})

//城市style·

if (name != '') {

var cityStyle = new ol.style.Style({

image: new ol.style.Circle({

radius: 5,

fill: new ol.style.Fill({

color: '#05ab57',

}),

stroke: new ol.style.Stroke({

color: '#05ab57',

widt

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OpenLayers是一个开源的JavaScript库,用于在Web上显示地图和地理数据。它提供了丰富的功能和灵活的API,可以用于显示各种地理数据,包括点、线。 要在OpenLayers中显示GeoJSON的点、线,可以按照以下步骤进行操作: 1. 创建一个OpenLayers地图对象: ```javascript var map = new ol.Map({ target: 'map', // 指定地图容器的ID或元素 layers: [ // 添加地图图层 new ol.layer.Tile({ source: new ol.source.OSM() // 使用OpenStreetMap作为底图 }) ], view: new ol.View({ center: [0, 0], // 地图中心点的坐标 zoom: 10 // 地图缩放级别 }) }); ``` 2. 创建一个GeoJSON格式的数据源: ```javascript var geojsonObject = { 'type': 'FeatureCollection', 'features': [ // 添加点、线GeoJSON要素 { 'type': 'Feature', 'geometry': { 'type': 'Point', 'coordinates': [0, 0] // 点的坐标 }, 'properties': { 'name': 'Point' // 点的属性信息 } }, { 'type': 'Feature', 'geometry': { 'type': 'LineString', 'coordinates': [[0, 0], [1, 1]] // 线的坐标数组 }, 'properties': { 'name': 'LineString' // 线的属性信息 } }, { 'type': 'Feature', 'geometry': { 'type': 'Polygon', 'coordinates': [[[0, 0], [1, 1], [1, 0], [0, 0]]] // 的坐标数组 }, 'properties': { 'name': 'Polygon' // 的属性信息 } } ] }; var vectorSource = new ol.source.Vector({ features: new ol.format.GeoJSON().readFeatures(geojsonObject) }); ``` 3. 创建一个矢量图层,并将数据源添加到图层中: ```javascript var vectorLayer = new ol.layer.Vector({ source: vectorSource }); map.addLayer(vectorLayer); // 将矢量图层添加到地图中 ``` 通过以上步骤,你就可以在OpenLayers地图上显示GeoJSON的点、线了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值