openlayers6绘制点线面圆

最新推荐文章于 2024-10-19 12:16:56 发布

原创

最新推荐文章于 2024-10-19 12:16:56 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #gis

本文介绍了一种基于HTML、JavaScript和ArcGIS的地图绘制工具，该工具允许用户在地图上绘制点、线、面等不同类型的地理要素，并能实时显示绘制的坐标信息。

gis中点线面的绘制是常用功能。一般在交通项目中会用来绘制限行区，公安项目会用来绘制辖区，以及在资源搜索时，会用到点选、圈选、多边形选等。
在这里插入图片描述

1、HTML——用到了iview框架的下拉框组件

<template>
    <div class="box">
        <div class="operation">
            <Dropdown style="margin-left: 15px"  trigger="click" @on-click="typeSelectChange">
                <span>
                    绘制
                    <Icon type="ios-arrow-down"></Icon>
                </span>
                <DropdownMenu slot="list">
                    <DropdownItem name="Point">点</DropdownItem>
                    <DropdownItem name="LineString">线</DropdownItem>
                    <DropdownItem name="Box">矩形</DropdownItem>
                    <DropdownItem name="Polygon">多边形</DropdownItem>
                    <DropdownItem name="Circle">圆</DropdownItem>
                    <DropdownItem name="clear">清除</DropdownItem>
                </DropdownMenu>
            </Dropdown>
        </div>
        <div class="info" ref="infoEl">

        </div>
        <div id="map"></div>
    </div>
</template>

2、JavaScript——底图用的是arcgis蓝色地图；并将绘制的坐标显示在页面；采取的是不连续绘制。

<script>
/* eslint-disable */
import {
   
   Map, View} from 'ol';
import Tile from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import TileGrid from 'ol/tilegrid/TileGrid';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import {
   
   Icon, Style,Stroke,Fill,Circle} from 'ol/style';
import Draw from "ol/interaction/Draw";
import