2025年1月8日
前端学习openLayers配合vue3（面的绘制，至少三个点）
摘要： 我们学习了点和线的绘制，当然我们也可以绘制一个面 关键代码，需要注意的一点就是面的绘制需要三维数组，线的绘制是个二维数组 const polygonLayer = new VectorLayer({ source: new VectorSource(), }); map.addLayer(polyg 阅读全文
posted @ 2025-01-08 10:28 blackAge 阅读(59) 评论(0) 推荐(1) 编辑
前端学习openLayers配合vue3（两个坐标之间线的绘制）
摘要： 上节我们学了点的绘制，今天我们来学习一下线的绘制 关键代码 const lineLayer = new VectorLayer({ source: new VectorSource(), }); map.addLayer(lineLayer); let feature = new Feature({ 阅读全文
posted @ 2025-01-08 10:16 blackAge 阅读(22) 评论(0) 推荐(0) 编辑
2025年1月7日
前端学习openLayers配合vue3（圆形形状的绘制）
摘要： 上节课我们学了加载了矢量图片，这节我们来学绘制圆形 关键代码，第一段呢是设置圆点的操作，第二步是点击地图获取地图位置来设置圆点，ol还有很多类，各种形状的 //设置圆点 // let anchorLayer = new VectorLayer({ // source: new VectorSourc 阅读全文
posted @ 2025-01-07 16:03 blackAge 阅读(46) 评论(0) 推荐(0) 编辑
前端学习openLayers配合vue3（加载矢量图标）
摘要： 今天我们来进行矢量图标的加载 关键代码 有一个比较注意的点就是，图片路径必须引入不能直接写路径，我找半天也没发现问题所在 let anchorLayer=new VectorLayer({ source: new VectorSource(), }); let anchorFeatures=new 阅读全文
posted @ 2025-01-07 11:24 blackAge 阅读(46) 评论(0) 推荐(0) 编辑
2025年1月6日
前端学习openLayers配合vue3（获取矢量图的个数，省份的个数）
摘要： 矢量图层绘制了一个中国地图，我们获取一下矢量图层的个数 关键代码 map .getLayers()//获取所有图层 .item(1)//获取矢量图层 .getSource() .on("change", function () { // 获取图层的 features count=this.getFe 阅读全文
posted @ 2025-01-06 15:20 blackAge 阅读(13) 评论(0) 推荐(0) 编辑
前端学习openLayers配合vue3（修改地图样式）
摘要： 这一块的东西非常简单，基于上一步的继续操作 关键代码,当然对应的对象需要进行相关的引入，为了方便理解，把背景色和边框放在了一起 //填充颜色 style:new Style({ fill:new Fill({ color: "rgba(255, 0, 0, 0.5)", }) }) //边框stro 阅读全文
posted @ 2025-01-06 14:54 blackAge 阅读(39) 评论(0) 推荐(0) 编辑
2025年1月3日
前端学习openLayers配合vue3（加载线上数据源）
摘要： 现在我们学习一下加载网上的线上数据再加上点矢量图层，紧接着上一步 关键代码 layers: [ //瓦片图层source第三方，或者自带的,地图的底层 new TileLayer({ // source: new OSM(),//内置的国外地址，需要代理 source: new XYZ({ url: 阅读全文
posted @ 2025-01-03 14:59 blackAge 阅读(22) 评论(0) 推荐(0) 编辑
前端学习openLayers配合vue3（偏移动画效果，限制范围）
摘要： 我们原来的偏移感觉比较生硬，我们来学习一下偏移的动画，先列一下这节的知识点 限制经纬度范围和缩放范围（view层） view = new View({ center:[114.305469,30.592876], zoom: 10, projection:'EPSG:4326', extent:[1 阅读全文
posted @ 2025-01-03 11:01 blackAge 阅读(16) 评论(0) 推荐(0) 编辑
前端学习openLayers配合vue3（图层中心点的偏移）
摘要： 有了上一步的学习，我们知道了如何创建一个地图，现在我们来尝试更改一下图层的中心点 关键代码 let view = map.getView();//获取视图层 let center = view.getCenter(); //表示当前中心点的位置，调增经纬度就可以进行位置的便宜，下移，左移右移也同理 阅读全文
posted @ 2025-01-03 10:26 blackAge 阅读(28) 评论(0) 推荐(0) 编辑
前端学习openLayers配合vue3（简单的创建一个地图）
摘要： 首先搭建一个vue工程化环境，首先我们先来创建一个地图吧 首先我们需要下载 npm i ol 其次我们需要在main.js里面引入相关的css import 'ol/ol.css' 到现在我们就可以开始敲击我们的代码了，直接复制就可以展示出一个简单的地图啦，相关备注已经在代码中标注，有什么不懂的可以 阅读全文
posted @ 2025-01-03 10:16 blackAge 阅读(9) 评论(0) 推荐(0) 编辑
下一页