而且都是利用百度地图的接口来实现的。 刚好按照网上的方法，自己也能搞定某一个边界的下载，按照网上的一个HTML页面就可以搞定的。 <!...var name = document.getElementById("districtName").value; bdary.get(name, function(rs){ //获取行政区域... map.clearOverlays(); //清除地图覆盖物 document.getElementById('Div1').innerText =...于是呢，采用.net的webbrowser来实现对边界数据的批量下载。 其原理非常简单，就是通过webbrowser的document获取页面中指定的input和按钮，进行消息触发。...由于百度提供的边界线接口中，县级区域数据并未完全更新完整，如三沙市，广丰县实质上已经变为区等，所以这样界线数据相对来说还是有些滞后。
对比腾讯、百度、OpenLayers 目前做 LBS 需求的前端有几个 API 选择，高德地图、腾讯地图、百度地图，还有一个由于某些原因相对用的人比较少的 OpenLayers。...OpenLayers 使在任何 Web 页面中放置动态地图变得很容易。它可以显示从任何源加载的地图块、矢量数据和标记。OpenLayers 的开发是为了进一步利用各种地理信息。...信息窗体：用于在地图上展示复杂的说明性信息的类型 右键菜单：控制右键菜单 矢量图形：用于在地图上绘制线、面等矢量地图要素的类型 群组：用于批量操作图层和覆盖物的群组类型，可以简化代码书写 地图控件：固定于地图最上层的用于控制地图某些状态的...然后添加在地图中心添加一个 Marker。 监听地图拖放，缩放事件 moveend zoomend，获取地图中心，移动 Marker。 获取最新的地址，设置 marker 的 label。...可以满足日常的行政区块的数据可视化、行政区边界展示。
概述： 本文讲述如何在openlayers中实现画圆。 效果： ?...实现思路： 1、画中心点 通过OpenLayers.Control.DrawFeature和OpenLayers.Handler.Point实现在地图上画圆心。...2、移动鼠标设置半径 画点结束后，激活地图的鼠标移动事件，获取圆心到鼠标点的距离，并画圆，将结果展示到地图上。...3、点击地图结束绘制 点击地图，结束绘制，将最终结果展示到地图上，并停止地图的鼠标移动事件。...= new OpenLayers.Layer.Vector("drawLayer",{ styleMap: new OpenLayers.StyleMap()
概述： 前面的有篇文章介绍了Openlayers 2.X下加载天地图，本节介绍Openlayers 2.X下加载高德地图。 实现效果： ? 高德地图 ?...高德影像 图中：蓝色的省市边界为我本机发布的，能够与高德地图很好地结合在一起。...实现： 实现很简单的，主要是要获取地图的url，在Arcgis for js加载百度地图一文（http://blog.csdn.net/gisshixisheng/article/details/44853709...-2.12/OpenLayers.js"> var map; function...()); map.addControl(new OpenLayers.Control.MousePosition()); var wms = new OpenLayers.Layer.WMS
OpenLayers简介 OpenLayers（https://openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求...这是本系列的第一篇，主要介绍地图的实例化、基本的要素操作，后续不定期更新。 本文基于OpenLayers v6+版本，代码基于Vue。...安装 npm i ol 实例化地图 要显示一个基本的地图首先需要提供一个容器，设置好宽高，然后引入OpenLayers，添加一个地图图层，地图服务可以使用内置的一个开源地图OSM，也可以使用其他的在线瓦片服务...获取地图当前区域的范围 为了性能考虑，如果是在地图上显示要素的话最好是只显示当前显示区域内的要素，要显示的数据一般从后端进行请求，那么可以把当前区域的范围发送给后端，后端只返回这个区域内的数据就好了，那么就需要获取当前的范围...： // 获取当前地图区域上下左右四个点的经纬度 let range = map.getView().calculateExtent(map.getSize()) let state = { minLon
theme: smartblue 本文简介 image.png 将地图切换到不同容器里展示。 不管在地图上做任何操作，切换容器后，操作过的内容也是会同步过去。...思路 使用 ol 提供的方法可以获取 当前地图所在容器 和 设置地图到新的容器 里。...Map.getTarget() 获取当前地图所在容器 Map.setTarget() 设置地图到指定容器 编码 ...'ol' import Tile from 'ol/layer/Tile' import OSM from 'ol/source/OSM' // 注意：【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题...通过这样操作就可以把地图来回切换容器了。 如果不清楚 OpenLayers 是什么，可以阅读： 『Vite + Vue3 + OpenLayers 起步』
概述： 假设如下场景：首先地图加载一个WMS或者切片，wms为POI或者切片上有POI，我们知道WMS或者切片是无法做到像Marker或者矢量的事件相应的，但是我们又需要对这些POI点进行响应，...基于此想法，本文讲述此想法的实现思路以及OL2和Arcgis中的实现方式。 思路： 实现的关键是注册两个map的事件：1、四至发生变化的时候；2、鼠标移动的时候。...1、四至发生变化 当地图的四至发生变化时，我们需要将变化后四至内的POI点的数据返回到前台进行下一步处理，返回的逻辑可以采用一次性全部返回或者分区域返回，分区域返回的优势是减少数据的传输量，但是分区域返回时需要结合鼠标移动的同时响应的...2、鼠标移动的时候 当获取到了当前区域的POI数据，当鼠标移动时，以鼠标点为中心，当前地图的分辨率*图标大小为长宽，创建一个正方形，去循环判断POI点是否落在的该正方形内，是，响应；否，返回。.../plugin/OpenLayers-2.13.1/OpenLayers.js"> <script src="../../..
概述： OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。版本2虽然被广泛使用，但从JavaScript开发的早期发展阶段开始，已日益现实出它的落后。...OL3已运用现代的设计模式从底层重写。OpenLayers 3同时设计了一些主要的新功能，如显示三维地图，或使用WebGL快速显示大型矢量数据集，这些功能将在以后的版本中加入。 基本概念： ?...OL3结构图 1、Map OpenLayers 3的核心部件是Map（ol.Map）。它被呈现到对象target容器（例如，包含在地图的网页上的div元素）。...所有地图的属性可以在构造时进行配置，或者通过使用setter方法，如setTarget（）。 ?...子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式…）等。
前言 好久不见，距离OpenLayers入门第一篇已经过了很久，为什么迟迟没有后续呢，主要有两个原因，一是因为近期项目里使用地图的部分比较少，二是因为很多时候即使功能做出来了，但是还是不能完全理解，不是很明白的东西除了贴代码之外也写不了啥...虽然是基于v3版本介绍的，很多api可能变了，但还是值得一看，除了OpenLayers本身的介绍，还会有一些地理基础知识的分享，这种相对全面的中文教程真的很稀有，且看且珍惜。...区域中间的名字显示可以通过Overlay叠加层来显示，主要是要计算一下显示的位置： import Overlay from 'ol/Overlay'; import { boundingExtent }...from 'ol/extent'; import { getCenter } from 'ol/extent'; import { fromLonLat } from 'ol/proj'; // 获取一个多边形的四个边界点...添加阴影效果 OpenLayers的样式对象并不支持直接设置阴影效果，所以需要获取到canvas的绘图上下文来自行添加，原理是监听图层的prerender（在一个图层渲染前触发）和postrender（
起步』 三、思路与编码 思路 初始化地图 地图点击事件，并获取当前点击的坐标位置 弹出窗口 初始化地图 初始化地图详细操作可以查看 『Vite + Vue3 + OpenLayers 起步』 要初始化地图...，首先需要引入 ol 提供的基础服务 还需要一个地图容器（我使用的是一个 div 标签） 然后通过 ol 提供的方法绑定这个容器 配置基础参数，渲染地图 地图点击事件 ol 提供了一系列的交互事件，其中就有...鼠标点击底图 事件 利用这个事件获取到当前点击的坐标位置 弹出窗口 弹窗需要一个容器来展示信息（我使用了一个 div 标签） 通过"地图点击事件“获取到的坐标位置来定位弹窗出现的位置...本例使用了 ol 提供的方法，把 弹窗容器 放入 ol的“覆盖物”’ 中管理。...(null) // 覆盖物实例 const currentCoordinate = ref('') // 弹窗信息 // 初始化地图 function initMap() { // 注册一个覆盖物
虽然这个 Demo 是结合 OpenLayers3 的，其实还可推广到与 ArcGIS、百度地图以及 GoogleMap 等众多 GIS 地图引擎融合。 ?...OpenLayers 支持的地图来源包括 Google Maps、Yahoo、 Map、微软 Virtual Earth 等多种离线在线地图，这里用到的是比较大众化的谷歌地图 Google Map 的在线地图...js 库，有着各自的交互系统和坐标系，首先我们将某些我们需要获取在 HT 上做的交互事件并停止事件传播到 OpenLayers 上： // 拖拽 node 时不移动地图 var stopGraphPropagation...，主要是将节点的像素坐标转为 OpenLayers 的 ol.Cordinate 地图视图投影中的坐标并存储到节点的业务属性（HT 的一个可以存储任意值的对象）中，这样我们只需要通过获取或设置节点的业务属性...值得注意的一点是，我们在上面对节点在电信 GIS 地图视图投影中的坐标进行了数据存储，但是这个方法对于 Shape 类型的节点来说不太合适，因为地图上一般都是用点围成区域面，勾勒出某个国家或者某个城市的轮廓
这些数据可以是预处理的产品，例如正射影像，也可以是半成品数据，例如空间配准之后仍存在重 叠区域的正射影像；或者原始影像，例如原始扫描帧或卫星影像。...图像镶嵌（支持基于属性的镶嵌，如日期、质量、云覆盖等，也支持最临近底点镶嵌，支持不同方向视点的镶嵌，支持羽化的接缝线镶嵌等） 辐射处理? 从多波段影像提取/加入波段 ? ...2C183.21003918663314%2C57.48141724630558&imageSR=4326&bboxSR=4326&size=1292%2C333 其中有三个参数： 1、f，格式，为常量image； 2、bbox，是请求的地图四至...完整代码如下： OpenLayers.Layer.AgsImageLayer = OpenLayers.Class(OpenLayers.Layer.Grid, { DEFAULT_PARAMS.../plugin/OpenLayers-2.13.1/OpenLayers.js"> <script src="../../..
概述 echart，一个由百度前端发起的canvas国产类库（官网：http://echarts.baidu.com/index.html）。...echart其实是在canvas类库zrender的基础上做的主题图库，优点有数据驱动，图例丰富，功能强大，支持数据拖拽重计算，数据区域漫游等功能，不论是从使用便捷程度、美观程度等方面都是不错的选择，在本文讲述如何在...Openlayers中结合echart实现地图统计图的展示。.../plugin/OpenLayers-2.13.1/OpenLayers.js"> <script src="../../.....'echarts/chart/pie' ], function (ec) { // 基于准备好<em>的</em>dom
概述： 在Arcgis for js中，有一个图层FeatureLayer，能够很方便的实现点、线、面的高亮。...FeatureLayer是GraphicsLayer图层的一个扩展，本文讲述如何在Openlayers中通过Vector的扩展实现FeatureLayer。...思路： 1、地图服务 本示例应用的是Geoserver作为地图服务； 2、数据来源 Vector的数据通过WFS服务获取得到GeoJSON的数据； 完成后效果： ? 点 ? 线 ?...面 实现代码： 1、FeatureLayer OpenLayers.Layer.FeatureLayer = OpenLayers.Class(OpenLayers.Layer, { isBaseLayer...if (OpenLayers.Util.indexOf(this.selectedFeatures, feature) !
这些数据也是从高德上面来的，翻了下高德地图的api，其实可以直接获取 高德地图获取地图边界数据 区域查询获取边界数据 行政区域查询官方文档：https://lbs.amap.com/api/webservice...，无法获取子区域边界。...百度地图获取行政区域边界 通过BMap.Boundary()，获取地图边界数据。... map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for...转载本站文章《百度高德地图行政区域边界GeoJSON数据获取并绘制行政区域》, 请注明出处：https://www.zhoulujun.cn/html/GIS/WebGIS/8155.html
一、前言 行政区划在地图应用中非常有用，行政区划是行政区域划分的简称，是国家为了进行分级管理而实行的区域划分，百度地图提供的内置的函数类支持传入行政区划的名称来获取对应的边界点集合，然后根据该集合来绘制点集合...，最后将该点集合封闭连起来，就形成了行政区划的轮廓图了，使用下来发现地图本身提供的函数可以支持到县城，如果需要精确到乡镇那就需要其他办法获得，一种是直接加载事先准备好的乡镇的边界点集合的js文件，一种是在地图上绘制多边形...，然后开启可编辑属性，人为的拖动边界，最后获取整个多边形的边界点集合即可，这种方法有个专业术语叫扒数据，在音乐界叫扒带。...其实方法一的前提也是按照方法二来获取的，对于很小的应用数量不多的乡镇可以采用此法，如果需要很多省市的乡镇那就可能需要安排专人去获取了。 二、功能特点 同时支持在线地图和离线地图两种模式。...可显示点线面工具，可直接在地图上划线、点、矩形、圆形等。 可设置行政区划，指定某个城市区域绘制图层，在线地图自动输出行政区划边界点集合到js文件给离线地图使用。 可静态或者动态添加多个覆盖物。
对土地覆被进行分类以识别湖泊 要量化 1984 年至 2014 年间湖表面积的变化，需要对两幅影像中的土地覆被进行分类，确定被水覆盖的区域并将其与其他土地覆被（如植被或城市区域）区分开来。...在多光谱影像（如 Landsat）中，影像中的每个像素（或像元）对于每个光谱波段都有一个值。从鄱阳湖充满活力的图像中可以看出，各种色调和色调都有许多可能的颜色值。...Iso 聚类无监督分类工具获取原始影像中的所有像素，并根据它们的光谱相似性将它们分类为四个值类。然后，它随机选择四种颜色来符号化每个类。...可见的蓝色区域表示1984年被水覆盖的区域，但在2014年没有，更清楚地显示了两个时间点之间湖泊的减少。、 清理分类 现在，将使用制图综合分析工具清理分类影像，以清除湖泊周围的小错误或小水体。...新的 1984 年图层随即添加到地图中。差异很小，但值之间的边界被平滑了。此外，还会删除散布在整个图像中的更多小的单个像素。虽然还剩下一些，但泛化工具已经大大清理了图像。
一、本文简介 除了用鼠标滚轮在地图上缩放外，还可以使用 ol 提供的 api 设置地图缩放级别。...获取当前缩放级别：View.getZoom() 设置缩放级别：View.setZoom() 【注意：本文使用的图源是 OSM ，正式开发不能用 OSM ，因为 OSM 的中国边界有点问题！！！】...install # 3、安装 ol npm i ol -S # 4、启动项目 npm run dev 使用 Vite 初始化项目并安装 ol ，更详细做法可以查看 『Vite + Vue3 + OpenLayers...（打开页面时默认级别） minZoom, // 地图缩放最小级别 maxZoom // 地图缩放最大级别 }) }) } // 实时获取当前地图的 zoom const...() { let view = map.value.getView() // 获取当前视图 let zoom = view.getZoom() // 获取当前缩放级别 view.setZoom
概述： 不论是在Arcgis for js还是Openlayers中，当POI点比较多的时候，在前台页面的展示在效率上是一大问题。...经过一段时间的研究，发现百度地图在这一问题上的处理思路比较好：将要展示的POI点在服务器端生成图片，页面只调用图片的话效率会比较高。...本文讲述如何在java后台实现POI点在服务器端的实时生成以及在Openlayers2的展示。 实现后效果： ? ? ?...3 很简单的一步了，那就是算出该地理坐标区域中的任何一点(lon,lat)在屏幕上的坐标了。...5 当地地理范围区域占满整个屏幕时，我们需要用到第三步计算出来的 screenX和screenY两个参数，该区域中的任何一点的公式如下： 公式：X = screenX - minX = (lon -
代码加载 至于如何加载地图在第一篇的加载瓦片式地图已经提过了，看完第一篇的你应该知道我是将地图map交接给页面的div中，而map中包含了很多遮罩层，我现在加载GeoJSON就是在最上面的层上在加载url...这里需要完整代码的请CSDN上私信我或者在留言板上留言效果欣赏 1、地图加载完毕 这里你看到的地图不是上次的了，这次这个地图就是GeoJSON里的数据，只不过将数据以图形化的形式展现在我们的面前，看到地图右上方的两个点和一条线了吗....B.length == 2是判断feature里数字点的个数，大家想一想如果是点是不是有两个数字点，如果是线就是两个点也就是四个数字点，如果是区域的话那就是至少是超过4的偶数了，这样我们就可以区别出点线和区域了...，这也就是说我们在这里就实现了之前很难解决的点线问题了，区域问题我们就不多加讨论了。...| 新旧对比 | openlayers2 | openlayers3 | |:-------------- |:-------------|:-----| | 点击 | 获取经纬度查询 | 点线类别区分
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
