react项目中使用esri-loader加载天地图

1.在项目中安装esri-loader

npm install esri-loader
// or
yarn add esri-loader

2.加载代码如下：

代码是基于react hook编写：

import React, { useEffect, useRef } from 'react';
import { loadModules } from 'esri-loader'const LoadMap = props => {//这个代码我封装成公用组件了，因此从父组件传来样式、变量等信息const { style, mapObj, setMapObj } = props;const mapRef = useRef();useEffect(() => {//options 可以定义自己本地服务器部署的api//如果没有，就使用官方自己的，就是加载比较慢//const options = {//    url:'',//    css:''//};loadModules(['esri/Map',"esri/views/MapView","esri/layers/WebTileLayer","esri/layers/support/TileInfo","dojo/domReady!"], { css: true }).then(([Map,MapView,WebTileLayer, TileInfo]) => {const tileInfo = new TileInfo({rows: 256,cols: 256,compressionQuality: 0,//压缩像素值origin: {x: -180,y: 90},spatialReference: {wkid: 4326},lods: [//定义平铺方案的细节级别数组{ level: 2, levelValue: 2, resolution: 0.3515625, scale: 147748796.52937502 },{ level: 3, levelValue: 3, resolution: 0.17578125, scale: 73874398.264687508 },{ level: 4, levelValue: 4, resolution: 0.087890625, scale: 36937199.132343754 },{ level: 5, levelValue: 5, resolution: 0.0439453125, scale: 18468599.566171877 },{ level: 6, levelValue: 6, resolution: 0.02197265625, scale: 9234299.7830859385 },{ level: 7, levelValue: 7, resolution: 0.010986328125, scale: 4617149.8915429693 },{ level: 8, levelValue: 8, resolution: 0.0054931640625, scale: 2308574.9457714846 },{ level: 9, levelValue: 9, resolution: 0.00274658203125, scale: 1154287.4728857423 },{ level: 10, levelValue: 10, resolution: 0.001373291015625, scale: 577143.73644287116 },{ level: 11, levelValue: 11, resolution: 0.0006866455078125, scale: 288571.86822143558 },{ level: 12, levelValue: 12, resolution: 0.00034332275390625, scale: 144285.93411071779 },{ level: 13, levelValue: 13, resolution: 0.000171661376953125, scale: 72142.967055358895 },{ level: 14, levelValue: 14, resolution: 8.58306884765625e-005, scale: 36071.483527679447 },{ level: 15, levelValue: 15, resolution: 4.291534423828125e-005, scale: 18035.741763839724 },{ level: 16, levelValue: 16, resolution: 2.1457672119140625e-005, scale: 9017.8708819198619 },{ level: 17, levelValue: 17, resolution: 1.0728836059570313e-005, scale: 4508.9354409599309 },{ level: 18, levelValue: 18, resolution: 5.3644180297851563e-006, scale: 2254.4677204799655 },{ level: 19, levelValue: 19, resolution: 2.68220901489257815e-006, scale: 1127.23386023998275 },{ level: 20, levelValue: 20, resolution: 1.341104507446289075e-006, scale: 563.616930119991375 }]})//加载天地图的矢量地图const tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.com/DataServer?T=vec_c&x={col}&y={row}&l={level}&tk=134e6b671b2b1f64c383628fbe12b4d1", {subDomains: ['t0'],tileInfo: tileInfo,spatialReference: { // 这里当时踩了一个坑：没有设置坐标系，一直报坐标系不匹配的错误wkid: 4326},});//加载天地图的标记地图const tiledLayerLabel = new WebTileLayer("http://{subDomain}.tianditu.com/DataServer?T=cia_w&x={col}&y={row}&l={level}&tk=134e6b671b2b1f64c383628fbe12b4d1", {subDomains: ['t0'],tileInfo: tileInfo,spatialReference: {wkid: 4326},});const map = new Map({basemap: {baseLayers: [tiledLayer, tiledLayerLabel]},});const view = new MapView({container: mapRef.current,map: map,scale: 20000000,center: [120, 35]});setMapObj({map,view})}).catch(err => {console.error('地图初始化失败', err);});}, [])return <div style={style} ref={mapRef} />;
};
export default LoadMap;

react项目中使用esri-loader加载天地图相关推荐

java web配置dll文件_JavaWeb项目中dll文件动态加载方法解析（详细步骤）
相信很多做Java的朋友都有过用Java调用JNI实现调用C或C++方法的经历,那么Java Web中又如何实现DLL/SO文件的动态加载方法呢.今天就给大家带来一篇JAVA Web项目中DLL/SO ...
快速搭建react项目骨架（按需加载、redux、axios、项目级目录等等）
一.前言最近整理了一下项目骨架,顺便自定义了一个脚手架,方便日后使用.我会从头开始,步骤一步步写明白,如果还有不清楚的可以评论区留言.先大致介绍一下这个骨架,我们采用 create-react-ap ...
vue 项目中使用v-loading实现加载效果
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中在el-table标签中添加v-load ...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
React开发（252）:react项目理解 ant design spining加载中
Android中使用x5内核加载网页的实现
前言联系方式背景 SDK下载 SDK集成使用代码实现前言由于是使用的腾讯浏览服务,所以这里大部分介绍的是官网的一些东西,不过自己会做一些复杂使用部分的实现,不至于像官网上介绍的笼统. 联系 ...
arcgis加载天地图_【arcgis地图实战】之天地图在线服务加载
经常用arcgis的童鞋都知道,元数据是基础也是数据分析的根本.而在线地图能够快速的显示数据所在的位置,是数据校验不可多得的工具.arcgis地图实战系列教程将就各种在线地图进行介绍和分享. 在线地图 ...
webpack中loader加载器(打包非js模块)
通过loader打包非js模块我这儿用VScode为编辑器在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结尾的模块,webpack 默认处理不了, ...
“在解决方案中的一个或多个项目由于以下原因未能加载项目文件或网站已移动或重新命名，或者不在您的计算机上” 的解决办法...
用Visual studio.NET 2003/2005/2008在打开从网上下载的解决方案或从其他地方考来的解决方案时,往往会碰到一个这样的错误,提示说: "在解决方案中的一个或多个项目由 ...

react项目中使用esri-loader加载天地图

react项目中使用esri-loader加载天地图相关推荐

最新文章

热门文章