Openlayers 接入 Geojson 文件实现行政区域边界绘制

openlayers 绘制行政区域边界的问题其实不是很麻烦，其实如果有区域的坐标列表，那么按照坐标列表绘制多边形就可以了，关键是没有。有两个办法，一个是高德地图支持查询行政区的范围坐标，感兴趣的话可以去看一下高德的API接口，一个是Geojson，那么今天就用 Geojson来写一篇博客，其实很简单。

关于openlayers的安装使用就不说了，如果不会的话看我之前的博客就可以，有说的很详细的。

下载Geojson文件

要使用openlayers 加载geojson文件，首先要有文件，然后下面这个网址可以去下载自己需要的文件。

DataVGeoAtlas
用法就不详细说了，进去就懂。

然后下载的Geojson 文件保存到本地，文件内容就像下面截图的样子，比如说我下载了山东省行政区域的 geojson 文件。

openlayers 引入 Geojson 文件

首先分享个网站，你需要的。

openlayers API：https://openlayers.org/en/latest/apidoc/

好的，接下来引入几个包，是这个demo需要的。

  import { OSM, Vector as VectorSource } from 'ol/source';import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer';import Feature from 'ol/Feature';import GeoJSON from 'ol/format/GeoJSON';

然后开始编写方法，很简单，直接贴代码：

addGeoJson() {let json = require('../json/shandong.json');let features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(json)var vectorSource = new VectorSource({ features: features });let lineLayer = new VectorLayer({zIndex: 99,source: vectorSource,});map.addLayer(lineLayer)  // 把图层添加到地图
},

完事了~

openlayers 接入 geojson 实现行政区域边界绘制相关推荐

百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域
highcharts 是提供地图数据包的:https://www.highcharts.com/docs/maps/map-collection echart矢量地图或者地图绘制矢量图层,GeoJSO ...
openlayers摸爬滚打 5.openlayers使用GeoJSON绘制点、线
上一篇了解了GeoJSON的格式在项目中我获取到后台坐标数据后,构建了GeoJSON数据,然后通过openlayers展示点绘制线示例代码如下: <!DOCTYPE html> < ...
iOS 【地图绘制行政区域边界及填充】
很久没有写东西了,因为最近的项目要赶在国庆中秋前夕上架,忙碌了2个多月的时间.对地图绘制这块整理了一下,希望能让大家少走弯路. 想法之前看到在网页端有地理区域的绘制和填充,觉得挺不错.在网上扒了扒, ...
高德地图看各省分界线_从高德采集最新的省市区三级坐标和行政区域边界，用js在浏览器中运行...
本文描述的是对国家统计局于2019-01-31发布的<2018年统计用区划代码和城乡划分代码(截止2018年10月31日)>中省市区三级的坐标和行政区域边界的采集.随着时间变化,本文内容会 ...
OpenLayers基础教程——地图交互之绘制图形
1.前言前面的博客其实已经介绍过了如何在openlayers中绘制图形,不过那是基于已有的坐标进行绘制.很多时候,用户往往需要使用鼠标自行在地图上进行图形绘制,这就涉及到了openlayers中的地 ...
openlayers调用高德地图web服务绘制驾车路线规划
openlayers调用高德地图web服务绘制驾车路线规划使用ol.geom.Polygon()函数将坐标点连接成线时,只连接数组中首末两点的坐标,是因为数组中的值并非number类型,需要将其进行 ...
OpenLayers、geojson矢量图
OpenLayers的官网,下面简称ol. 官方的描述:OpenLayers可以轻松地在任何网页中放置动态地图.它可以显示从任何来源加载的地图图块,矢量数据和标记.开发OpenLayers是为了进一步 ...
OpenLayers 带内部箭头的线条绘制
OpenLayers 的一些遗憾 Demo 源码下载地址:https://download.csdn.net/download/amd642800/19259543 最近使用 OpenLayers 加 ...
vue+openlayers图形交互，实现多边形绘制、编辑和保存
知识点: 1.绘制多边形,实例化ol.interaction.Draw对象 draw_inter = new ol.interaction.Draw({source: source_draw,//矢量 ...

openlayers 接入 geojson 实现行政区域边界绘制

Openlayers 接入 Geojson 文件实现行政区域边界绘制

下载Geojson文件

openlayers 引入 Geojson 文件

openlayers 接入 geojson 实现行政区域边界绘制相关推荐

最新文章

热门文章