地图相关知识

原创 已于 2026-06-12 11:25:48 修改 · 509 阅读 · 7 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
标签
#arcgis
于 2024-01-25 16:09:39 首次发布

🐄 获取三维视角

JSON.stringify({
      destination: gismap.util.viewer.camera.position,
      orientation: {
        direction: gismap.util.viewer.camera.direction,
        up: gismap.util.viewer.camera.up,
        heading: gismap.util.viewer.camera.heading,
        pitch: gismap.util.viewer.camera.pitch,
        roll: gismap.util.viewer.camera.roll,
      }
    })

🐄 打开工具栏

 // 打开工具栏
   emitter.emit("activeTool", name);

🐄 切换实景图

// 不要用  
mapUtil.changeMapType("2d" || "3d" );  这个不是很靠谱，深度监听不会打开。
// 建议使用
  window.$changeBaseMap("实景图", "一级图 ( 地形级 )");

🐄 查看图层相关信息并叠加图层

  // 叠加图层
      window.postMessage(
        {
          key: "$CesiumLayersManager",
          func: "addLayersById",
          params: [
            catologId,
            false,
            [
              {
                serviceId: serviceId,
               	layers: ["0.0", "0.1"],,
                layerDefs: [],
              },
            ],
          ],
        },
        "*"
      );

1.查看图层的目录id
在这里插入图片描述
2.查看图层的serviceid
在这里插入图片描述
3.查看图层的图层号
在这里插入图片描述

在这里插入图片描述

🐄 直接永CesiumLayersManager实例 清空所有图层

 // 清空所有图层
      $CesiumLayersManager.getInstance().removeALLLayers();

🐄 叠加图层带图层过滤参数


        // 清空所有图层
        window.postMessage(
          {
            key: "$CesiumLayersManager",
            func: "removeALLLayers",
            params: [],
          },
          "*"
        );
        const catologId = row.layer;
        console.log(catologId, "catologId");
        // 叠图
        window.postMessage(
          {
            key: "$CesiumLayersManager",
            func: "addLayersById",
            params: [
              catologId.id,
              ,
              false,
              [
                {
                  serviceId: catologId.serviceId,
                  layers: [...catologId.layers],
                  layerDefs: [...catologId.layerDefs],
                },
              ],
            ],
          },
          "*"
        );

🐄 先叠加图层再图层过滤

   // 1.先叠加图层
        const layers = mapUtil.util.loadedLayers.items;
        const isExist = layers.find((layer) => layer.id === row.layer.id);
        if (!isExist) {
          // 叠加图层
          const catologId = row.layer;
          $CesiumLayersManager
            .getInstance()
            .addLayersById(catologId.id)
            .then(() => {
              // 再过滤
              filterLayerByExpression(row);
            });
        } else {
          filterLayerByExpression(row);
        }

  function filterLayerByExpression(row) {
      mapUtil.util.filterLayerByExpression([
        {
          catalogId: row.layer.id,
          services: [
            {
              serviceId: row.layer.serviceId,
              layers: row.layer.layerDefs,
            },
          ],
        },
      ]);
    }

🐄 叠加图层带token

mapUtil.util.loadLayers(catalog, { headers: { Authorization: getToken() } })

🐄 postMessage叠加图层和支持自定义地图方法

// 叠加图层-单个
window.postMessage(
  {
    key: '$CesiumLayersManager',
    func: 'addLayersById',
    params: ['dd9e1810-e4ca-493d-b900-22e119e7b2c4']
  },
  '*'
)

// 叠加图层-多个
window.postMessage(
  {
    key: '$CesiumLayersManager',
    func: 'addLayersByIds',
    params: [['dd9e1810-e4ca-493d-b900-22e119e7b2c4', 'ece4bb1c-ce54-434d-80a7-e843c9e0ec59']]
  },
  '*'
)
// 清空-单个
window.postMessage(
  {
    key: '$CesiumLayersManager',
    func: 'removeLayersById',
    params: ['dd9e1810-e4ca-493d-b900-22e119e7b2c4']
  },
  '*'
)

// 清空-多个
window.postMessage(
  {
    key: '$CesiumLayersManager',
    func: 'removeLayersByIds',
    params: [['dd9e1810-e4ca-493d-b900-22e119e7b2c4', 'ece4bb1c-ce54-434d-80a7-e843c9e0ec59']]
  },
  '*'
)

// 清空全部图层
window.postMessage({ key: '$CesiumLayersManager', func: 'removeALLLayers', params: [] }, '*')

// 设置视角
window.postMessage(
  {
    key: 'customFunction',
    func: `({mapUtil}) => {
        mapUtil.util.setMapExtent([
            102.68151997958313,
            27.58566306727317,
            112.71940162447768,
            32.77320893297453
        ])
    }`
  },
  '*'
)

🐄 区县定位


// 根据areaCode定位
  const locateByAreaCode = async (
    areaCode: string,
    withMaskLayer: boolean = false,
    locateOption?: ILocate
  ) => {
    if (areaCode === '500112') {
      // 渝北区范围
      await locate({
        url: window.$config.regionLayerUrl,
        where: 'QXMC=\'渝北区\'',
        clear: false
      }).then((features) => {
        withMaskLayer && addMaskLayer(features)
      })
      return
    }
    let url = window.$config.areaLayerUrl + '/8'
    let where = `行政区代码_X='${areaCode}'`
    if (areaCode === '500141' || areaCode === '500157') { // 两江新区新老code
      url = 'http://23.36.250.69/datamanager/service/7f700737-e168-419c-a142-af17aa168a1e/a130f037-da1f-48d4-8ec8-9a3714dd9600/f4255a31-0bf7-43d8-9931-0b1172b447f8/MapServer/3'
      where = ''
    }
    const features = await locate({ url, where, ...locateOption })

    if (features && withMaskLayer) {
   
      addMaskLayer(features)
    
    }
  }

import useLocate from '@/hooks/useLocate'
const { locateByAreaCode } = useLocate()
locateByAreaCode(area.areaid, false, { highlight: true })

🐄 设置视角

  // 设置视角
  mapUtil.util.setMapExtent()
  //或者固定视角
  mapUtil.util.setMapExtent([
    100.36988168663606, 26.871804812178127, 115.18586671620167, 34.164047443917454
  ])

🐄 清空高亮

 mapUtil.util.clearHighlight()

🐄 获取叠加的图层

mapUtil.util.loadedLayers

🐄 地图类型枚举，叠加图层

getShareUrl(item, appId) {
      const baseURL = 'api/shData'
      let url = ''
      if (item) {
        const type = item.dataShareType
        const type2 = item.resourcetype
        const id = item.id
        const serviceType = item.serviceType
        const fileid = item.fileid

        if (type === 'service') {
          if (serviceType === 'FeatureServer') {
            url = `${baseURL}/share/service/${appId}/${id}/FeatureServer?f=json`
          } else if (serviceType === 'ImageServer') {
            url = `${baseURL}/share/service/${appId}/${id}/ImageServer?f=json`
          } else if (serviceType === 'ArcGISTileService') {
            url = `${baseURL}/share/service/${appId}/${id}/MapServer?f=json`
          } else if (serviceType === 'VectorTileServer') {
            url = `${baseURL}/share/service/${appId}/${id}/VectorTileServer?f=json`
          } else if (serviceType === 'OGCWMTS') {
            url = `${baseURL}/share/service/${appId}/${id}/wmts`
          } else if (serviceType === 'OGCWMS') {
            url = `${baseURL}/share/service/${appId}/${id}/wms`
          } else if (serviceType === 'OGCWFS') {
            url = `${baseURL}/${id}/wfs?request=GetCapabilities&service=WFS`
          } else if (serviceType === 'webservice') {
            url = `${baseURL}/share/service/${appId}/${id}/webservice`
          } else if (serviceType === 'SceneServer') {
            // SceneServer
            url = `${baseURL}/share/service/${appId}/rest/services/Hosted/${id}/SceneServer`
          } else if (serviceType === 'PointCloudLayer') {
            // PointCloudLayer
            url = `${baseURL}/share/service/${appId}/rest/services/Hosted/${id}/SceneServer`
          } else if (serviceType === 'IntegratedMeshLayer') {
            // IntegratedMeshLayer
            url = `${baseURL}/share/service/${appId}/rest/services/Hosted/${id}/SceneServer`
          } else if (serviceType === 'BuildingSceneLayer') {
            // BuildingSceneLayer
            url = `${baseURL}/share/service/${appId}/rest/services/Hosted/${id}/SceneServer`
          } else {
            url = `${baseURL}/share/service/${appId}/${id}/MapServer?f=json`
          }
          if (type2 === 'database') {
            url = `${baseURL}/share/service/${appId}/db/${id}`
          }
        } else if (type === 'file') {
          if (fileid) {
            // url = `${imageBaseUrl}${fileid}`
            url = ``
          }
          url = `${baseURL}/share/service/${appId}/file/${id}`
        }
      }
      if (url.indexOf('http') < 0) {
        url = `${location.origin}/${url}`
        // url = `http://23.36.250.116:8044/${url}`
      }
      return url
    },

🐄 打开3d或者2d

mapUtil.changeMapType("3d");
mapUtil.changeMapType("2d");

🐄 图层定位中心点

 setTimeout(() => {
        mapUtil.util.zoomToLayerExtent("ffd28871-16f9-4df5-acd9-1f86862e9e59");
      }, 1000);

🐄 arcgis毛总最新地图底座获取视角

1拖动位置，打开控制台
2.mapUtil.util.getMapExtent()
3.复制object

🐄 arcgis取地图的定位坐标

1拖动位置，打开控制台
2. 输入命令 map.regionLayer.view.extent
3.复制object
:::details
:::

🐄 cesuim 地图视角位置

(1) 地图选好视角后，打开浏览器， 在浏览器控制台运行回车
(2) 获取那个视角脚本代码

{position :$viewer.camera.position,up:$viewer.camera.up,heading:$viewer.camera.heading,pitch:$viewer.camera.pitch,roll:$viewer.camera.roll,direction:$viewer.camera.direction}

(3) 获取到数据 定义变量

const camera = {
    "position": {
        "x": -1585101.2595351234,
        "y": 5320992.392833537,
        "z": 3130477.613761266
    },
    "up": {
        "x": -0.1643710147599397,
        "y": 0.9677301027921298,
        "z": 0.19099899909874302
    },
    "heading": 3.50224042963928,
    "pitch": -0.3432502762666627,
    "roll": 6.283177516957298,
    "direction": {
        "x": 0.27784807743680634,
        "y": 0.23121586737611863,
        "z": -0.9323838632978263
    }
}
// 视角定位
viewer.camera.flyTo(
    {
      destination: new Cartesian3(...camera.position),
      orientation: {
        direction: new Cartesian3(...camera.direction),
        up: new Cartesian3(...camera.up),
        heading: camera.heading,
        pitch: camera.pitch,
        roll: camera.roll,
      }
    }
  )

🐄 页面编辑器 加载蒙版

function() {
    planMap.mapComponents[0].view.zoom = 7
    setTimeout(() => {
        try {
            window.planMap.addEsriLayerToMap(planMap.createEsriLayer(planMap.getLayerObjByCatalogIdAndLayerId('95a13841-b21e-4d75-8db3-8ac89a35a59d', 'bcdcd7d9-2b50-450e-9752-f8cc09f6d581')[0]))
            window.planMap.addEsriLayerToMap(planMap.createEsriLayer(planMap.getLayerObjByCatalogIdAndLayerId('95a13841-b21e-4d75-8db3-8ac89a35a59d', '388df312-d559-44d6-92c1-304f724a9248')[0]))
            const resource = window.planMap.serviceStore.query({ id: '6f2b0169-3512-4931-aa2c-7f3c325ceb54' })[0]
            resource.checked = true
            window.planMap.setLayerSwitch(true, resource)
        } catch (e) { console.error(e) }

        try {
            const userInfo = JSON.parse(localStorage.userInfo)
            const org = userInfo.orgFullName.split('-')
            // planMap.locateByAreaname(org[1], true)
            mengban(org[1])

        } catch (e) { console.error(e) }
    }, 500)
    console.log('test123')
    // 区县定位和蒙版
    function mengban(name) {
        // const url = 'http://23.36.123.160:10000/multApp/datamanager/service/ad1feab5-2cde-4885-95ea-670725591bee/cfd30e93-ece5-48c1-aacf-509ee2a3dc29/33d8f0c2-5e4c-41cb-9742-4b25cb994446/MapServer/0'
        const url = 'http://10.10.6.211/cqgtorg_xxzxadmin_site04/rest/services/%E5%B9%B3%E5%8F%B0/syfztc/FeatureServer/8'
        const mapComponent = planMap.mapComponents[0]
        planMap.createEsriQueryTask(url, {
            where: `管理区名称 like '%${name}%'`,
            returnGeometry: true
        }).then(({ features }) => {
            if (!features.length) return
            // 区县定位
            planMap.mapComponents[0].view.goTo(features)
            const maskLayer = new window.Esri.GraphicsLayer({
                id: `mask-layer`,
                listMode: 'hide',
                title: '蒙版图层'
            })

            mapComponent.map.add(maskLayer)
            const extent = new window.Esri.Polygon({
                spatialReference:
                    mapComponent.view.spatialReference,
                rings: [
                    [
                        [-180, -90],
                        [180, -90],
                        [180, 90],
                        [-180, 90]
                    ]
                ]
            })
            const geos = features.map((item) => item.geometry)
            const geo =
                geos.length > 1 ? window.Esri.geometryEngine.union(geos) : geos[0]

            if (geo) {
                //高亮定位
                planMap.highlightByGeometrys([geo], true, true)
                const geometry = window.Esri.geometryEngine.difference(extent, geo)
                const gra = new window.Esri.Graphic({
                    geometry: geometry,
                    symbol: {
                        type: 'simple-fill',
                        color: '#0b1b49',
                        outline: {
                            color: '#0b1b49'
                        }
                    }
                })
                maskLayer.graphics.add(gra)
            }
        })

        mapComponent.map.layers.on('after-add', e => {
            const maskLayer = mapComponent.map.findLayerById(`mask-layer`)
            if (maskLayer && e.item && e.item.id !== `mask-layer`) {
                // 计算排序号
                let order = mapComponent.map.layers.items.length - 1
                // 如果包含标记图层  则再减1
                if (mapComponent.map.layers.items.filter(ly => ly.id.indexOf('markerLayer_') !== -1).length > 0) {
                    order = order - 1
                }
                mapComponent.map.layers.reorder(maskLayer, order)
            }
        })
    }
}
apollo学习之---高精地图相关知识学习
qq_41593516的博客
12-19 509
文章目录参考文章 参考文章 添加链接描述
地图学相关知识（四）
CheryW的博客
09-01 1万+
地图学相关知识（四）
cesium获取当前视角参数
zxl9669的博客
05-24 1436
获取当前屏幕中心的经纬度坐标、笛卡尔坐标、heading、pitch、roll参数。
地图学相关知识（一）
CheryW的博客
07-06 3391
地图学相关知识
地图相关知识点
xianghuibeijing的专栏
11-21 903
LLocationManager * locationManager = [[CLLocationManageralloc]init]; //初始化位置管理器     [locationManagersetDesiredAccuracy:kCLLocationAccuracyBest];   //设置精度 externconstCLLocationAccuracy kCLLoc
地图学相关知识（三）
热门推荐
CheryW的博客
08-17 1万+
地图学相关知识（三）
有关百度地图的相关知识
xinmenglin的博客
04-15 378
有关百度地图的相关知识 百度地图坐标的链接： 百度坐标拾取坐标系统的链接： http://api.map.baidu.com/lbsapi/getpoint/index.html 百度地图的大致的使用方法：注册百度账号，申请成为百度开发者，获取服务密钥，使用相关服务功能等 1、注册百度账号 在http://lbsyun.baidu.com/apiconsole/key?application=ke...
iOS 地图的相关知识《二》
jq2530469200的博客
07-07 345
地理编码 在处理相关地图的时候，有可能遇到一些问题，比如初次时候的时候，没有弹出地图的提示框，或者没有网络，或者没有显示地图 下面是相关的处理： /*相关的博客http://my.oschina.net/are1OfBlog/blog/420034#OSC_h1_1 1. 要实现地图、导航功能，往往需要先熟悉定位功能，在iOS中通过Core Location框架
地图相关知识-百度地图
Jermmy1207的博客
01-18 1495
1、地图坐标系的分类 国测局坐标、百度坐标、WGS84坐标？ 三种坐标系说明如下： （1）WGS84：表示GPS获取的坐标； （2）GCJ02：是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系； （3）BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中BD09II表示百度经纬度坐标，BD09MC表示百度墨卡托米制坐标。 百度官方说明地址 2、地位方式分类 GPS定位、基站定位和Wi-Fi定位。 （1）GPS定位：根据设备GPS芯片和GPS卫星实现...
地图学相关知识（二）
CheryW的博客
07-07 3771
地图学相关知识
iOS 地图的相关知识《一》
jq2530469200的博客
07-07 536
定位管理器 在处理相关地图的时候，有可能遇到一些问题，比如初次时候的时候，没有弹出地图的提示框，或者没有网络，或者没有显示地图 下面是相关的处理： /*相关的博客http://my.oschina.net/are1OfBlog/blog/420034#OSC_h1_1 1. 要实现地图、导航功能，往往需要先熟悉定位功能，在iOS中通过Core Locatio
IOS 地图相关知识点小记
YuTaojava的专栏
12-05 679
从事iOS开发快半年咯总感觉自己没有进步多少.遇到原来做过的东西在做起来还是觉得陌生.反省一下还是觉得自己应该把做过的东西总结一下. 这两天整一个地图导航的东西.把里面的相关知识点做一个总结    CLLocationManager * locationManager = [[CLLocationManageralloc]init]; //初始化位置管理器     [lo
IOS 地图相关知识点
hengshujiyi的专栏
06-21 1621
天渊不微博 iOS 6.1正式版可能在下周发布 据idownloadblog网站报道，可靠消息人士称iOS 6.1的第五个测试版，也就是GM版将很快发布。消息称目前iOS 6.1 GM正在内部测试之中，如果没有大问题，开发者将很快能下载。消息人士称iOS 6.1 GM版最早今天，最晚下周一就会开放下载。 苹果在11月初向开发者发布了iOS 6.1第一个
iOS 地图的相关知识《三》
jq2530469200的博客
07-07 320
MKMapView与大头针 相关的注意点在前面两篇博客中已经强调，这里就不做过多的陈述了 如果在地图大头针的时候 没有定位到当前的位置，很有可能是没有在plist 文件里面去设置 NSLocationAlwaysUsageDescription 、NSLocationWhenInUseUsageDescription 属性 导入头文件 #import   //地图
实现地图输出的相关知识
weixin_30681615的博客
04-11 227
shapefile文件：Shapefile文件是描述空间数据的几何和属性特征的非拓扑实体矢量数据结构的一种格式，由ESRI公司开发。 一个Shapefile文件最少包括三个文件： 主文件（*.shp）、--存储地理要素的几何图形的文件。 索引文件（*.shx）、--存储图形要素与属性信息索引的文件。 dBASE表文件（*.dbf），--存储要素信息属性的dBase表文件。 除此之外还有很...
地图相关知识和地图打印色彩差异解决办法
yuanYW7556的博客
09-03 744
这个视频是2020年ArcGIS开发者大会的一个叫叶山的作者关于地图的一篇演讲。他首先介绍了地图的发展历史，比如世界上的第一篇地图和各种材质类型的地图以及历史上的地图媒介有哪些等。其次，对地图的印刷和显示出现的问题进行了阐述，比如地图在设计时可以通过ArcGIS等软件设计，但是在现实工作或学习中，对地图进行打印或者投影时，地图就会出现色差，显示的不是自己想要的那样的结果。为什么会出现这个情况，作者进行了详细的阐释，并且作者也介绍了地图的一些配色模式等，对于如何解决这些问题，作者也提出了一些自己的看法。 此视
高德地图API相关知识（持续更新）
最新发布
weixin_50845028的博客
09-27 1049
作者：sbtiny 链接：https://www.jianshu.com/p/6be42c2cd81a 来源：简书。
地图系统相关知识整理
weixin_34122810的博客
10-25 95
国内常见GPS坐标系
Python数据分析相关的知识地图，深度好图（上）
Python宋宋的专栏
06-08 423
Python数据分析需要的技术栈非常多，今天给大家分享一波和python数据分析有关的知识地图，同学们按图索骥卷起来~1.数据分析步骤图2.数据分析基础知识图3.数据分析技术知识图4.数据分析业务流程图5.数据分析师能力体系图6.数据分析思路体系图7.电商主题数据分析图8.数据科学技能书知识图9.数据挖掘体系图10.python数据分析学习路径图-END-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值