【openlayers框架学习】九:openlayers中的交互类(select和draw)


文章目录

    • openlayers进阶
      • [28 openlayers中的事件](#28 openlayers中的事件)
      • [29 openlayers中select交互类的使用](#29 openlayers中select交互类的使用)
      • [30 openlayers中select常见的配置选项](#30 openlayers中select常见的配置选项)
      • [31 openlayers中绘制交互类(Draw)](#31 openlayers中绘制交互类(Draw))

openlayers进阶

28 openlayers中的事件

html 复制代码
常用进行事件交互的对象:map\view\source

29 openlayers中select交互类的使用

Interaction->Draw

Interaction->Select

js 复制代码
import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Select from 'ol/interaction/Select.js';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
});
//加载矢量地图 将一些矢量数据(很多格式 如GEOJSON)加载到底图上
const vectorSource = new VectorSource({
    url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    //处理对应的矢量数据格式
    format: new GeoJSON(),
});
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        fill: new Fill({
            // color: "red", //填充为红色
            color: "rgba(255,0,0,0.6)", //填充为红色
        }),
        stroke: new Stroke({
            color:"green",
        }),
    }),
});
//加载数据需要发送请求 => 异步 在回调函数中处理数据
// vectorSource.on("change",function(){
//     console.log(this.getFeatures());
// });
//GeoJSON的数据格式 记录的是要素信息的集合 要素信息 包括自定义属性 几何信息(经纬度-形状)
map.addLayer(vectorLayer);
const select = new Select();
map.addInteraction(select);
select.on('select',function(e){
    console.log(e);
    const f = e.selected[0];
    f.setStyle(new Style({
        fill: new Fill({
            color:"rgba(0,255,0,0.6)",
        }),
    }));
});

30 openlayers中select常见的配置选项

main.js

js 复制代码
import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Select from 'ol/interaction/Select.js';
import { pointerMove } from 'ol/events/condition';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
});
//加载矢量地图 将一些矢量数据(很多格式 如GEOJSON)加载到底图上
const vectorSource = new VectorSource({
    url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    //处理对应的矢量数据格式
    format: new GeoJSON(),
});
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        fill: new Fill({
            // color: "red", //填充为红色
            color: "rgba(255,0,0,0.6)", //填充为红色
        }),
        stroke: new Stroke({
            color:"green",
        }),
    }),
});
//加载数据需要发送请求 => 异步 在回调函数中处理数据
// vectorSource.on("change",function(){
//     console.log(this.getFeatures());
// });
//GeoJSON的数据格式 记录的是要素信息的集合 要素信息 包括自定义属性 几何信息(经纬度-形状)
map.addLayer(vectorLayer);
const select = new Select({
    condition:pointerMove,  //鼠标移动时触发,默认是点击时触发
    filter:function(feature, layer){
        return layer === vectorLayer; //过滤图层
    }
});
map.addInteraction(select);
select.on('select',function(e){
    console.log(e);
    const f = e.selected[0];
    f.setStyle(new Style({
        fill: new Fill({
            color:"rgba(0,255,0,0.6)",
        }),
    }));
});

31 openlayers中绘制交互类(Draw)

Interaction->Draw

main.js

js 复制代码
import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Draw from 'ol/interaction/Draw.js';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
});

//加载矢量地图 
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        stroke: new Stroke({
            color:"red",
            width:4,
        }),
    }),
});

const draw = new Draw({
    type:'LineString',
    source: vectorLayer.getSource(),
});

map.addInteraction(draw);
map.addLayer(vectorLayer);
相关推荐
掘金一周2 分钟前
只有 7 KB!前端圈疯传的 Vue3 转场动效神库!效果炸裂! | 掘金一周 8.7
前端·后端·ai编程
YGY_Webgis糕手之路7 分钟前
OpenLayers 综合案例-切片坐标与经纬网调试
前端·gis
白白白鲤鱼10 分钟前
Vue2项目—基于路由守卫实现钉钉小程序动态更新标题
服务器·前端·spring boot·后端·职场和发展·小程序·钉钉
xianxin_24 分钟前
HTML5 地理定位
前端
Running_C31 分钟前
Vue组件化开发:从基础到实践的全面解析
前端·vue.js·面试
Clain32 分钟前
如何搭建一台属于自己的服务器并部署网站,超详细小白教程
linux·运维·前端
胡清波34 分钟前
小程序中使用字体图标的最佳实践
前端
xianxin_35 分钟前
HTML5 客户端存储
前端
南玖i36 分钟前
使用vue缓存机制 缓存整个项目的时候 静态的一些操作也变的很卡,解决办法~超快超简单~
前端·javascript·vue.js
m0_626535201 小时前
贪心算法学习 跳跃游戏
学习·游戏·贪心算法