zoukankan      html  css  js  c++  java
  • vue 加载天地图

    <template>
      <div id="viewDiv"></div>
    </template>
     
    <script>
    import { loadModules } from "esri-loader";
    
    export default {
      data() {},
      methods: {
        //创建地图
        createMapView: function () {
          const options = {
            url: " /api/arcgis/API/4.15/init.js",
            css: "/api/arcgis/API/4.15/esri/themes/light/main.css",
          };
          // esriConfig.request.corsEnabledServers.push("localhost:80/arcgis/API/4.15/")
          loadModules(
            ["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer"],
            options
          )
            .then(([Map, MapView, WebTileLayer]) => {
              var tiledLayer = new WebTileLayer({
                urlTemplate:
                  "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              });
    
              var tiledLayer_poi = new WebTileLayer({
                urlTemplate:
                  "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=aeae35f8750027dc9790a7437c5ec3c0",
                subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
              });
    
              var map = new Map({
                basemap: {
                  baseLayers: [tiledLayer, tiledLayer_poi],
                },
              });
    
              var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 12,
                center: [116.402544, 39.915599],
              });
    
              //   view.ui.components = []; //清除掉地图左上角默认的缩放图标
            })
            .catch((err) => {
              this.$message("地图创建失败," + err);
            });
        },
      },
      mounted: function () {
        this.createMapView();
      },
    };
    </script>
     
    <style>
    #viewDiv {
      position: absolute;
       100%;
      height: 100%;
    }
    </style>
    

      需要esri-loader(npm i esri-loader--save-dev)

      tk:去天地图注册,创建浏览器端应用即可获得

      /api/为http://localhost:80/,解决跨域

      t0-t7:天地图地图服务二级域名

    参考

  • 相关阅读:
    day47---分组多表查询练习
    day47---数据库进阶知识(二)
    day46---数据库练习
    安全项目(癞蛤蟆病毒)
    pywin32安装步骤
    pip安装报错:error:Microsoft Visual C++ 14.0
    windows下anaconda安装
    数据库常用命令
    MySQL数据库初识
    linux安装MySQL
  • 原文地址:https://www.cnblogs.com/jiang2020/p/13507281.html
Copyright © 2011-2022 走看看