OpenLayers、geojson矢量图

最新推荐文章于 2024-03-09 17:15:42 发布
最新推荐文章于 2024-03-09 17:15:42 发布
阅读量600 收藏 3
点赞数
分类专栏： OpenLayers
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42044707/article/details/118020346
版权

OpenLayers的官网，下面简称ol。
官方的描述：OpenLayers可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块，矢量数据和标记。开发OpenLayers是为了进一步使用各种地理信息。它是完全免费的开源JavaScript，根据2条款BSD许可证（也称为FreeBSD）发布。

官网的有关于矢量图的例子，大概长这样子：
Image Vector Layer示例图
官方例子代码部分：

<!DOCTYPE html>
<html>
  <head>
    <title>Image Vector Layer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>
      import Map from 'ol/Map.js';
      import View from 'ol/View.js';
      import GeoJSON from 'ol/format/GeoJSON.js';
      import VectorLayer from 'ol/layer/Vector.js';
      import VectorSource from 'ol/source/Vector.js';
      import {Fill, Stroke, Style, Text} from 'ol/style.js';


      var style = new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new Text()
      });

      var map = new Map({
        layers: [
          new VectorLayer({
            renderMode: 'image',
            source: new VectorSource({
              url: 'data/geojson/countries.geojson',
              format: new GeoJSON()
            }),
            style: function(feature) {
              style.getText().setText(feature.get('name'));
              return style;
            }
          })
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 1
        })
      });

      var featureOverlay = new VectorLayer({
        source: new VectorSource(),
        map: map,
        style: new Style({
          stroke: new Stroke({
            color: '#f00',
            width: 1
          }),
          fill: new Fill({
            color: 'rgba(255,0,0,0.1)'
          })
        })
      });

      var highlight;
      var displayFeatureInfo = function(pixel) {

        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });

        var info = document.getElementById('info');
        if (feature) {
          info.innerHTML = feature.getId() + ': ' + feature.get('name');
        } else {
          info.innerHTML = '&nbsp;';
        }

        if (feature !== highlight) {
          if (highlight) {
            featureOverlay.getSource().removeFeature(highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
          }
          highlight = feature;
        }

      };

      map.on('pointermove', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
      });

      map.on('click', function(evt) {
        displayFeatureInfo(evt.pixel);
      });
    </script>
  </body>
</html>

这部分代码是需要联网接入js的，不知道是不是我网的问题，反正就是连不上。最好是使用官网下载本地的js。坑爹的玩意，本地js又不能用import ，所以得改。改法官网上我也没看到有，大致我是这样猜想，可能会有错：

//把import 的注释掉
//import Map from 'ol/Map.js';
var map = new Map({})
这种Map直接在前面加ol-->var map = new ol.Map
//import View from 'ol/View.js';
这个也是跟Mpa一样，import 的是ol/View.js。把/换成点. 
//import VectorLayer from 'ol/layer/Vector.js';
var featureOverlay = new VectorLayer({})
这种VectorLayer 和ol/layer/Vector.js不对称的，直接把VectorLayer 换成ol.layer.Vector
如var vectorLayer = new ol.layer.Vector({})
//import {Fill, Stroke, Style, Text} from 'ol/style.js';
var style = new Style({})
fill: new Fill({})
这种前面有｛｝的，也是直接每个加。
var style = new ol.style.Style({})
fill: new ol.style.Fill({})

改变完的代码大致如下：
<!DOCTYPE html>
<html>
  <head>
    <title>Vector Layer</title>
    <link rel="stylesheet" href="js/ol.css" />
	<script type="text/javascript" src="js/ol.js" ></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <div id="info">&nbsp;</div>
    <script>
      var style = new ol.style.Style({//显示的颜色
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 0, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',//边界颜色
          width: 1  //边界线条粗细
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#000'//字体颜色
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',//字体背景颜色
            width: 1 //字体背景粗细
          })
        })
      });
      var vectorLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
          url: '../data/cn.json',
          format: new ol.format.GeoJSON()
        }),
        style: function(feature) {
          style.getText().setText(feature.get('name'));
          return style;
        }
      });
      var map = new ol.Map({
        layers: [vectorLayer],
        target: 'map',
        view: new ol.View({
          center: [0, 0],
          zoom: 1
        })
      });
      var highlightStyle = new ol.style.Style({//点击产出的颜色
        stroke: new ol.style.Stroke({
          color: '#B8860B',  //点击边界颜色
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.1)'
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          fill: new ol.style.Fill({
            color: '#B8860B'
          }),
          stroke: new ol.style.Stroke({
            color: '#B8860B',
            width: 3
          })
        })
      });
      var featureOverlay = new ol.layer.Vector({
        source: new ol.source.Vector(),
        map: map,
        style: function(feature) {
          highlightStyle.getText().setText(feature.get('name'));
          return highlightStyle;
        }
      });
      var highlight;
      var displayFeatureInfo = function(pixel) {
        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
          return feature;
        });
        var info = document.getElementById('info');
        if (feature) {
          info.innerHTML = feature.getId() + ': ' + feature.get('name');
        } else {
          info.innerHTML = '&nbsp;';
        }
        if (feature !== highlight) {
          if (highlight) {
            featureOverlay.getSource().removeFeature(highlight);
          }
          if (feature) {
            featureOverlay.getSource().addFeature(feature);
          }
          highlight = feature;
        }
      };
      map.on('click', function(evt) {
        if (evt.dragging) {
          return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
      });
      map.on('pointermove', function(evt) {
        displayFeatureInfo(evt.pixel);
      });     
    </script>
  </body>
</html>

这里有个写的非常好的前辈写的文章

不同区域渲染不同颜色示例：

            var wafotownBeans = json.wafotownBeans;// 后台json的数据
            //底图渲染，这个是为了显示边界，不是上色。
			var vectorLayerBottom = new ol.layer.Vector({
		        source: new ol.source.Vector({
		            format: new ol.format.GeoJSON(),
		            url: '../OpenLayers-5.3.0/data/cn.json'
		        }),
		        style: function (feature, resolution) {
                    style = new ol.style.Style({
                  	  stroke: new ol.style.Stroke({
                            color: "blue",
                            width: 1
                        }),
                    });
            		return [style]
		        }
		    });
			var vectorLayer = new ol.layer.Vector({//数据图渲染，上色
			source: new ol.source.Vector({
				format: new ol.format.GeoJSON(),
				url: '../OpenLayers-5.3.0/data/cn.json'
			}),
				style: function (feature, resolution) {
					var id = feature.get("id");
					for (var key of wafotownBeans) {
						var stationCode = key.station_code;//编号 
						var code = key.code; // 颜色
						var codeLast=code.substr(1,code.length-1);
						var colorStr = null;
						if (codeLast == "0") {
							colorStr = "#FF0000"
						} else if (codeLast == "1") {
							colorStr = "white"
						} else if (codeLast == "2") {
							colorStr = "blue"
						} else if (codeLast == "3") {
							colorStr = "yellow"
						} else if (codeLast == "4") {
							colorStr = "orange"
						} else if (codeLast == "5") {
							colorStr = "red"
						}
						if (stationCode == id) {
							style = new ol.style.Style({
								fill: new ol.style.Fill({
									color: "yellow"
								}),
								stroke: new ol.style.Stroke({
									color: "blue",
									width: 1
								})
							});
							return [style]
						}
					}
				}
			});
			
			var map = new ol.Map({// Map
				layers : [vectorLayerBottom, vectorLayer],
				target : 'map',
				view : new ol.View({
					center : [ 0, 0 ],
					zoom : 1
				})
			});

还可以结合上面的官方例子，移动或者点击显示高亮详情等。

shp等格式转geojson：
上面的矢量图用到的是json格式，网上在线转的网站有很多，我比较常用的是：mapshaper
获取全国各地区json格式

FangFelix
关注
专栏目录
openLayer-GeoJSON
zhushanlin的博客
04-27 130
就是带空间信息的json数据GeoJSON是一种基于JSON的地理空间数据交换格式，它定义了几种类型JSON对象以及它们组合在一起的方法，以表示有关地理要素、属性和它们的空间范围的数据。
Vue+OpenLayers7入门到实战，OpenLayers加载GeoJson数据并叠加GeoJson中的要素到地图上
最新发布
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-23 292
本章介绍如何使用OpenLayers7在地图上加载GeoJson数据并叠加GeoJson中的要素到OpenLayers矢量图层上。GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加要素到地图上。
Openlayers 使用 GeoJSON
大鱼的博客
08-24 4050
GeoJSON 是一种标准的地理信息通信格式。本文简单介绍什么是 GeoJSON， 以及如何使用 Openlayers 提供的 API 读取、解析和展示 GeoJSON 描述的信息。
openlayers01——使用openlayers展示GeoJSON数据
sheyueyu的博客
02-05 1197
【代码】openlayers01——使用openlayers展示GeoJSON数据。
openlayers 矢量图层注记
01-03
openlayers 中利用矢量图层添加注记的示例。
10. Openlayers加载GeoJSON、含文件（结合vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
07-18 4548
欢迎来到 OpenLayers 的学习之旅！今天我们将深入探讨如何在 OpenLayers 地图中加载 GeoJSON 数据。你会看到代码是如何通过层层叠加的方式来建立这个功能，以及如何制定自定义样式来展示独特的 GeoJSON 数据。
利用OpenLayers加载GeoJSON矢量数据
热门推荐
王诗阳的个人知识园地
11-15 1万+
随着互联网技术的不断发展，各大地理公司相继推出了基于JavaScript的地图开发API，典型的API有ArcGIS API for JavaScript、OpenLayers等。常见的地理数据格式除了Shapefile以外，还有GeoJSON格式的矢量数据。根据网站的官方解释，GeoJSON是一种包含着点、线、面的坐标信息及属性等各种地理要素的一种JSON格式，可以在记事本中直接打开。因此，在某...
vue集成openlayers加载geojson并实现点击弹窗教程
10-14
在本教程中，我们将探讨如何在Vue项目中集成OpenLayers库来加载GeoJSON数据，并实现点击地图要素时弹出详细信息窗口。OpenLayers是一个强大的开源JavaScript库，用于创建交互式地图应用，而Vue则是一种流行的前端...
OpenLayers入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
07-24 1075
本章介绍一下使用OpenLayers如何使用GeoJson数据，GeoJson数据格式可以参考博主另一篇文章《GIS开发入门，GeoJSON是什么？GeoJSON格式标准介绍》，那么废话少谈，让我们立刻开始加载GeoJson数据并叠加OpenLayers的矢量图层上。
openlayers对矢量图（多边形） 的增删改查
07-24
openlayers对矢量图（多边形） 的增删改查，三角形、矩形、五边形，你想几边就几边；添加、删除矢量图，修改矢量图，旋转、平移、拉伸
echarts 矢量地图资源 json 格式（附demo）
08-20
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。 建议大家使用以百度地图为底图的形式，参考实例：https://echarts.baidu.com/demo.html#map-polygon 如果大家想要继续使用之前的矢量地图，可以下载这个包，demo中有详细代码注释 在国家行政区重新划分后，此矢量地图已不再准确，请大家谨慎使用
openlayers3各种元素图形绘制
11-02
openlayers3 各种特殊图形绘制：进攻方向、自由地、分队战斗、弓型、扇形、箭头、钳击
openlayers学习——5、openlayers添加GeoJSON
记录生活点滴
01-10 3794
openlayers添加GeoJSON 前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。 本人不是专业GIS开发，只是记录，方便后续查找。 参考资料： openlayers官网：https://openlayers.org/ geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector 地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint
openlayers+geojson
xuhaiyan8825的专栏
11-10 2315
/** 必须设置一个vector图层为基层图层，不能加鹰眼，否则vector里的对象显示不了，但是鹰眼里可以显示，奇怪？ 如果加多个vector，鹰眼中会显示基础图层，地图中不显示，其他图层可以正常显示 * 使用了openlayers、xuhy.VT.js, */ var xuhy = xuhy ? xuhy : {}; xuhy.Map = xuhy.Map ? xu
OpenLayers-加载Geojson数据
giser__z的博客
03-09 745
地址可以是本地geojson文件，也可以是网络geojson格式的数据服务。加载完成后可以对数据要素进行遍历。值得注意的是，加载网络服务的行为（如geoserver发布的数据服务）属于异步，不能直接获得要素。下面代码是我解决此问题的一种思路，通过VectorSource的。事件(在要素完成加载时触发)
openlayer中geojson要素图层设置style样式
08-26 7599
import "ol/ol.css"; import { Map, View } from "ol"; import { TileWMS, OSM, Vector as VectorSource } from "ol/source"; import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer"; import GeoJSON from "ol/format/GeoJSON"; import { Fill, Stroke, Styl.
OpenLayers之多源数据加载七：矢量地图
不睡觉的怪叔叔的博客
08-09 4280
一、矢量地图介绍     矢量地图的图形的元素是一些点、线、矩形、多边形、圆和弧线等等，它们都是通过数学公式计算获得的。由于矢量图形可通过公式计算获得，所以矢量图形文件体积一般较小。     矢量图形最大的优点是无论放大、缩小或旋转等图形都不会失真。矢量地图在地图项目中存在着大量的应用，是地图数据中非常重要的组成部分。     为了便于存储、传递、使用，矢量地图会按照一定的格式来表达，比如常...
OpenLayers教程十五：多源数据加载之矢量地图
不睡觉的怪叔叔的博客
07-15 3425
目录 一、矢量地图简介 二、在OpenLayers中直接组织矢量数据 三、通过url加载矢量数据 四、样式设置 一、矢量地图简介 前面介绍的瓦片地图将地理信息以一块块瓦片的形式进行组织并渲染，瓦片的本质是图片，因此不能对瓦片地图进行修改样式、空间分析等操作，而且瓦片不包含属性信息，隐含的空间信息也不能直接获取使用。 矢量数据使用矢量数据模型来组织地理信息，矢量数据模型...
openlayers加载geoJson格式文件（并加载json中的样式）
qq_40482342的博客
01-21 7654
openlayers加载geoJson格式文件（并加载json中的样式） 样式如下图: 话不多说直接上代码和注释（geojson文件可以在我的CSDN中下载） 分享不易：点赞支持 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="./ol/ol.css" type="text/css"> <script src="
openlayers加载geojson
06-28
然后，使用Openlayers的ol.format.GeoJSON将数据转换为矢量要素，并将其添加到矢量数据源中。最后，将新图层添加到Openlayers的地图中。 下面是一个加载GeoJSON的代码示例： ```javascript // 创建一个新的地图...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值