openlayers系列之根据一个坐标为中心绘制正方形

需求 最近有个需求,就是要根据实时坐标点进行正方形打点。那就简单的实现下。 按需引入 1 2 3 4 5 6 7 8 9 10 import Map from 'ol/Map'; import View from 'ol/View'; import XYZ from 'ol/source/XYZ'; import { Tile as TileLayer } from 'ol/layer';

openlayers系列之信息窗体

需求 一般再绘制点,或者面的时候。会有点击弹窗的需求。 按需引入 1 2 3 4 5 6 7 8 9 10 import Map from 'ol/Map'; import View from 'ol/View'; import XYZ from 'ol/source/XYZ'; import { Tile as TileLayer } from 'ol/layer'; import { fromLonLat, transform } from "ol/proj"; import { Point

openlayers系列之绘制多边形

按需引入依赖 1 2 3 4 5 6 7 8 9 10 import Map from 'ol/Map'; import View from 'ol/View'; import XYZ from 'ol/source/XYZ'; import { Tile as TileLayer } from 'ol/layer'; import { fromLonLat, transform } from "ol/proj"; import { Polygon} from "ol/geom"; import { Feature } from "ol"; import { Style, Icon ,Stroke} from "ol/style"; import VectorLayer from "ol/layer/Vector"; import { Vector as VectorSource

openlayers系列之绘制线

前言 记上一篇文章[openlayers系列之绘制标记] 按需引入依赖 1 2 import { Point,LineString } from "ol/geom"; import { Style, Icon ,Stroke} from "ol/style"; 创建线 需要对应线的数据 1 let lineData = [[113.56762000, 34.82407000], [113.56763000, 34.82408000], [113.56764000, 34.82409000], [113.56765000,

Openlayers系列之绘制标记

前言 记上一篇文章[openlayers系列之vue引入] 按需引入依赖 1 2 3 4 5 import { Point } from "ol/geom"; import { Feature } from "ol"; import { Style,Icon} from "ol/style"; import VectorLayer from "ol/layer/Vector"; import { Vector as VectorSource } from "ol/source"; 创建

openlayers系列之vue引入

前提配置 假设你已经初始化vue项目 1 npm install ol 创建容器,记得设置宽高 1 <div id="map"></div> 按需引入openlayers 1 2 3 4 5 import Map from'ol/Map'; import View from 'ol/View'; import XYZ from 'ol/source/XYZ'; import { Tile as TileLayer}