map
关注
分享
扫一扫
文章平均质量分 56
浩星
95后的我从小鲜肉变成老腊肉了
展开
-
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。原创 2024-06-18 11:23:38 · 2228 阅读 · 0 评论 -
openlayers地图坐标转换为屏幕像素坐标，屏幕像素坐标转成地图实际坐标
前言： openlayers的地图坐标的转换，地图坐标与屏幕像素坐标的互转。具体方法：地图坐标转屏幕像素（getPixelFromCoordinate）：入口屏幕像素转地图坐标（getCoordinateFromPixel）：入口封装方法源码：参数 Coordinate_arr:[ [116.33272829555995,39.893308222194946], //右上 [116.33272829555995,39.85376168646...原创 2021-11-26 18:03:16 · 5946 阅读 · 0 评论 -
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。相关资料:1、ol-ext官方地址：入口2、ol-ext 对应的资料地址：入口3、ol-ext 源码gitee地址：入口4、openlayers 最新官网：入口5、openlayers 官网api：入口6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口...原创 2021-11-26 17:17:48 · 5785 阅读 · 13 评论 -
vue+openlayer实现：拖拽、旋转、缩放、拉伸、移动等功能以及对应的监听事件
前言： openlayer 是有他自己的扩展插件 ol-ext，我们这里用他来实现图形的操作：拖拽、旋转、缩放、拉伸、移动等等功能，以及他的监听事件，毕竟我们作图以后是需要保存数据给后端，存到数据库的。相关资料:1、ol-ext官方地址：入口2、ol-ext 对应的资料地址：入口3、ol-ext 源码gitee地址：入口4、openlayers 最新官网：入口5、openlayers 官网api：入口实现效果：旋转、拖动图1、实现效果图2、旋转效果...原创 2021-11-24 14:05:17 · 3557 阅读 · 0 评论 -
vue+openlayer5获取当前鼠标滑过的坐标
前言： 在vue项目中怎么获取当前鼠标划过的坐标呢，这里来分享下方法。实现效果：实现步骤：1、引入相关文件import MousePosition from 'ol/control/MousePosition';import {createStringXY} from 'ol/coordinate';2、生成地图var layers = [ //深蓝色背景 new TileLayer({ source:...原创 2021-11-15 18:18:09 · 1033 阅读 · 2 评论 -
openlayer限制地图拖动的范围-离线地图中
前言： 在项目中会遇到我们只有某一个区域的离线地图瓦片的情况，就需要限制地图的拖动范围。比如我这里就因为只下载了中国地图的离线瓦片，需求要求不能出现地图留白情况。目录：官方提供的方法：入口具体介绍：extent 后面加一个范围的数组：获取四个值的技巧：比如获取中国地图1、我在左右上下各获取了一个点：2、min x : 他们四个点的经度的最小值 也就是这里的：73.327834754016523、max x: 他们四个点的经度的最大值 也就是...原创 2021-09-23 18:23:52 · 1991 阅读 · 0 评论 -
vue+openlayer实现地图聚合效果和撒点效果
前言： openlayer是目前我们gis常用的一款开源的，并且反馈都特别好的软件了，像之前的ol3, 风靡一时，地图实现也很简单，很实用，目前vue中使用地图也是非常多的，那么如果在vue中引入openlayer并且实现地图撒点效果，甚至是更深层的地图聚合效果呢，本文来分享下vue中地图的实现。目前openlayer的 5 系列，6.5 都是通用的，经测试可用。实现效果：1、聚合效果：2、撒点效果：具体实现步骤：1、项目中引入openlayercnpm...原创 2021-09-09 14:23:16 · 1518 阅读 · 2 评论 -
openlayer+虚线、实线
前言： openlayer实现虚线、实线效果的不同切换实现效果：实现步骤：1、虚线的方法：lineDash数组可以任意长度，它的奇数代表线的长度，偶数代表间隙长度。通过这个规则，就可以画出各种规则的虚线，如以下效果：再举个例子：lineDash: [20, 10, 40, 20]具体代码：//虚线var styleFunction2 = function (feature) { var styles = [ new ol.style....原创 2021-07-21 09:35:38 · 2061 阅读 · 0 评论 -
openLayers画椭圆
引言OpenLayers可以通过代码绘制多种几何形状，也可以通过draw类型的交互组件绘制几何形状，官方实例提供了类如圆、折线、矩形、星形等方法。除此之外，椭圆这种图形其实也是非常常见的几何图形，但是官方没有提供现成的API，本文从使用代码绘制和交互绘制两种途径详细讲解一下椭圆的绘制。一点理论基础众所周知，OGC提供的标准geometry类型只有点、线、面以及它们的组合，并没有圆和椭圆，OpenLayers绘制圆的时候，采用的是正多边形逼近法拟合的“圆形”。虽然渲染到canvas上的实际图形是个多边原创 2021-07-20 11:37:02 · 1594 阅读 · 0 评论 -
vue+高德离线地图vue-amap开发
前言： 在使用多次高德离线地图的插件 vue-amap 感觉收获还是很多的，这里来整理下相关资料效果图：实现步骤：（源码在最下面）一、安装插件cnpm install vue-amap --save二、template配置基础的地图组件 <el-amap vid="amapDemo1" :center="center" :zoom="zoom" ...原创 2020-08-14 16:08:37 · 8900 阅读 · 39 评论 -
高德离线地图vue-amap的api文档（2）：创建地图，撒点等等
前言： 高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口官网入口...原创 2020-08-13 17:24:15 · 6419 阅读 · 11 评论 -
高德离线地图vue-amap的api文档（1）：创建地图，撒点等等
前言： 高德离线地图的使用场景还是很多的，但是他的api在国外，想参考api对网络差的朋友来说不是一件容易的事，对我来说一样，在这里整理下他的api内容。注：本文是将官网api挪动出来，网好的童鞋想看原版的请点击官网入口目录：官网入口一、安装npm 安装CDNHello World二、快速上手1 - 项目结构2 - 引入vue-amap安装依赖构建三、初始化引入地图Promise参数兼容高德原生 SDK实例方式-地...原创 2020-08-13 16:11:13 · 12303 阅读 · 13 评论 -
vue-cli3.0引入高德3d动画效果方法一：
前言： 因为两个方法代码量都特别大，这里分2个页面详细说一下，这个页面是方法一，包括vue-cli3.0中使用和html中使用两种示例***注意：这里有想看另一种方法的童鞋请点入口：https://blog.csdn.net/qq_41619796/article/details/102968469好了。我们回到主题，分两部分来说一下项目中直接使用高德地图...原创 2019-11-08 11:19:40 · 5167 阅读 · 21 评论 -
vue-cli3.0引入高德地图3d效果两种方法+实例+填坑
前言： 因为项目需要引入高德地图的3d效果，找了很多资料，在这里记录下方法和实例组件***注意：因为两个方法代码量都特别大，这里分2个页面详细说一下，方法一是链接出去专门说，最下面有更多资料，高德3d官网地址和别的资料地址方法一：使用官方案例，这里提供两个实例，一个是vue-cli3.0使用，一个是直接用html引入实现效果效果：详细demo入口：http...原创 2019-11-08 11:04:14 · 9589 阅读 · 14 评论 -
gis地图常用的工具：geoserver、openlayers、cesium，为我们初学者学习gis提供的福利
1、geoserver：（底下有个案例说geoserver+openlayers） 是 OpenGIS Web 服务器规范的 J2EE 实现，利用 GeoServer 可以方便的发布地图数据，允许用户对特征数据进行更新、删除、插入操作，通过 GeoServer 可以比较容易的在用户之间迅速共享空间地理信息。官网地址：http://blog.geoserver.org/ ...原创 2019-04-09 17:17:19 · 7546 阅读 · 2 评论 -
arcgis10.2破解版下载及其详细教程；；；附带10.1-10.6的破解版，没有教程
1、arcgis10.2破解版： https://blog.csdn.net/bigemap/article/details/811318402、arcgis10.1-10.5破解版安装包： https://blog.csdn.net/e_wsq/article/details/809220273、arcgis破解安装包： http...原创 2019-05-23 14:52:26 · 8265 阅读 · 0 评论 -
用openlayers在加载离线瓦片（里面附带下载瓦片的软件，请往下看）
首先先来看看效果：这个是谷歌卫星图然后我们说说怎么实现的吧：<!DOCTYPE html><html><head> <title>离线瓦片</title> <link rel="stylesheet" href="css/ol.css"></head><body> <...原创 2019-05-15 17:38:18 · 2841 阅读 · 17 评论 -
全能电子地图下载器-获取离线地图瓦片的工具
百度网盘：https://pan.baidu.com/s/1Nj6NcU1F2Y1f0kP9KgUlxg 提取码：bxgh打开百度网盘并解压以后，你得到的东西是这些：第一先点击： MapTileDownloader_Ultimate_1.9.5.ext然后剩下几步都是默认安装就行；注意最后一步：先不要勾选接下来打开你安装的文件（从解压的文件里面把...原创 2019-05-15 17:43:29 · 104463 阅读 · 157 评论 -
免费获取echarts需要的省市县(区)的json数据
因为最近项目需要用echarts引入地图，最关键还是县一级的地图。所以今天找了好多资料，好多是要积分，而且还不是详细，只是到省市，满足不了我的需求，现在实现了一个效果，所以对资料做个整理：先看效果：（注意县级是底了，乡镇是实现不了的）方法一：http://datav.aliyun.com/tools/atlas/#&lat=24.9792116201569&lng=...原创 2019-05-12 16:10:34 · 8350 阅读 · 5 评论 -
免费获取省市县的shp，geojson文件
整理下资料：需要做准备工作： 1、 一个全能地图下载（https://blog.csdn.net/qq_41619796/article/details/90241491），可以获取边界坐标 2、获取文件的网站 http://geojson.io 3、GoogleEarthProPortable.exe文件，或者arcgis,又或者udi...原创 2019-06-13 10:28:22 · 22867 阅读 · 19 评论 -
pgslql+shp+geoserver 实现用pg库导入shp地图文件，然后通过geoserver发布图层的效果
首先，要有一个地图shp文件，然后，pg库地址：里面有pg库的安装包和依赖（这个加载进去会自动生成模板），还有geoserver的安装包和navicatpremium12的破解版百度网盘地址： https://pan.baidu.com/s/1202kcpWTXsk9GQ-wINr1tA 提取码：du1g-------------------------------...原创 2019-06-28 00:28:54 · 1110 阅读 · 0 评论 -
Geoserver2.15.0解决跨域问题-通过cors方法-下载的geoserver,不是war
我本来想获取geoserver发布的线路图层的数据的问题，然后调动geoserver服务时出现跨域问题，通过查找资料，解决了这个问题，在这里记录一下，以下是我获取geoserver发布的wfs服务的方法：$.ajax({ url: 'http://localhost:9800/geoserver/xinxing/wfs',//geoserver通过获取wfs来获取发布图层的线路数...原创 2019-08-21 19:42:02 · 899 阅读 · 0 评论 -
vue+pg库+openlayer5+geoserver+离线地图瓦片构建gis地图+地图撒点+点击点出现地图弹框（***完整流程***）
实现效果：（ol5的apihttps://openlayers.org/en/latest/apidoc/module-ol_Feature-Feature.html#getProperties）一、在vue项目中使用gis地图，实现地图的搭建 1、在pg库中存入你的gis地图数据（这里数据不提供，默认是实现了这一步） 2、在geoserver中获取pg库中的数据，并在...原创 2019-09-02 15:32:22 · 3564 阅读 · 0 评论 -
openlayer5实现地图撒点，点击弹框效果
效果展示：注意：公共代码，详细流程请看：https://blog.csdn.net/qq_41619796/article/details/100284203实现步骤：第一：用geoserver发布地图图层第二：在页面引用公共efgis.js文件 import webgisT from '../../config/efgis';//引入公共js文件第三：在页面用...原创 2019-09-02 15:53:11 · 1560 阅读 · 0 评论 -
QGIS的安装及其语言设置
因为这个官网是英文网站，下载速度很慢，这里我在网盘放了一个3.4.6的安装包：温馨提示： 安装的时候360会报错有木马文件，直接忽视，或者关掉就好了，可能是因为是未知的安装包，当然你要是从官网下载的更好网盘地址：https://pan.baidu.com/s/1mAkIfDS_YVO41zAATK-GGw 提取码：zlw1具体操作步骤： https://...原创 2019-04-10 14:03:09 · 8416 阅读 · 5 评论