当前位置: 首页 > news >正文

OpenLayers加载GeoJSON数据

注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key

随着GIS应用的不断发展,Web地图也越来越丰富,除了像ESRI、超图、中地数码这样GIS厂商有各自的数据源格式,也有Google、百度、高德、腾讯提供的GIS资源,如何加载各种GIS数据源,是WebGIS开发要解决的一个关键问题。

本节主要介绍加载GeoJSON数据。

1. 什么是GeoJSON

GeoJSON数据,顾名思义就是具有地理空间属性的JSON数据,组织结构与JSON相同,都是采用键值对的方式组织数据。

2. 如何加载GeoJSON数据

在页面上添加一个按钮,在该按钮上触发加载数据事件。通过VectorSource类创建矢量数据源,然后通过VectorLayer创建矢量图层,并将其添加到地图中。

// 创建矢量数据源
const vectorSource = new ol.source.Vector({url: "../data/geojson/hubei.geojson",format: new ol.format.GeoJSON()
})
// 创建矢量图层
vectorLayer = new ol.layer.Vector({source: vectorSource,// 设置样式style: styleFunction
})
map.addLayer(vectorLayer)

3. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加载geoJSON数据</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;width: 100%;height: 100%;}.ol-mouse-position {padding: 5px;top: 10px;height: 40px;line-height: 40px;background: #060505ba;text-align: center;color: #fff;border-radius: 5px;}.load-div {position: relative;margin: 0 auto;top: 50px;width: 100px;background-color: #060505ba;text-align: center;padding: 5px 10px;color: #ddd;border-radius: 2.5px;filter: brightness(0.95);}.load-div:hover {cursor: pointer;/* font-size: 16px; */transition: font-size .2s;fill-opacity: 0.8;filter: brightness(1);color: #fff;}.load-btn {border: none;background: none;}</style>
</head><body><div id="map" title="地图显示"></div><div class="load-div" onclick="loadGeoJSON()"><span>加载GeoJSON</span></div>
</body></html><script>//数据类型var ajaxDataType;//地图投影坐标系var projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地图服务参数简单介绍=============================////================================vec:矢量图层=================================////================================img:影像图层=================================////================================cva:注记图层=================================////======================其中:_c表示经纬度投影,_w表示球面墨卡托投影==============////=============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地图影像注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11430576, 3030575],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,projection: projection}),// 鼠标控件:鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([// 加载鼠标控件new ol.control.MousePosition()])})map.addLayer(TDTImgLayer)//map.addLayer(TDTImgCvaLayer)/***矢量几何要素的样式*/var image = new ol.style.Circle({radius: 5,fill: null,stroke: new ol.style.Stroke({ color: 'red', width: 1 })});var styles = {'Point': [new ol.style.Style({//点样式image: image})],'LineString': [new ol.style.Style({stroke: new ol.style.Stroke({//线的边界样式color: 'green',width: 1})})],'MultiLineString': [new ol.style.Style({stroke: new ol.style.Stroke({//多线的边界样式color: 'green',width: 1})})],'MultiPoint': [new ol.style.Style({//多点的点样式image: image})],'MultiPolygon': [new ol.style.Style({stroke: new ol.style.Stroke({//多区的边界样式color: 'yellow',width: 1}),fill: new ol.style.Fill({//多区的填充样式color: 'rgba(255, 255, 0, 0.1)'})})],'Polygon': [new ol.style.Style({stroke: new ol.style.Stroke({//区的边界样式color: 'blue',lineDash: [4],width: 3}),fill: new ol.style.Fill({//区的填充样式color: 'rgba(0, 0, 255, 0.1)'})})],'GeometryCollection': [new ol.style.Style({stroke: new ol.style.Stroke({//集合要素的边界样式color: 'magenta',width: 2}),fill: new ol.style.Fill({//集合要素的填充样式color: 'magenta'}),image: new ol.style.Circle({//集合要素的点样式radius: 10,fill: null,stroke: new ol.style.Stroke({color: 'magenta'})})})],'Circle': [new ol.style.Style({stroke: new ol.style.Stroke({//圆的边界样式color: 'red',width: 2}),fill: new ol.style.Fill({//圆的填充样式color: 'rgba(255,0,0,0.2)'})})]};var styleFunction = function (feature, resolution) {//根据要素类型设置几何要素的样式return styles[feature.getGeometry().getType()];};let vectorLayer = nullfunction loadGeoJSON() {// 移除已有图层if (vectorLayer != null || vectorLayer != 'undefined') {map.removeLayer(vectorLayer)}const vectorSource = new ol.source.Vector({url: "../data/geojson/hubei.geojson",format: new ol.format.GeoJSON()})const extent1 = vectorSource.getExtent()vectorLayer = new ol.layer.Vector({source: vectorSource,// 设置样式style: styleFunction})map.addLayer(vectorLayer)var view = map.getView();// 移动到矢量图层view.setCenter([12536865.056410152, 3635008.742201894]);}</script>

OpenLayers示例数据下载,请回复关键字:ol数据

全国信息化工程师-GIS 应用水平考试资料,请回复关键字:GIS考试

【GIS之路】 已经接入了智能助手,欢迎关注,欢迎提问。

欢迎访问我的博客网站-长谈GIShttp://shanhaitalk.com

都看到这了,不要忘记点赞、收藏 + 关注

本号不定时更新有关 GIS开发 相关内容,欢迎关注 !

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/213499.html

相关文章:

  • 基于Android的个人健康管理系统APP
  • 第7章 C控制语句:分支和跳转
  • TCP协议原理与Java编程实战:从连接建立到断开的完整解析
  • C++ 模板函数深度指南
  • 深入解析Spring Boot与Kafka集成:构建高效消息驱动应用
  • sass三大循环语法
  • 嵌入式开发学习日志(linux系统编程--进程(2))Day28
  • 解决 iTerm2 中 nvm 不生效的问题(Mac 环境)
  • 基于树莓派的贪吃蛇游戏机
  • 【C/C++】基于 Docker 容器运行的 Kafka + C++ 练手项目
  • Kafka自定义分区策略实战避坑指南
  • Web攻防-SQL注入数据格式参数类型JSONXML编码加密符号闭合
  • pg库分表操作步骤- PostgreSQL 分区表
  • 限流系列:sentinel
  • 边缘AI:在物联网设备上实现智能处理
  • Webpack和Vite构建工具有什么区别?各自的优缺点是什么
  • 【论文解读】STaR:不用人类思维链指导,模型可以自我进化!
  • ChatGPT与认知科学:人机协同的未来图景
  • 云原生微服务devops项目管理英文表述详解
  • 论文阅读笔记:YOLO-World: Real-Time Open-Vocabulary Object Detection
  • 【科研绘图系列】R语言绘制气泡图(bubble plot)
  • 项目 react+taro 编写的微信 小程序,什么命令,可以减少console的显示
  • Django orm详解--工作流程
  • Mac安装配置InfluxDB,InfluxDB快速入门,Java集成InfluxDB
  • 答题pk小程序题库题型更新啦
  • Kafka Kraft模式集群 + ssl
  • 基于开源链动2+1模式AI智能名片S2B2C商城小程序的产品驱动型增长策略研究
  • vs2022 调试时 控制台界面不出来
  • kafka实践与C++操作kafka
  • AI智能混剪核心技术解析(一):字幕与标题生成的三大支柱-字幕与标题生成-优雅草卓伊凡