openlayers 学习--Geojson

最新推荐文章于 2024-05-04 14:00:00 发布

勤勤恳恳的荔枝

最新推荐文章于 2024-05-04 14:00:00 发布

阅读量713

点赞数

分类专栏： OpenLayers学习之路文章标签： javascript

本文链接：https://blog.csdn.net/weixin_38040408/article/details/103394750

版权

OpenLayers学习之路专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近在做IMU项目，将生成的路径点经纬度海拔坐标Geojson格式通过第三方API显示在地图上。之前并没有写过 JavaScript 只能硬着头皮学 openlayers 的用法。

GeoJSON

GeoJSON是一种对各种地理数据结构进行编码的格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合（Point, LineString, Polygon, MultiPoint, MultiLineString, and MultiPolygon）。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
具体参考官方GeoJson定义。

需求就是将以下Geojson数据格式形式在地图上画线，这种数据格式是我用Python 从csv转化成,数据太多，有9万多个坐标点，不好全部表示，只好展现一下一部分数据的大致结构：

{"type": "FeatureCollection", 
"features": [
{"type": "Feature", "id": "0", "geometry": {"type": "MultiLineString", "coordinates": [[[120.40200792714123, 31.50817515899449], [120.40200793629283, 31.508175157762746]], [[120.40200245677255, 31.50817499476767], [120.40200246265104, 31.50817499308194]], [[120.402002630449, 31.50817494382539], [120.4020026361431, 31.50817494211415]]]}, "properties": {"name": "#C4D998", "description": "#C4D998"}},
....
 {"type": "Feature", "id": "246", "geometry": {"type": "MultiLineString", "coordinates": [[[120.4019982263369, 31.50818199878102], [120.40199822635401, 31.50818199915909]], [[120.40199779934, 31.508181151801928], [120.40199780067093, 31.508181151767797]], [[120.40199668781028, 31.508182608814664], [120.40199668775128, 31.50818261006581]], [[120.40199663429004, 31.508182357060427], [120.40199663496023, 31.508182357719946]], [[120.401995897086, 31.508184221809], [120.40199589895771, 31.508184224221235]]]}, "properties": {"name": "#C4D998", "description": "#C4D998"} }
 ]
 }

首先可以从官网上下载 ol.cs 和 ol.js 到本地，官网上直接给出的列子代码并不能直接运行。或者直接调用官网github上的包，我试过，拿不到这些包，不知是哪里出错了。
代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Vector Layer</title>
    <!--以下是你下载官网的包放在本地的路径-->
     <link rel="stylesheet" href="../Plot_coordinate/css/ol.css" />
    <script src="../Plot_coordinate/build/ol.js"></script>
    <style>
      .map {
        width: 100%;
        height:900px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="Geo_vector.js"></script>
  </body>
</html>

js代码如下：

//首先定义MutliLinestring线的style,
var style = new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 255, 255, 0.6)'
  }),
  stroke: new ol.style.Stroke({ //线的边界
    width:5
      }
  ),
  text: new ol.style.Text() //线上的文本
});
//矢量层，给上面渲染一个矢量数据源，该数据是geojson格式，url后是本地数据路径，并指定format
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    url: "../Plot_coordinate/Data/file_new_all_MultiLineString.geojson",
    format: new ol.format.GeoJSON()
  }),
  style: function(feature) {
      // return styles[feature.getId()];
    style.getStroke().setColor(feature.get('name')); //读取Geijson feature元素下的相应的name元素，获取值并设置MutliLinestring线的stroke的颜色
    return style;
  }
});
//以下指定该地图的图层，可指定BingMap或openstreetmap地图来源
var raster = new ol.layer.Tile({

  source: new ol.source.OSM()  //openstreetmap
});

//整个容器，所有的层都在该Map上平埔
var map = new ol.Map({
  layers: [raster,vectorLayer], //铺上之前的图层和矢量 层，位置不能换，否者矢量层会被覆盖，数据显示不出来
  target: 'map',  //绑定Html中的元素
  view: new ol.View({      //视图，确定地图的视角，包括中心坐标点，默认EPSG：3857坐标系，由于数据源中的坐标点是GPS坐标，需转换成3857显示在地图上。
     // center: ol.proj.fromLonLat([120.40669296019958, 31.506426669793367]), //EPSG:4326 (WGS84)
     center: ol.proj.transform([120.40669296019958, 31.506426669793367], 'EPSG:4326', 'EPSG:3857'),
     zoom: 16
  })
});

最后生成的路径的颜色效果如下（我挑的colormap色系太丑了，之后改一下生成该文件的代码参数应该会好看一些）之后把heatmap的用法也试一下：
在这里插入图片描述

勤勤恳恳的荔枝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
openlayers 学习--Geojson

最近在做IMU项目，将生成的路径点经纬度海拔坐标通过第三方API显示在地图上。之前并没有写过 JavaScript 只能硬着头皮学 openlayers 的用法。需求如下：代码如下：<!DOCTYPE html><html lang="en"> <head> <title>Vector Layer</title> ...
复制链接

扫一扫

专栏目录