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
  • 背景 在瀏覽器中訪問本地靜態資源html網頁時,可能會遇到跨域問題如圖。 是因為瀏覽器預設啟用了同源策略,即只允許載入與當前網頁具有相同源(協議、功能變數名稱和埠)的內容。 WebView2預設情況下啟用了瀏覽器的同源策略,即只允許載入與主機相同源的內容。所以如果我們把靜態資源發佈到iis或者通過node ...
  • 最近看幾個老項目的SQL條件中使用了1=1,想想自己也曾經這樣寫過,略有感觸,特別拿出來說道說道。編寫SQL語句就像炒菜,每一種調料的使用都會影響菜品的最終味道,每一個SQL條件的加入也會影響查詢的執行效率。那麼 1=1 存在什麼樣的問題呢?為什麼又會使用呢? ...
  • 好久不見,我又回來了。 給大家分享一個我最近使用c#代碼操作ftp伺服器的代碼示例: 1 public abstract class FtpOperation 2 { 3 /// <summary> 4 /// FTP伺服器地址 5 /// </summary> 6 private string f ...
  • 一:背景 1. 講故事 過年喝了不少酒,腦子不靈光了,停了將近一個月沒寫博客,今天就當新年開工寫一篇吧。 去年年初有位朋友找到我,說他們的系統會偶發性崩潰,在網上也發了不少帖子求助,沒找到自己滿意的答案,讓我看看有沒有什麼線索,看樣子這是一個牛皮蘚的問題,既然對方有了dump,那就分析起來吧。 二: ...
  • 自己製作的一個基於Entity Framework Core 的資料庫操作攔截器,可以列印資料庫執行sql,方便開發調試,代碼如下: /// <summary> /// EF Core 的資料庫操作攔截器,用於在資料庫操作過程中進行日誌記錄和監視。 /// </summary> /// <remar ...
  • 本文分享自華為雲社區《Go併發範式 流水線和優雅退出 Pipeline 與 Cancellation》,作者:張儉。 介紹 Go 的併發原語可以輕鬆構建流數據管道,從而高效利用 I/O 和多個 CPU。 本文展示了此類pipelines的示例,強調了操作失敗時出現的細微之處,並介紹了乾凈地處理失敗的 ...
  • 在上篇文章中,我們介紹到在多線程環境下,如果編程不當,可能會出現程式運行結果混亂的問題。出現這個原因主要是,JMM 中主記憶體和線程工作記憶體的數據不一致,以及多個線程執行時無序,共同導致的結果。 ...
  • 1、下載安裝包首先、進入官網下載安裝包網址:https://www.python.org/downloads/windows/下載步驟:進入下載地址,根據自己的電腦系統選擇相應的python版本 選擇適配64位操作系統的版本(查看自己的電腦操作系統版本), 點擊下載安裝包 也可以下載我百度雲分享的安 ...
  • 簡介 git-commit-id-maven-plugin 是一個maven 插件,用來在打包的時候將git-commit 信息打進jar中。 這樣做的好處是可以將發佈的某版本和對應的代碼關聯起來,方便查閱和線上項目的維護。至於它的作用,用官方說法,這個功能對於大型分散式項目來說是無價的。 功能 你 ...
  • 序言 在數字時代,圖像生成技術正日益成為人工智慧領域的熱點。 本討論將重點聚焦於兩個備受矚目的模型:DALL-E和其他主流AI繪圖方法。 我們將探討它們的優勢、局限性以及未來的發展方向。通過比較分析,我們期望能夠更全面地瞭解這些技術,為未來的研究和應用提供啟示。 Q: 介紹一下 dall-e Ope ...