郑州网站优化推广,360收录提交,游戏推广员如何推广引流,内蒙古建筑培训网官网1 需求
使用openlayers绘图功能绘制多边形
2 分析
主要是openlayers中draw功能的使用#xff0c;感觉比较简单#xff0c;祖传CV大法搞起来
3 实现
为了方便#xff0c;就不加载底图了#xff0c;直接使用绘制功能
2.1 简单实现
templatediv idma…1 需求
使用openlayers绘图功能绘制多边形
2 分析
主要是openlayers中draw功能的使用感觉比较简单祖传CV大法搞起来
3 实现
为了方便就不加载底图了直接使用绘制功能
2.1 简单实现
templatediv idmap classmap/div
/templatescript setup langts
import { Map, View } from ol;
import { get } from ol/proj;
import { Style } from ol/style;
import { Fill, Stroke } from ol/style.js;
import Draw from ol/interaction/Draw.js;
import { Vector as VectorSource } from ol/source.js;
import { Vector as VectorLayer } from ol/layer.js;const projection get(EPSG:4326);
const source new VectorSource();
const map ref();
const draw ref();onMounted(() {initMap();initDraw();
});const initMap () {map.value new Map({target: map,view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: new Style({stroke: new Stroke({color: orange,width: 2}),fill: new Fill({color: [203, 150, 62, 0.5]})})})]});
};const initDraw () {draw.value new Draw({source: source,type: Polygon});draw.value.on(drawstart, e {console.log(e, e);});draw.value.on(drawend, e {console.log(coord, e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};
/script
style scoped langscss
.map {width: 100%;height: 100%;background: #000;
}
/style 2.2 需求更新1
新需求
自定义绘制时的样式没有绘制完成时显示虚线顶点增加Point绘制完成后每个顶点需要显示一个Point
分析
这里主要是styleFunction的灵活使用
实现:
templatediv idmap classmap/div
/templatescript setup langts
import { Map, View } from ol;
import { get } from ol/proj;
import { Style } from ol/style;
import Draw from ol/interaction/Draw.js;
import { Vector as VectorSource } from ol/source.js;
import { Vector as VectorLayer } from ol/layer.js;
import { Circle, Fill, Stroke } from ol/style.js;
import { Point } from ol/geom;const projection get(EPSG:4326);
const source new VectorSource();
const map ref();
const draw ref();onMounted(() {initMap();initDraw();
});const initMap () {map.value new Map({target: map,view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: styleFunc})]});
};const initDraw () {draw.value new Draw({source: source,type: Polygon,style: drawStyleFunc});draw.value.on(drawstart, e {console.log(e, e);});draw.value.on(drawend, e {console.log(coord, e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};const drawStyleFunc (feature) {const styles [];const coord feature.getGeometry().getCoordinates();for (let i 0; i coord.length - 1; i) {styles.push(new Style({geometry: new Point(coord[i]),image: new Circle({radius: 4,fill: new Fill({color: #ffff}),stroke: new Stroke({color: orange,width: 2})})}));}styles.push(new Style({fill: new Fill({color: [255, 255, 255, 0.5]}),stroke: new Stroke({color: red,lineDash: [10],width: 2})}));return styles;
};const styleFunc (feature) {const styles [];const coord feature.getGeometry().getCoordinates();for (let i 0; i coord[0].length - 1; i) {styles.push(new Style({geometry: new Point(coord[0][i]),image: new Circle({radius: 4,fill: new Fill({color: #ffff}),stroke: new Stroke({color: orange,width: 2})})}));}styles.push(new Style({fill: new Fill({color: [128, 128, 255, 0.5]}),stroke: new Stroke({color: blue,width: 2})}));return styles;
};
/script
style scoped langscss
.map {width: 100%;height: 100%;background: #000;
}
/style 2.2 需求更新2
新需求
确定的两个顶点之间变为实线取消跟随鼠标的Point影响定位取消绘制时的填充
分析
这里主要是styleFunction的灵活使用
实现
templatediv idmap classmap/div
/templatescript setup langts
import { Map, View } from ol;
import { get } from ol/proj;
import { Style } from ol/style;
import Draw from ol/interaction/Draw.js;
import { Vector as VectorSource } from ol/source.js;
import { Vector as VectorLayer } from ol/layer.js;
import { Circle, Fill, Stroke } from ol/style.js;
import { LineString, Point } from ol/geom;const projection get(EPSG:4326);
const source new VectorSource();
const map ref();
const draw ref();onMounted(() {initMap();initDraw();
});const initMap () {map.value new Map({target: map,view: new View({center: [116.406393, 39.909006],projection: projection,zoom: 5}),layers: [new VectorLayer({source: source,style: styleFunc})]});
};const initDraw () {draw.value new Draw({source: source,type: Polygon,style: drawStyleFunc});draw.value.on(drawstart, e {console.log(e, e);});draw.value.on(drawend, e {console.log(coord, e.feature.getGeometry().getCoordinates());});map.value.addInteraction(draw.value);
};const drawStyleFunc (feature) {const styles [];const type feature.getGeometry().getType();const coord feature.getGeometry().getCoordinates();for (let i 0; i coord.length - 1; i) {styles.push(new Style({geometry: new Point(coord[i]),image: new Circle({radius: 4,fill: new Fill({color: #ffff}),stroke: new Stroke({color: orange,width: 2})})}));}if (type LineString) {for (let i 0; i coord.length - 1; i) {styles.push(new Style({geometry: new LineString([coord[i], coord[i 1]]),stroke: new Stroke({color: orange,lineDash: coord.length 2 i coord.length - 2 ? [] : [10],width: 2})}));}}return styles;
};const styleFunc (feature) {const styles [];const coord feature.getGeometry().getCoordinates();for (let i 0; i coord[0].length - 1; i) {styles.push(new Style({geometry: new Point(coord[0][i]),image: new Circle({radius: 4,fill: new Fill({color: #ffff}),stroke: new Stroke({color: orange,width: 2})})}));}styles.push(new Style({fill: new Fill({color: [128, 128, 255, 0.5]}),stroke: new Stroke({color: blue,width: 2})}));return styles;
};
/script
style scoped langscss
.map {width: 100%;height: 100%;background: #000;
}
/style 存在问题
在点击鼠标后并且鼠标有移动时前一段虚线才会变成实线并且顶点加上Point因为只有鼠标移动才会有新的坐标点加入到绘制因为openlayers没有提供绘制过程中的钩子函数所以只能是当前效果有需要时drawStyleFunction可以和styleFuntion合并成一个
