【GeoScene】一、建立、釋出路網服務，並在程式碼中測試最短路徑分析

路遥_13發表於2024-08-02

前言

網上關於GeoScene及GeoScene API for JavaScript的資料太少了，官方的技術支援又太慢了，最近把在專案中踩過的坑分享出來；

**版本資訊**
    GeoScene Pro 4.0
    GeoScene Enterprise 3.1
    GeoScene API for JavaScript 4.27.4

一、建立網路分析圖層

1、在地理資料庫中新建要素資料集

右擊地理資料庫 -> 新建 -> 要素資料集 -> 輸入要素資料集名稱、座標系 -> 建立

image

2、匯入路網要素類

右擊要素資料集 -> 匯入 -> 要素類 -> 選擇路網shp檔案 -> 匯入

image

可以將匯入的要素類載入的地圖中檢查一下，是否存在問題

image

3.建立網路資料集

右擊要素資料集 -> 新建 -> 網路資料集 -> 填寫名稱、勾選要素類（這裡高層模型沒玩明白，自行研究吧） -> 執行

image

然後要素資料集中就會增加兩個（一個是網路資料集、一個是交匯點），網路資料集也會載入到地圖中去

image

4、設定網路資料集並構建

右鍵剛建立的網路資料集 -> 常規 -> 服務區索引-> 源設定 -> 組連通性 -> 策略修改為任意節點（預設是端點，但是我的路網不是很規範，會導致分析出來的結果有點問題，所以我就修改為這樣了）；修改後儲存

image

右擊網路資料集 -> 選擇構建 -> 執行，等待執行結束
image

分析 -> 網路分析 -> 路徑，這樣就會生成一個路線/路徑圖層組，
image

二、桌面端測試網路分析服務

選擇路線/路徑圖層組 -> 路徑圖層 -> 建立要素 -> 建立停靠點、點障礙、線障礙等要素

image

這裡我建立了三個停靠點和一條障礙線，建立完成後點選執行分析路線

image

三、釋出服務

圖層組重新命名（geoscene pro預設生成圖層組的名稱是中文的而且存在斜槓，後面使用過程中會有問題，所以我們需要手動修改）
image

選擇共享 -> 填寫名稱、摘要、標籤 -> 如果你的資料來源註冊到伺服器上了，資料和圖層型別可以選擇引用，地圖服務；我這裡因為是檔案資料庫，沒註冊，所以選擇的複製 -> 一定要切換到配置頁面勾選網路分析 -> 然後點選分析、釋出，等待發布完成

釋出服務之前記得提前連線門戶並登入，然後將門戶設定為活動門戶

image

釋出成功後就可以在門戶中看到
image

四、JS呼叫

這個我直接貼程式碼吧，邏輯很簡單

<!--
 * @Author: xuhanchi
 * @Date: 2024-06-18 11:01:14
 * @LastEditors: TanXJ
 * @LastEditTime: 2024-08-02 16:59:41
 * @Description: 最短路徑分析
-->
<template>
    <div id="viewDiv"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import Map from "@geoscene/core/Map"
import SceneView from "@geoscene/core/views/SceneView"
import WebTileLayer from "@geoscene/core/layers/WebTileLayer"
import FeatureLayer from "@geoscene/core/layers/FeatureLayer"
import Collection from "@geoscene/core/core/Collection"
import Stop from "@geoscene/core/rest/support/Stop"
import * as route from "@geoscene/core/rest/route"
import Graphic from "@geoscene/core/Graphic"
import RouteParameters from "@geoscene/core/rest/support/RouteParameters"

let view = null

onMounted(() => {
    initView()
})

// 初始化場景
const initView = () => {
    view = new SceneView({
        map: new Map(),
        container: "viewDiv",
        camera: {
            position: {
                x: 114.356454,
                y: 30.546360,
                z: 40000
            }
        }
    })
    // Google影像地圖
    const googleLayer = new WebTileLayer({
        urlTemplate: "https://mt3.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
        subDomains: ["mt0", "mt1", "mt2", "mt3"]
    })
    view.map.add(googleLayer)

    // 載入路網圖層
    const featureLayer = new FeatureLayer({
        url: "/server/rest/services/roads_analyze/MapServer/6",
        renderer: {
            type: "simple",
            symbol: {
                type: "simple-line",
                width: 2,
                style: "solid",
                color: "#FFAA00"
            }
        }
    })
    view.map.add(featureLayer)

    // 最短路徑分析
    const routeParams = new RouteParameters({
        stops: new Collection([
            new Stop({ geometry: { x: 114.168312, y: 30.538078 } }),
            new Stop({ geometry: { x: 114.260126, y: 30.558536 } }),
            new Stop({ geometry: { x: 114.250880, y: 30.520646 } }),
            new Stop({ geometry: { x: 114.287516, y: 30.510952 } }),
            new Stop({ geometry: { x: 114.297802, y: 30.421159 } }),
            new Stop({ geometry: { x: 114.396715, y: 30.460172 } }),
            new Stop({ geometry: { x: 114.396303, y: 30.502812 } })
        ])
    })
    // 建立點、文字
    routeParams.stops.items.forEach((element, key) => {
        const pointGraphic = new Graphic({
            geometry: element.geometry,
            symbol: {
                type: 'simple-marker',
                style: 'circle',
                color: 'red',
                size: '20px'
            }
        })
        view.graphics.add(pointGraphic)

        const textGraphic = new Graphic({
            geometry: element.geometry,
            symbol: {
                type: 'text',
                color: "white",
                text: key
            }
        })
        view.graphics.add(textGraphic)
    });
    // 分析路徑
    route.solve("/server/rest/services/roads_analyze/NAServer/testroad", routeParams).then((routeSolveResult) => {
        let geometry = routeSolveResult.routeResults[0].route.geometry
        var pathGraphic = new Graphic({
            geometry: geometry,
            symbol: {
                type: 'simple-line',
                color: 'red',
                width: '4px',
                style: 'solid'
            }
        })
        view.graphics.add(pathGraphic)
    })
}

</script>

<style lang="scss" scoped>
#viewDiv {
    width: 100%;
    height: 100%;
}
</style>

最終實現效果：
image

相關文章