郑州市做网站公司a汉狮,做网站镜像,百度账户托管,最低成本做企业网站这篇讲的是使用Draw绘制图形时根据绘制形状设置不同颜色。
根据下拉框中的值在styles对象中取对应的颜色对象#xff0c;new Draw的时候将其设置为style参数。 const styles {Point: {circle-radius: 5,circle-fill-color: red,},LineS…
这篇讲的是使用Draw绘制图形时根据绘制形状设置不同颜色。
根据下拉框中的值在styles对象中取对应的颜色对象new Draw的时候将其设置为style参数。 const styles {Point: {circle-radius: 5,circle-fill-color: red,},LineString: {circle-radius: 5,circle-fill-color: red,stroke-color: yellow,stroke-width: 2,},Polygon: {circle-radius: 5,circle-fill-color: red,stroke-color: yellow,stroke-width: 2,fill-color: blue,},Circle: {circle-radius: 5,circle-fill-color: red,stroke-color: blue,stroke-width: 2,fill-color: yellow,},};const typeSelect document.getElementById(type);let draw; function addInteraction() {const value typeSelect.value;if (value ! None) {draw new Draw({source: source,type: typeSelect.value,style: styles[value],});map.addInteraction(draw);}} 需要注意的是这个style是绘制过程中的颜色如果需要设置绘制完成后的颜色还得在图层中设置 const source new VectorSource({ wrapX: false });const vector new VectorLayer({source: source,style:style}); 完整代码
templatediv classboxh1Drawing Features Style绘制不同颜色的图形/h1div idmap/divdiv classrowdiv classcol-autospan classinput-grouplabel classinput-group-text fortypeGeometry type:/labelselect classform-select idtypeoption valuePointPoint/optionoption valueLineStringLineString/optionoption valuePolygonPolygon/optionoption valueCircleCircle/optionoption valueNoneNone/option/select/span/div/div/div
/templatescript
import Draw from ol/interaction/Draw.js;
import Map from ol/Map.js;
import View from ol/View.js;
import { OSM, Vector as VectorSource } from ol/source.js;
import { Tile as TileLayer, Vector as VectorLayer } from ol/layer.js;
export default {name: ,components: {},data() {return {map: null,};},computed: {},created() {},mounted() {const raster new TileLayer({source: new OSM(),});const source new VectorSource({ wrapX: false });const vector new VectorLayer({source: source,});const map new Map({layers: [raster, vector],target: map,view: new View({center: [-11000000, 4600000],zoom: 4,}),});const styles {Point: {circle-radius: 5,circle-fill-color: red,},LineString: {circle-radius: 5,circle-fill-color: red,stroke-color: yellow,stroke-width: 2,},Polygon: {circle-radius: 5,circle-fill-color: red,stroke-color: yellow,stroke-width: 2,fill-color: blue,},Circle: {circle-radius: 5,circle-fill-color: red,stroke-color: blue,stroke-width: 2,fill-color: yellow,},};const typeSelect document.getElementById(type);let draw; function addInteraction() {const value typeSelect.value;if (value ! None) {draw new Draw({source: source,type: typeSelect.value,style: styles[value],});map.addInteraction(draw);}}typeSelect.onchange function () {map.removeInteraction(draw);addInteraction();};addInteraction();},methods: {},
};
/scriptstyle langscss scoped
#map {width: 100%;height: 500px;
}
.box {height: 100%;
}#info {width: 100%;height: 24rem;overflow: scroll;display: flex;align-items: baseline;border: 1px solid black;justify-content: flex-start;
}
/style
