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