本站消息
在react中引入openlayer地图服务
发布于2021-03-13 19:00 阅读(1556) 评论(0) 点赞(13) 收藏(3)
安装依赖：$ npm install ol --save
//openlayers包已经被弃用，目前官方推荐维护为ol包
- import React from 'react';
-
- //地图服务所用到的依赖引用
-
- import Map from 'ol/Map';
-
- import View from 'ol/View';（或者import {Map, View} from 'ol';）
-
- import TileLayer from 'ol/layer/Tile';
-
- import XYZ from 'ol/source/XYZ';
-
- import { transform } from 'ol/proj';
-
- import 'ol/ol.css'; //引入css样式才能起作用，比如tooltips等样式
-
- import './map.scss'
-
-
-
- export class MapBoat extends React.Component {
-
- // constructor (props) {
-
- // super(props);
-
- // }
-
- componentDidMount () {
-
- //初始化地图new Map()所挂载节点对象是根据target属性的值匹配页面节点中的id属性
-
- //id为'map'节点需要等待页面节点渲染出来之后在进行地图实例化，所以放在componentDidMount中
-
- //target/layers/view是地图最基础的3个属性
-
- this.map = new Map({
-
- target: 'map',
-
- layers: [
-
- new TileLayer({
-
- source: new XYZ({
-
- url: 'http://192.168.3.33:7001/test/{z}/{x}/{y}.png' //瓦片的地址，如果是自己搭建的地图服务
-
- })
-
- })
-
- ],
-
- view: new View({
-
- center: transform([118.5144, 31.6807], 'EPSG:4326', 'EPSG:3857'),
-
- zoom: 10
-
- })
-
- });
-
- }
-
- render () {
-
- return (
-
- <div id="map" className="map"></div>
-
- )
-
- }
-
- }
原文链接:https://blog.csdn.net/m0_37815935/article/details/114700495
所属网站分类: 技术文章 > 博客
作者：西门费雪
链接：http://www.qianduanheidong.com/blog/article/35684/33605478ec31cc573edf/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
13
0
收藏该文
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力
程序员的那些事(new)
电子书(new)
博客(new)
视频教程(new)
问答(new)
游戏(new)