openlayers系列之根据一个坐标为中心绘制正方形 2023-03-28 约 855 字 预计阅读 2 分钟 需求 最近有个需求,就是要根据实时坐标点进行正方形打点。那就简单的实现下。 按需引入 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系列之信息窗体 2023-03-28 约 847 字 预计阅读 2 分钟 需求 一般再绘制点,或者面的时候。会有点击弹窗的需求。 按需引入 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系列之获取多边形中心点 2023-03-27 约 1349 字 预计阅读 3 分钟 前言 再上篇文章[openlayers系列之绘制多边形]中,绘制的 图形没有居中显示,所以要借助openlayers的extent工具进行获取多 阅读更多
openlayers系列之绘制多边形 2023-03-27 约 1758 字 预计阅读 4 分钟 按需引入依赖 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系列之绘制线 2023-03-27 约 785 字 预计阅读 2 分钟 前言 记上一篇文章[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系列之绘制标记 2023-03-22 约 527 字 预计阅读 2 分钟 前言 记上一篇文章[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引入 2023-03-22 约 360 字 预计阅读 1 分钟 前提配置 假设你已经初始化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} 阅读更多