vue+ arcgis for js4.x 地方坐標系地圖服務(Spatial Reference)

来源:https://www.cnblogs.com/vera-7c/archive/2022/11/21/16911260.html
-Advertisement-
Play Games

初始化地圖 引入 import * as esriLoader from 'esri-loader' 主要定義 private mapId: string = '' private map: any private mapview: any private markers: any = {} // ...


初始化地圖

引入

import * as esriLoader from 'esri-loader'

主要定義

private mapId: string = ''
private map: any
private mapview: any
private markers: any = {}	// 所有類型標記點
private gisConstructor: any // gis 構造函數
private graphicsLayer: any // 圖形圖層
private sr: any // 坐標系
private gisModules: any = [
  'esri/Map',
  'esri/layers/TileLayer',	// 切片服務
  'esri/layers/MapImageLayer',	// 動態服務
  'esri/views/MapView',
  'esri/Graphic',	// 圖形標記
  'esri/layers/GraphicsLayer',
  'esri/geometry/Point',
  'esri/geometry/SpatialReference'	// 坐標系定義
]

初始化地圖

esriLoader.loadModules(this.gisModules).then((args: any) => {
  // arcgis方法
  for (let k in args) {
    let name = this.gisModules[k].split('/').pop()
    this.gisConstructor[name] = args[k]
  }
  // 切片服務圖層
  let TileLayer = new this.gisConstructor.TileLayer({
    url: '',
    id: 'TileLayer'
  })
  // 動態服務圖層
  let MapImageLayer = new this.gisConstructor.MapImageLayer({
    url: '',
    id: 'MapImageLayer',
  })
  this.map = new this.gisConstructor.Map({
    // 圖層
    layers: [TileLayer, MapImageLayer]
  })
  // 地方坐標系定義
  let kt = 'PROJCS["GUANGZHOU2000",GEOGCS["GCS_China_Geodetic_Coordinate_System_2000",DATUM["D_China_2000",SPHEROID["CGCS2000",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Gauss_Kruger"],PARAMETER["False_Easting",0.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",113.28],PARAMETER["Scale_Factor",1.0],PARAMETER["Latitude_Of_Origin",0.0],UNIT["Meter",1.0]]'
  this.sr = new this.gisConstructor.SpatialReference({
    wkt: kt
  })
  let pt = new this.gisConstructor.Point({
    x: yourCenterX,
    y: yourCenterY,
    spatialReference: this.sr	// 坐標系
  })
  this.mapview = new this.gisConstructor.MapView({
    map: this.map,
    container: this.mapId,
    zoom: 5,
    spatialReference: this.sr,	// 坐標系
    center: pt
  })
  this.mapview.ui.empty('top-left')
}).then(() => {
  this.createMakers()	// 創建坐標點
})

添加標記點

創建坐標對象

this.markers = JSON.parse(JSON.stringify({}))
// defaultPoints:所有類型點位數組
this.defaultPoints.forEach((item: any) => {
  this.markers[item.placeType] = []
})
this.defaultPoints.forEach((item: any) => {
  let pictureMarkerSymbol = {
    type: 'picture-marker',
    url: item.icon,	// 標記圖形
    width: 24,
    height: 24,
  }
  let point = {
    type: 'point',
    x: Number(item.lat),
    y: Number(item.lon),
    spatialReference: this.sr	// 坐標系
  }
  // 繪畫marker圖形
  const pointGraphic = new this.gisConstructor.Graphic({
    geometry: point,
    symbol: pictureMarkerSymbol,
    // 標記點攜帶數據
    attributes: {
      ...item
    },
  })
  this.markers[item.placeType].push(pointGraphic)
})
if (this.map) {
  this.drawnPoints()	// 繪製
}

圖層添加點

this.graphicsLayer = new this.gisConstructor.GraphicsLayer({
  id: '001',
  title: 'markerLayer',
})
// 將圖形添加到圖層中
for (let k in this.markers) {
  this.graphicsLayer.graphics.addMany(this.markers[k])
}
// 將圖層添加map中
this.map.layers.add(this.graphicsLayer)
// 綁定事件
let that = this
this.mapview.on('click', function (event: any) {
  console.log('event', event)
  that.mapview.hitTest(event.screenPoint).then((responses: any) => {
    if (responses.results.length > 0) {
      // marker graphic的attributes
      const data = responses.results[0].graphic.attributes
      if (data) {
        that.$emit('markerClick', data)	// 自定義事件
      }
    }
  })
})

控制標記點顯示和隱藏

// controlList:控制列表
this.graphicsLayer.graphics.removeAll()
this.controlList.forEach((item: any) => {
  if (this.markers[item.value]) {
    if (item.status) {
      this.graphicsLayer.graphics.addMany(this.markers[item.value])
    }
    // else {
    //   this.graphicsLayer.graphics.removeMany(this.markers[item.value])
    // }
  }
})

文檔參考

坐標系相關:arcpy投影(二)——基準面變換概念及參數、空間參考對象獲取、變換關係獲取方法梳理與解析(Spatial Reference、ListTransformations)

官方文檔:ArcGIS API for JavaScript / API Reference


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 摘要:為了持續打造核心競爭力,英克康健聯合華為雲,基於雲資料庫RDS for PostgreSQL全新打造了一個高性能、大容量、高可用的SaaS醫葯管理系統,助力萬千藥企業務邁上新臺階。 本文分享自華為雲社區《雲時代下,醫葯行業管理居然這麼簡單》,作者:GaussDB 資料庫 。 乘借數字化東風,醫 ...
  • 在mysql中,hint指的是“查詢優化提示”,會提示優化器按照一定的方式來生成執行計划進行優化,讓用戶的sql語句更具靈活性;Hint可基於表的連接順序、方法、訪問路徑、並行度等規則對DML(數據操縱語言,Data Manipulation Language)語句產生作用。 我們在操作表、欄位或索 ...
  • 簡述 SQL Server 是一個值得信賴的老牌資料庫系統,自從 1988 年由 Microsoft、Sybase 和 Ashton-Tate 三家公司共同推出之後就一直不斷迭代更新。而如今我們提到 SQL Server 通常是指 Microsoft 從 SQL Server 2000 之後的版本。 ...
  • 我是風箏,公眾號「古時的風箏」,專註於 Java技術 及周邊生態。 文章會收錄在 JavaNewBee 中,更有 Java 後端知識圖譜,從小白到大牛要走的路都在裡面。 有朋友聊到他們的系統中要接入全文檢索,這讓我想起了很久以前為一個很古老的項目添加搜索功能的事兒。 一提到全文檢索,我們首先就會想到 ...
  • TableView 基礎 本文講講TableView的基本使用. 順便介紹一下delegation. TableView用來做什麼 TableView用來展示一個很長的list. 和Android中的RecyclerView不同, iOS中的TableView只能是豎直方向的list. 如何寫一個最 ...
  • Android網路請求(1) ​ 安卓開髮網絡請求可謂是安卓開發的靈魂,如果你不會網路請求,那麼你開發的應用軟體就是一具沒有靈魂的枯骨。 ​ 在安卓開發中進行網路請求和java中的網路請求有異曲同工之妙,但是安卓軟體畢竟的安裝在我們手機上的,而平常的應用軟體下載後會要求你給與許可權,否則就沒辦法使用, ...
  • 1.繪製Layout文件 首先新建一個layout文件, 命名為title_bar, 在裡面繪製標題欄, 我需要的是一個有返回鍵和當前頁面標題的titleBar 佈局代碼如下 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:andr ...
  • 故障 做開發項目做的好好的,點了下清理工具,Android虛擬機的視窗沒了 回到Device Manager可以看到虛擬機確實還打開著,但就是無法啟動界面 解決 多半是清理的時候清理掉了前臺,找了半天也沒找到再次打開前臺的方法,重新運行程式也可以正常運行,就是不彈出界面。考慮殺掉後臺,讓Emulat ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...