吴佩佩佩佩的博客

在openlayers中画虚线主要是通过设置Style对象中Stroke里的lineDash属性来实现，lineDash在官网文档描述中很模糊，只说了它是一个数组，再尝试后发现规律过来记录一下这个属性。lineDash数组可以任意长度，它的奇数代表线的长度，偶数代表间隙长度。通过这个规则，就可以画出各种规则的虚线，如以下效果：再举个例子：lineDash: [20, 10, 40, 20]代码如下：// 创建线因素const wireFeature = new Feature({ geom

在开发gis应用中，经常碰到需要改变视图来展示某个区域，比如切换每个城市，以前我的方法是通过区划数据计算出中心点和缩放等级设置给视图，如：let center = [x, y]let zoom = 15map.getView().setCenter(center)map.getView().setZoom(zoom)后来我就想，能不能去自适应center和zoom，通过翻官方文档，找到了view中的fit方法，来看一下官方文档的介绍：fit方法可以传2个参数。第一个是几何图形或者范围，其实

gis应用中拖动旋转和缩放是编辑中比较常见的功能，在openlayers中拖拽可以通过ol.interaction.Translate来实现，其他功能没有，所以要用的openlayers的一个扩展ol-ext。1. ol-extol-ext是openlayers的扩展，他主要包含控件，交互，弹出窗口等功能。类似于WEB前端的UI框架。他是一个成熟的扩展，可以让你省去很多时间，避免很多问题。注意区分一下使用方式对应的包名：在webpack中使用npm install ol-ext在web中使用

在openLayers中，默认有一个DoubleClickZoom事件，双击会缩放地图。当需要双击做一些其他操作的时候，效果就会冲突。解决办法是把这个默认事件删掉。import { Map, View, Feature, Collection } from 'ol'import { DoubleClickZoom } from 'ol/interaction'const map = new Map({ view: new View({ center: [0, 0], proje

change通用更改事件。当修订计数器增加时触发。change:layerGroupchange:sizechange:targetchange:viewclick单击事件。双击将触发其中两个。这个更像是触摸事件，与dblclick会冲突。singleclick真正的单击，此事件会延迟250毫秒，以确保它不是双击事件，与dblclick不冲突。dblclick双击事件。moveend地图移动结束事件。movestart地图开始移动。pointerdrag拖动时触发。p

文字样式let itemStyle = new Style({ text: new Text(({ // 位置 textAlign: 'center', // 基准线 textBaseline: 'middle', // 文字样式 font: 'bold 12px 微软雅黑', // 文本内容 text: '我是文字', // 文字颜色 fill: new Fill({ color: '#587de5' }), /

我使用到的是vue-cli脚手架，版本4.0.01. 安装npm install --save ol@5.3.02. 地图容器<div id="map></div>3. 引用olimport { Map, View, Feature } from 'ol'import { Vector as VectorLayer, Tile as TileLayer }...

创建要素var wireFeature = new ol.Feature({ geometry:new ol.geom.LineString([[121.5025,31.237015], [121.5025,31.247015], [121.4925,31.237015]])});数据源var vectorSource = new ol.source.Vector({ featu...

还是用的上一篇文章的代码，新增了images目录放了一张图片1. 新增标记创建2个要素var iconFeature = new ol.Feature({ geometry: new ol.geom.Point([121.5025,31.237015]),});var iconFeature2 = new ol.Feature({ geometry: new ol.geom....

1. 准备工作准备好openlayers的js、css文件和上篇文章下载的上海地图瓦片(格式为谷歌XYZ)。新建一个html文件，我的目录是这样的：引用文件<link rel="stylesheet" href="./static/ol.css"><script src="./static/ol.js"></script>添加容器<div ...

上一篇文章写到了什么是瓦片，这一篇记录一下如果制作地图瓦片1. 地图瓦片制作打开太乐地图下载器,左上角选择地图切换 > 高德地图 > 高德街道地图然后点击右侧选择行政区划下载，选择上海选好之后就能看见蓝色的虚线了，双击虚线里面，弹出下载页面。选择存储目录，级别勾选1到15级，级别越大图片越清晰。存储格式选择瓦片：谷歌(这里也可以选择TMS等格式)。图片格式选择PNG，点击...

1. 地理坐标系地理坐标是由经度、纬度、高度三个变量描述组成的一个三维球面。2. 经纬度经纬度国内常见的有三套WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。CGCS2000：国内大地坐标系，跟WGS84几乎一样GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。BD09：为百度坐标系，在...

1. 代码编辑器Visual Studio Code，简称vscode，免费轻巧流畅好用。官方下载地址2. 地图下载器常见的地图下载器有：水经注下载器(最牛)、全能地图下载器、LocaSpaceViewer、太乐地图下载器。还有一些群里流行的: TMAP、红豆地球等等。亲测地图下载器加群免费授权都是假的，大多数都需要收费或者授给你一个没啥用的权，不过收费的质量高很多，这里我使用的是太乐地...

近期公司要做一款gis应用，无网环境openLayers近期公司要做一款gis应用，无网环境新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计 ，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；增加了 图...