快速搭建arcgis以及cesium环境 - hellodev - D1h.Net第一号博客
hellodev

快速搭建arcgis以及cesium环境

arcgis

官网示例

 

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>ArcGIS API for JavaScript Hello World App</title>

  <style>

    html, body, #viewDiv {

      padding: 0;

      margin: 0;

      height: 100%;

      width: 100%;

    }

  </style>

 

  <link rel="stylesheet" href="#js.arcgis.com/4.19/esri/css/main.css">

  <script src="https://js.arcgis.com/4.19/"></script>

 

  <script>

    require([

      "esri/Map",

      "esri/views/MapView",

      "esri/Basemap"

    ], function(Map, MapView, Basemap) {

   

      var view = new MapView({

        container: "viewDiv",

        map: new Map,

        center: [-118.71511,34.09042],

        zoom: 11

      });

 

    });

  </script>

</head>

<body>

  <div ></div>

</body>

</html>

离线版:

 

部分参考GIS之家:arcgis api 4.x for js 离线部署,但在如何获取当前地址上做了些更改,直接用localhost是报错的

 

环境:vscode 通过live server插件启动的纯html+js项目

 

下载arcgis api离线包,把离线包放到项目合适的位置

改动两个文件 ./arcgis_js_api/library/4.17/init.js和 ./arcgis_js_api/library/4.17/dojo/dojo.js 中的 HOSTNAME_AND_PATH_TO_JSAPI 为getRootPath()+"/lib/arcgis_js_api/library/4.17/dojo"

其中getRootPath()方法为

function getRootPath() {

 var path = window.document.location.href //取得当前URL

 var pathName = window.document.location.pathname //取得主机地址后的目录

 var post = path.indexOf(pathName)

 var hostPath = path.substring(0, post) //取得主机地址

 var name = pathName.substring(0, pathName.substr(1).indexOf("/") + 1) //取得项目名

 return hostPath + name 

}

var rootPath = getRootPath() //http://127.0.0.1:5500/file

*附:我自己项目通过live server 启动的项目地址为http://127.0.0.1:5500/file/page/index/index.html

 

cesium

*需要引用本地文件包。

 

*通过CDN方式似乎需要用申请token,感觉不是很有必要

 

下载:Cesium 1.76

 

<!DOCTYPE html>

<html lang="en">

 

<head>

  <!-- Use correct character set. -->

  <meta charset="utf-8">

  <!-- Tell IE to use the latest, best version. -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->

  <meta name="viewport"

    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

  <title>Hello World!</title>

  <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

  <script src="./Cesium/Cesium.js"></script>

  <style>

    html,

    body,

    #cesiumContainer {

      width: 100%;

      height: 100%;

      margin: 0;

      padding: 0;

      overflow: hidden;

    }

  </style>

</head>

 

<body>

  <div ></div>

  <script>

    var viewer = new Cesium.Viewer('cesiumContainer', {

      timeline: false,

      animation: false,

      navigationHelpButton: false,

      homeButton: false,

      sceneMode : Cesium.SceneMode.COLUMBUS_VIEW, //2.5D视图

      imageryProvider : new Cesium.OpenStreetMapImageryProvider(), //OSM底图

      sceneModePicker: false,

      baseLayerPicker: false,

      geocoder: false,

      fullscreenButton: false,

      selectionIndicator: false

    });

    // 除去cesium标志

    viewer._cesiumWidget._creditContainer.style.display = 'none'

  </script>

</body>

 

</html>

编辑于 06-22

posted @ 2021-09-16 23:48  hellodev  阅读(11)  评论(0编辑  收藏  举报
Copyright © 2021 hellodev
Powered by .NET 6 on Kubernetes

问答 28u iTmz.Net 3q科技 A8团队1 A8团队2 A8团队3 A8备