男人女人做羞羞事网站,网站建设遵循的原则是什么,网站开发h5页面,意大利设计网站推荐文章目录 1.实现效果2.实现步骤3.示例页面代码3.基本几何图形绘制的关键代码 1.实现效果
绘制点、线、多边形、圆、正方形、长方形
2.实现步骤
引用openlayers开发库。加载天地图wmts瓦片地图。在页面上添加几何图形绘制的功能按钮#xff0c;使用下拉列表#xff08;sel… 文章目录 1.实现效果2.实现步骤3.示例页面代码3.基本几何图形绘制的关键代码 1.实现效果
绘制点、线、多边形、圆、正方形、长方形
2.实现步骤
引用openlayers开发库。加载天地图wmts瓦片地图。在页面上添加几何图形绘制的功能按钮使用下拉列表select设置几何图形绘制功能项并设置其样式。其中当“几何图形类型”为“无”时清除当前绘制的所有图形。
3.示例页面代码
templatediv idmap classimap/divdiv classmenulabel几何图形类型/labelselect idtype v-modeltypeSelect changetypeSelectOnChangeoption value无/optionoption valuePoint点/optionoption valueLineString线/optionoption valuePolygon多边形/optionoption valueCircle圆/optionoption valueSquare正方形/optionoption valueBox长方形/option/select/div
/template3.基本几何图形绘制的关键代码
script setup// vueopenlayers之几何图形交互绘制基础与实践import {onMounted,ref} from vueimport ol/ol.css;import {Map,View} from ol;import TileLayer from ol/layer/Tile;import XYZ from ol/source/XYZ;import VectorLayer from ol/layer/Vector;import VectorSource from ol/source/Vector;import {Circle,Fill,Stroke,Style,Text} from ol/style;import Draw, {createRegularPolygon} from ol/interaction/Draw;import {LinearRing,LineString,MultiLineString,MultiPoint,MultiPolygon,Point,Polygon,} from ol/geom;var map null;var draw; // 绘制对象// 实例化一个矢量地图vectorvar source new VectorSource({wrapX: false})var vector new VectorLayer({source: source,style: new Style({fill: new Fill({ //填充样式color: rgba(225,225,225,0.2)}),stroke: new Stroke({ //边界样式color: #ece034,width: 2}),image: new Circle({ //点要素样式radius: 7,fill: new Fill({color: #ece034})}),})})onMounted(() {map new Map({target: map,layers: [new TileLayer({source: new XYZ({url: 你的天地图地址,attributions: 影像底图,crossOrigin: anonymous,wrapX: false //如果设置为 false,地图在横向滚动到最右侧时不会出现重复的地图;}),preload: Infinity})],view: new View({//地图初始中心点center: [0, 0],minZoom: 2,maxZoom: 18,zoom: 5})});window.olmap mapmap.addLayer(vector)})const typeSelect ref()function typeSelectOnChange() {map.removeInteraction(draw)addInteraction()}//根据几何图形类型进行绘制function addInteraction() {var value typeSelect.value //几何图形类型if (value) {if (source null) {source new VectorSource({wrapX: false});vector.setSource(source); //添加数据源}var geometryFunction, maxPoints;if (value Square) { //正方形value Circle; //设置几何图形类型为Circle(圆形)//设置几何图形类型,即创建正多边形geometryFunction createRegularPolygon(4);} else if (value Box) { //长方形value LineString; //设置绘制类型为LineString(线)maxPoints 2; //设置最大点数为2//设置几何图形类型,即设置长方形的坐标点geometryFunction function (coordinates, geometry) {var start coordinates[0];var end coordinates[1];if (!geometry) {//多边形geometry new Polygon([[start, [start[0], end[1]], end, [end[0], start[1]], start]]);}geometry.setCoordinates([[start, [start[0], end[1]], end, [end[0], start[1]], start]]);return geometry;};}//实例化交互式图形绘制控件并添加到地图容器中draw new Draw({source: source, //数据源type: /**type{ol.geom.GeometryType}*/ (value), //几何图形类型geometryFunction: geometryFunction, //几何图形变更时调用函数maxPoints: maxPoints, //最大点数style: new Style({image: new Circle({radius: 7,fill: new Fill({color: #ece034,}),}),stroke: new Stroke({ //边界样式color: #ece034,width: 2}),}),});map.addInteraction(draw);} else {source null;vector.setSource(source); //清空绘制的图形}}
/script
