gis_sss的博客

一.本次react工程的搭建采用umi+dva进行基础工程的搭建，编辑器采用vs code 官方文档：https://umijs.org/zh/guide/create-umi-app.html#%E5%88%9B%E5%BB%BA-umi-%E9%A1%B9%E7%9B%AE1.采用yarn替代npm来进行包的依赖 （1）全局安装yarnnpm...

一、原理地图图层的加载是后加载的图层显示前边加载的图层上边，所以同过这是index可以改变图层显示顺序。openlayers提供了setZIndex来改变地图的图层。二、加载依赖的库文件import React, { Component } from 'react';import Map from '../../component/map/map';import style fr...

一、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol...

一、引入所依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'o...

一、原理地图渲染是通过canvas来渲染出来的，openlayers提供的map.once('postcompose', function (event) {}）函数可以获取canvas对象，将canvas转化成图片下载下来，便可实现。二、引入所依赖的文件import React, { Component } from 'react';import Map from '../../...

一、引入依赖的库文件import React, { Component } from 'react';import Map from '../../component/map/map';// 数据源import { Vector as VectorSource } from 'ol/source';// 图层import { Vector} from 'ol/layer';// ...

一、原理多个图层叠加，在上层图层中能看到下层图层的数据，可以设置图层的透明度，地图图层默认是不透明的二、引入依赖的库文件import React, { Component } from 'react';import Map from '../../component/map/map';import style from './map.css'import TileLayer f...

一、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol...

一、原理（1）首先创建一个要素，如点、线、面（2）根据要素创建一个数据源（3）根据数据数据源创建一个矢量图层（4）将创建的矢量的图层添加到地图上二、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import...

一、引入依赖的文件import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ'...

一、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// 数据源import { Vector as VectorSource } from 'ol/source';// 图层import { Vector} from 'ol/...

一、全部代码// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/sou...

一、引入所依赖的文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';import style from './map.css'二、加载地图组件render() { return ( <div className={...

一、主要方法（1）getResolution（）获取分辨率（2）calculateExtent（）获取当前显示范围（3）getSize获取地图窗口的大小二、引入依赖的库文件import React, { Component } from 'react';import Map from '../../component/map/map';import { Button }...

一:openlayers简介OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。OpenLayers2.2版本以后，OpenLayers已经将所用到的Prototype.js组件整合到了自身当中，并不断在Prototype.js的基础上完善面向对象的开发.是开源二维地图web地图库。二：openlayers和...

一:umi的路由默认是按照约定生成的路由，即在src/page下建立一个文件，然后建立一个index.js页面，如src/page/mian/index.js. umi会自动根据约定的目录生成的路由就是http://localhost:8000/main,但是这样方式的可控性比较差。二：配置式路由（1）在page下面建立一个router.js为页面的总路由，暴露出路由的路径...

一.父组件获取子组件的数据 子组件代码：import Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';import { fromLonLat } from 'ol/proj.js';import ...

1.建立组件文件在component/map/map.js文件，创建一个react有状态组件// import ol from "./ol.css"// react 组件import React, { Component } from 'react';// openlayers 函数import Map from 'ol/Map';import View from 'ol/...

一：引入所需要的文件import React, { Component } from 'react';import Map from '../../component/map/map';import {createStringXY} from 'ol/coordinate.js';import mousePosition from 'ol/control/MousePosition.j...

一、必要文件的引入import React, { Component } from 'react';import Map from '../../component/map/map';import {ScaleLine} from 'ol/control.js';二、地图的渲染render() { return ( <div> {/...

一、引入依赖文件import React, { Component } from 'react';import Map from '../../component/map/map';import {OverviewMap} from 'ol/control.js';import OSM from 'ol/source/OSM';import TileLayer from 'ol/la...

一、引入依赖的文件import React, { Component } from 'react';import Map from '../../component/map/map';import { Checkbox,Radio } from 'antd';import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/sourc...

一、引入必要的文件import React, { Component } from 'react';import Map from '../../component/map/map';import { Button } from 'antd';import { fromLonLat } from 'ol/proj.js';二、加载地图组件和页面按钮的加载 render() ...

一、原理 是在地图的父容器这是一张图片二、引入依赖库import React, { Component } from 'react';import Map from '../../component/map/map';// import bg from '../../assets/yay.jpg'import style from './map.css'三·、加载...

一、引入所依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// 数据源import { Vector as VectorSource } from 'ol/source';// 图层import { Vector } from 'o...