geojson

前言 cesium 官网的api文档介绍地址 cesium官网api ，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子： cesium 官网在线例子 ，这个也是学习 cesium 的好素材。 内容概览 1.基于cesium 实现图层管理器效果 2.源代码 demo 下载 本篇实现 cesium 图层管理器功能，效果图如下： 图层配置文件信息 /* 地图图层菜单目录构造 */ /* *name-图层名称 *layerurl-图层服务配置 *type代表地图服务类型: 0代表ArcGisMapServerImageryProvider; 1代表createOpenStreetMapImageryProvider; 2代表WebMapTileServiceImageryProvider; 3代表createTileMapServiceImageryProvider; 4 代表UrlTemplateImageryProvider; 5 代表WebMapServiceImageryProviderr(WMS); 6 代表kml,kmz; 7 代表geoJson; *layerid-图层id */ MapConfig.Layers = [ { id: 1, pId: 0, name: "基础图层",checked: false }, { id: 11 , pId: 1 ,

前言 cesium 官网的api文档介绍地址 cesium官网api ，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子： cesium 官网在线例子 ，这个也是学习 cesium 的好素材。 内容概览 1.cesium 结合 geoserver 实现地图空间查询 2.源代码 demo 下载 效果图如下： 实现思路：首先利用 geoserver 发布的图斑 WFS 服务，通过 url 的 rest 请求，构造空间查询形式，获取 geojson 数据源；然后调用cesium api 的 Cesium.GeoJsonDataSource.load 加载 geojson 数据源渲染展示；最后监听地图点击事件，获取矢量数据的属性，显示在右上角的信息窗口。 地图初始化创建： var viewer = new Cesium.Viewer('map' , { geocoder: false , homeButton: false , sceneModePicker: false , fullscreenButton: false , vrButton: false , baseLayerPicker: false , infoBox: false , selectionIndicator: false , animation: false , timeline: false ,

　　　　ol3接口大全 1.ol.Map类：（地图容器类） 　　　　实现： ol.Map(参数) 　　参数说明：1.1 target，说明地图所在的html元素、 　　　　　　　　如果没有指定，必须调用ol.Map类的setTarget（）方法以便绘制地图； 　　　　　　1.2 layers,指定加载的图层。 　　　　　　　　如果未定义，则将呈现不包含图层的地图（图层是按提供的顺序呈现的， 　　　　　　　　如果想要矢量图层显示在瓦片图层顶部，则必须位于瓦片图层之后）。 　　　　　　1.3 view， 设置地图的显示视图。 　　　　　　　　如果在构建时未指定，则必须通过ol.Map()类的setView()方法指定，否则不会提取图层源。 常见方法说明： render()：请求地图渲染（下一帧动画）。 　　　　　　　　getEventPixel(event)：获取相对于浏览器窗口的地图像素位置。 　　　　　　　　event：(event）事件。 　　　　　　　　getView()：获取地图视图。返回值为{ol.View}类。 　　　　　　　　addLayer(layer)：将地图图层添加到地图容器中。 　　　　　　　　layer：(ol.layer.Base）地图图层。 　　　　　　　　removeLayer(layer)：将图层从地图容器中移除。 　　　　　　　　layer：(ol

本文对应代码和数据已上传至我的 Github 仓库 https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 　　在 上一篇文章 中我们对 geopandas 中的 坐标参考系 有了较为深入的学习，而在日常空间数据分析工作中矢量文件的读入和写出，是至关重要的环节。 　　作为 基于geopandas的空间数据分析 系列文章的第三篇，通过本文你将会学习到 geopandas 中的 文件IO 。 2 文件IO 2.1 矢量文件的读入 　　 geopandas 将 fiona 作为操纵矢量数据读写功能的后端，使用 geopandas.read_file() 读取对应类型文件，而在后端实际上是使用 fiona.open 来读入数据，即两者参数是保持一致的，读入的数据自动转换为 GeoDataFrame ，下面是 geopandas.read_file() 主要参数： filename ：str类型，传入文件对应的路径或url layer ：str类型，当要读入的数据格式为地理数据库 .gdb 或 QGIS 中的 .gpkg 时，传入对应图层的名称 　　下面结合上述参数，来介绍一下使用 geopandas.read_file() 在不同情况下读取常见格式矢量数据的方法，使用到的示例数据为中国地图， CRS 为 EPSG:4326

先来要实现的效果图： 下方图1是官网的案例： http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果： 绘制散点图（气泡）是echarts的一种series: 所以要实现在geojson绘制的地图上展示散点图就不能在series里设置geojson的地图在series的type为map里： 如果将注册的地图放在这里啦，那么在series里设置的scatter无法正常的显示，所以要将注册的geojson地图在echarts的geo里配置，series里的scatter设置coordinateSystem: 'geo',才能实现效果。 下面贴出实现的代码： 用到的geojson文件可以在 世界各国以及中国各区县的JSON数据下载 免费下载 <script> var myChart = echarts.init(document.getElementById('container' )); $.get( 'china.json', function (geoJson){ echarts.registerMap( 'china' ,geoJson); var mapData = geoJson.features.map( function (item){ return { name: item

转自原文 openlayer3加载geoserver发布的WFS服务 openlayers3调用GeoServer发布的wfs 1 参考一 1.1 问题 openlayer3加载WFS存在跨域问题，需要用jsonp解决，而jsonp需要用script加载，但加载有误，如图所示，读取cite:bou2_4p图层的GeoJSON 载入地址是这样的http://localhost:8080/geoserver/cite/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=cite:bou2_4p&maxFeatures=20000000&outputFormat=application%2Fjson （与WMS不同，真正的发布地址并不是这个） 在geoserver中看到，它输出的格式是json，但如果在js中调用会存在跨域的问题产生 1.2 调用代码 在代码中，我将输出格式改变为javascript来解决jsonp。 // 参数字段 var wfsParams = { service : 'WFS' , version : '1.0.0' , request : 'GetFeature' , typeName : 'cite:bou2_4p', // 图层名称 outputFormat : 'text/javascript'

1 GeoServer服务发布 1.1 WMS服务 下载GeoServer安装版安装，同时安装geopackage扩展，以备使用。使用XX地图下载器下载地图，导出成GeoPackage地图文件。 （1）下载 GeoPackage DEM数据 （2）打开GeoServer服务界面 （3）点击左侧工作区 ->添加新的工作区 ->输入一个名字URL可以随意起，点击提交（作者使用的名字是Cesium） （4）点击左侧数据存储->新建数据源，会发现两个GeoPackage，此处根据下载的地图类型选择即可 （5）工作区选择刚刚新建的工作区，数据源名称可以随便起，连接参数点击浏览选择刚才导出的GeoPackage文件 发布成功后弹出如下窗口，点击发布 点击左侧 -> Layer Perview 找的刚才发布的图层，点击 OpenLayers 出现如下效果： 2 Cesium调用 2.1 WMS服务 打开Cesium工作区，添加如下代码。 <script> var viewer = new Cesium.Viewer('cesiumContainer'); var provider = new Cesium.WebMapServiceImageryProvider({ url: 'http://localhost:8082/geoserver/cesium/wms', layers:

前言 openlayers5-webpack 入门开发系列环境知识点了解： node 安装包下载 webpack 打包管理工具需要依赖 node 环境，所以 node 安装包必须安装，上面链接是官网下载地址 webpack 配置介绍文档 详细的 webpack 文档配置介绍，适合新手查看，我也是边看边学 vscode 安装包下载 ，我这边用 vscode工具编译开发前端项目，个人觉的这款工具还不错 openlayers5 api文档介绍 ，详细介绍 openlayers5 每个类的函数以及属性等等 openlayers5 在线例子 内容概览 openlayers5 结合 turf.js 实现等值线 源代码 demo 下载 效果图如下： 关键函数 turf.pointGrid，从边界框，FeatureCollection 或 Feature创建点网格 关键函数turf.isolines，采用具有z值和值中断数的 Point 要素的网格 FeatureCollection 并生成等值线 关键函数 turf.bezierSpline，通过应用 Bezier 样条算法获取一条线并返回弯曲版本 核心代码如下： import {Map, View} from 'ol' ; import TileLayer from 'ol/layer/Tile' ; import XYZ from 'ol

前言 cesium 官网的api文档介绍地址 cesium官网api ，里面详细的介绍 cesium 各个类的介绍，还有就是在线例子： cesium 官网在线例子 ，这个也是学习 cesium 的好素材。 内容概览 1.cesium 结合 geoserver 实现地图属性查询 2.源代码 demo 下载 效果图如下： 实现思路：首先利用 geoserver 发布的图斑 WFS 服务，通过 url 的 rest 请求，构造属性查询形式，获取 geojson 数据源；然后调用cesium api 的 Cesium.GeoJsonDataSource.load 加载 geojson 数据源渲染展示；最后监听地图点击事件，获取矢量数据的属性，显示在右上角的信息窗口。 地图初始化创建： var viewer = new Cesium.Viewer('map' , { geocoder: false , homeButton: false , sceneModePicker: false , fullscreenButton: false , vrButton: false , baseLayerPicker: false , infoBox: false , selectionIndicator: false , animation: false , timeline: false ,

Cesium入门9 - Loading and Styling Entities - 加载和样式化实体 Cesium中文网： http://cesiumcn.org/ | 国内快速访问： http://cesium.coinidea.com/ 现在我们已经为我们的应用程序设置了Viewer配置、imagery和terrain的阶段，我们可以添加我们的应用程序的主要焦点——geocache数据。 为了便于可视化，Cesium支持流行的矢量格式GeoJson和KML，以及一种我们团队自己开源的格式，我们专门开发用于描述Cesium场景的[]CZML]( https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide )。 无论初始格式如何，Cesium中的所有空间数据都使用Entity API来表示。Entity API以一种有效提供灵活的可视化的方式，以便对Cesium进行渲染。Cesium Entity 是可以与样式化图形表示配对并定位在空间和时间上的数据对象。测试沙盒中提供了许多 简单Entity的例子 。为了在Entity API的基础上加快速度，从这个应用程序中休息一下，然后阅读 可视化的空间数据教程 Visualizing Spatial Data tutorial 。