【Day03】Openlayers从入门到微精通 - 新增线段

到了第三天,我想应该对于OL有一点点点点点的感觉了吧?

新增线段和新增点非常相似,咱们只需要把geometry中的物件换成LineString物件即可,同时记得两点一线需要两个座标点!!!!!

注意,我自己身为新手时常常犯的错误希望大家也可以避免
记得做好对应的座标转换

那我们就话不多说,直接来看看程式码

const map = new ol.Map({    layers: [        new ol.layer.Tile({            source: new ol.source.OSM()        })    ],    target: 'map',    view: new ol.View({        projection: "EPSG:3857",        center: ol.proj.fromLonLat([120.846642, 23.488793]),        zoom: 7.5,        maxZoom: 20,        minZoom: 5,        enableRotation: false,    }),    controls: []});// 两点一线,给出对应的点座标const p1 = ol.proj.fromLonLat([120, 23]);const p2 = ol.proj.fromLonLat([121, 24]);let line = new ol.layer.Vector({    source: new ol.source.Vector({        features: [            new ol.Feature({                // 如果与day02的比较你会发现,只有差在geom的物件不同而已                geometry: new ol.geom.LineString([p1, p2])            })        ]    })}); map.addLayer(line);

参考连结

https://github.com/weijung0923/learning-openlayers-micromastery/tree/day03


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章