• 快速搭建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%;

          100%;

        }

      </style>

      <link rel="stylesheet" href="https://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 id="viewDiv"></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 {

          100%;

          height: 100%;

          margin: 0;

          padding: 0;

          overflow: hidden;

        }

      </style>

    </head>

    <body>

      <div id="cesiumContainer"></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

  • 相关阅读:
    数据库原理与应用-------------触发器和视图
    Python操作SQLServer示例
    基于python的图片修复程序-可用于水印去除
    Android APK反编译就这么简单 详解
    android官网文档学习笔记
    android散点技术
    读书笔记一
    eclipse的各种错误和解决方法
    css
    响应式设计
  • 原文地址:https://www.cnblogs.com/javalinux/p/15302820.html
Copyright © 2020-2023  润新知