preamble
There is too little information about GeoScene and GeoScene API for JavaScript on the Internet, and the official technical support is too slow, so I recently shared the potholes I stepped on in my project;
**Version Information**
GeoScene Pro 4.0
GeoScene Enterprise 3.1
GeoScene API for JavaScript 4.27.4
I. Creating Network Analysis Layers
1. New elemental datasets in the geodatabase
Right-click Geodatabase -> New -> Element Dataset -> Enter Element Dataset Name, Coordinate System -> Create
2. Importing road network element categories
Right click on element dataset -> Import -> Element class -> Select road network shp file -> Import
You can check the map with the imported element class loaded for problems
3. Creating network datasets
Right-click on the element dataset -> New -> Network dataset -> Fill in the name, check the element class (here the high-level model did not play to understand, do their own research) -> Run
Then two are added to the element dataset (one for the network dataset and one for the intersection), and the network dataset is also loaded into the map
4. Setting up the network dataset and constructing
Right-click on the network dataset you just created -> General -> Service Area Index -> Source Settings -> Group Connectivity -> Change the policy to any node (the default is endpoints, but my road network isn't very standardized, which leads to a little bit of a problem with the results of the analysis, so I'll change it to this); save after modification
Right-click on the network dataset -> select Build -> Run and wait for the run to finish
Analyze -> Network Analysis -> Paths, which generates a group of route/path layers, the
II. Desktop test network analysis services
Select Route/Path Layers group -> Path Layers -> Create Elements -> Create elements such as stops, point barriers, line barriers, etc.
Here I have created three stops and an obstacle line, and after creating them click on Run to analyze the route
III. Publishing services
Layer group renaming (geoscene pro generates layer group names by default in Chinese and there is a slash, there will be problems later in the use of the process, so we need to manually modify)
Select Share -> Fill in the name, summary, label -> If your data source is registered to the server, the data and layer type can be selected to quote, map services; I here because it is a file database, did not register, so I chose to copy -> Be sure to switch to the configuration page to check the web analytics -> and then click on the analyze, publish, and wait for the publication is complete!
Remember to connect to the portal and log in ahead of time before publishing the service, and then set the portal as the active portal
You will be able to see it in the portal once it has been published successfully
Fourth, JS call
I'll just post the code for this one. The logic is simple.
<!--
* @Author: xuhanchi
* @Date: 2024-06-18 11:01:14
* @LastEditors: TanXJ
* @LastEditTime: 2024-08-02 16:59:41
* @Description: Shortest path analysis
-->
<template>
<div ></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()
})
// Initialization Scene
const initView = () => {
view = new SceneView({
map: new Map(),
container: "viewDiv",
camera: {
position: {
x: 114.356454,
y: 30.546360,
z: 40000
}
}
})
// GoogleImage Map
const googleLayer = new WebTileLayer({
urlTemplate: "/vt/lyrs=s&x={x}&y={y}&z={z}",
subDomains: ["mt0", "mt1", "mt2", "mt3"]
})
(googleLayer)
// Load Road Network Layer
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"
}
}
})
(featureLayer)
// Shortest path analysis
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 } })
])
})
// creation point、writing style
((element, key) => {
const pointGraphic = new Graphic({
geometry: ,
symbol: {
type: 'simple-marker',
style: 'circle',
color: 'red',
size: '20px'
}
})
(pointGraphic)
const textGraphic = new Graphic({
geometry: ,
symbol: {
type: 'text',
color: "white",
text: key
}
})
(textGraphic)
});
// Analyze the path
("/server/rest/services/roads_analyze/NAServer/testroad", routeParams).then((routeSolveResult) => {
let geometry = [0].
var pathGraphic = new Graphic({
geometry: geometry,
symbol: {
type: 'simple-line',
color: 'red',
width: '4px',
style: 'solid'
}
})
(pathGraphic)
})
}
</script>
<style lang="scss" scoped>
#viewDiv {
width: 100%;
height: 100%;
}
</style>
Finalizing the effect: