绘制中国边界 代码如下: function drawChina() { //设置样式 var myStyle = { "color": "#00f", "weight": 2, "opacity": 0.5, "fillColor": 'red', "fillOpacity": 0, }; //geojson数据 var someFeatures = [ { "type&quo

链接如下: http://echarts.baidu.com/echarts2/doc/example/geoJson/china-main-city/522200.json 想要对应城市的geojson地图数据文件,直接用对应城市的区划代码的前六位替换掉链接后面的区划代码即可. 或者根据下面链接进行获取地区json: http://gallery.echartsjs.com/editor.html?c=xr1IEt3r4Q

这是什么?租房信息展示平台 宏观的租房数据可视化微观的房源信息展示多条件搜索等等 链接地图搜租房​ 来龙去脉 受 @李国宝 的地图搜租房启发,利用其提供的开放API,配合自己在前端和地理信息系统方面的知识,有了这个小尝试. 主要技术 AngularLeaflet等等 所有源码都在github上,直接参考源码即可. 解决的问题 Angular集成leafletng-zorro编写界面leaflet各种插件等等 主要功能 有经纬度的房源信息在地图上展示目前只支持上海地区 具体细节都在源码里,主要的贡

GeoJson作为一种模型传输格式, 用的最多的就是地图里面的各种简单模型了, 比如下图中很贴切的俄罗斯方块楼: 它的格式大概就是下面这样: { "type": "FeatureCollection", "crs": { "type": "name", "properties": { "name": "EPSG:3857" } }, "f

GeoJson格式数据的形式 Using GeoJSON with Leaflet GeoJSON is becoming a very popular data format among many GIS technologies and services — it's simple, lightweight, straightforward, and Leaflet is quite good at handling it. In this example, you'll learn how

一.基本架构 1.数据存储层:PostgreSQL-9.2.13 + postgis_2_0_pg92 2.业务处理层:Nodejs + Express + PG驱动 3.前端展示层:Leaflet 二.参考资料 1.POSTGIS 函数接口: https://blog.csdn.net/pzysoft/article/details/76944160 2.POSTGIS官方文档: http://www.postgres.cn/index.php/home http://postgis.net/

前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两个问题:第一个是如何加载 GeoJSON 格式的数据,其实也就是矢量数据,因为矢量数据之间是可以任意转换的:第二个是如何让加载的数据根据自身的时间显示. 所以就有两种解决问题的思路了:第一种,一次加载 GeoJSON 中所有数据,然后逐个设置显示时间:第二种,逐个加载 GeoJSON 中数据,并设置

先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规的地图事件监听,并没有添加地图服务相关的支持. 不过有了需求,也要想办法解决呀. 图层查询 既然小程序不能直接添加地图服务,那就把图层数据查出来,然后通过添加点线面方式添加到地图,具体要怎么实现呢? 首先想到的是通过图层查询接口把所有数据查出来. 但是既然数据是按图层发布的,一般数据量都比较大,把所

一.简介 通过地图可以更直观地展示各个地区的统计数据,能够更清楚地进行数据分析.有些场景下,我们不仅仅需要对每个地市进行统计分析.更需要对地市一下的区县进行数据统计,并进行联动.此事我们可以通过Echart支持的 GeoJson 动态扩展地图类型,完成这一需求(GeoJson 相关规格书可访问:http://www.oschina.net/translate/geojson-spec?cmp ).需求如下:展示整改广东省的地图,并显示统计信息,当点击某一个地市的时候,就显示该地市的地图,并统计该

ECharts 基于 Canvas 的纯 Javascript 图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.兼容大多数浏览器,包括IE6/7/8/9+, Chrome, Firefox, Safari 以及 Opera. 在线演示      源码下载 特色功能 混搭 混搭的图表会更具表现力也更有趣味,ECharts提供的图表(共9类14种)支持任意混搭: 折线图(区域图).柱状图

an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Download Plugins Blog Leaflet Plugins While Leaflet is meant to be as lightweight as possible, and focuses on a core set of features, an easy way to extend

最近的项目用到了echarts一个带有散点地图的图表,按照正常jquery写法应该使用ajax请求geojson的数据动态去切换地图,就像下面这样 $.get('Js/map/' + cityData.name + '.json', function(geoJson) { map('gr-map', cityData, geoJson, geoCoordMap);//调用地图方法 }); 页面显示(成功) but我们使用vue重构了这个项目,在写到这里的时候发现地图不显示了,结果报错 在这里使用

d3.js本来主要是用于用“数据驱动dom”,在浏览器端,接收后端数据,数据绑定,渲染出svg. 即使是在ng中用,也是会由框架打包,供客户端下载. 那么,如果用所谓后端渲染,发布静态的svg,那就要在node里用d3. 几个遇到的点: 1 d3+jsdom实现后端渲染svg node和前端的区别,就是没有全局window.document 这个对象.d3选择器无从选起. 1 创建jsdom对象 const { JSDOM } = require("jsdom"); const my_

目录 坐标边界查询工具:AreaCity-Query-Geometry 性能测试数据 测试一:Init_StoreInWkbsFile 内存占用很低(性能受IO限制) 测试二:Init_StoreInMemory 内存占用和json文件差不多大(性能豪放) 参考:数据库查询测试对比 查询坐标对应的省市区县乡镇名称 步骤一:准备好省市区县乡镇边界的geojson文件 步骤二:运行测试程序进行初始化 步骤三:查询坐标获得省市区名称 附:通过Java代码进行查询 坐标边界查询工具:AreaCity-Q

目录 前言 前台实现 后台实现 总结 一.前言        看到这个题目有人肯定会说这有什么可写的,最简单的我只要用文件系统一个个查找.打开就可以实现,再高级一点我可以提取出所有数据的元数据,做个元数据管理系统就可以实现查找功能,有必要用geotrellis用分布式吗?这不是杀鸡用牛刀吗?理论上是这样的,但是要看我们考虑问题的尺度,如果你只是一些简单的数据用传统方法当然好,省事.省时.简单.速度快,但是当我们将数据的量放大到一个区域乃至全球的时候恐怕事情就不是那么简单了,比如我们有了全球Lan

最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们从这个项目一步步来介绍 Mapbox 的前端 GIS 引擎 Mapbox GL JS. 一.简单了解 首先,Mapbox 在地图领域是一家很 Newbee 的公司.已为 Foursquare.Pinterest.Evernote.金融时报.天气频道.优步科技 等公司的网站提供了订制在线地图服务. 自

最近在使用mapboxgl实现轨迹展示时,想实现类似高德地图导航轨迹效果,然而并未在网上找到类似示例.经一番研究与尝试,最终解决,效果如下. 添加箭头核心代码如下,只需在配置layout中添加symbol-placement和symbol-spacing属性即可: // 添加箭头图层 function addArrowlayer() { map.addLayer({ 'id': 'arrowLayer', 'type': 'symbol', 'source': { 'type': 'geojso

目录 1.常用算法 1.1.计算两经纬度点之间的距离 1.2.根据已知线段以及到起点距离,求目标点坐标 1.3.已知点.线段,求垂足 1.4.线段上距离目标点最近的点 1.5.点缓冲 1.6.点和面关系 1.7.线段与线段的关系 1.8.线和面关系 1.9.geojson 面转线 2.在线示例 作为一个GISer,在日常WebGIS开发中,会常用到的turf.js,这是一个地理空间分析的JavaScript库,经常搭配各种GIS JS API使用,如leaflet.mapboxgl.openla

之前简单介绍了geotrellis的工作过程以及一个简单的demo,最近在此demo的基础上实现了SRTM DEM数据的实时分析以及高程实时处理,下面我就以我实现的上述功能为例,简单介绍一下geotrellis的数据处理过程. 一.原始数据处理 geotrellis支持geotiff的栅格数据(矢量数据还未研究),可以将geotiff直接缓存至hadoop框架下的Accumulo NOSQL数据库,并建立金字塔等,具体处理过程在geotrellis.spark.etl.Etl类中.具体代码如下:

最近在玩ECharts,感觉真心不错,在这里把官方的资料收集收集,给大家推荐一下下~ Architecture ECharts (Enterprise Charts 商业产品图表库) 提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图.柱状图.散点图.K线图.饼图.雷达图.地图.和弦图.力导向布局图.仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现. 支持IE6/7/8/9+,chrome.f

数据 数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.因此做数据可视化前需要想明白2件事: 你有什么数据? 你要传达什么信息? 本文中的示例中,将以不同的颜色显示澳大利亚不同地区的客户数量. 因此,首先需要澳大利亚的地图数据,D3中的Geo模块可以处理GeoJSON格式的地理数据.(GeoJSON是一种对各种地理数据结构进行编码的格式.GeoJSON对象可以表示几何.特征或者特征集合.GeoJSON支持下面几何类型:点.线.面.多点.多线.多面和几何集合.GeoJSON里的特征包含