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:天地图地图服务二级域名

    参考

  • 相关阅读:
    java中set集合的常用方法
    Java的Collection集合的常用方法
    Java集合Collection&Map
    Linux设置中文语言的一种方式
    struts2自定义Interceptor拦截器
    Linux系统官网下载
    idea绿色版+谷歌浏览器绿色版——设置打开jsp文件
    torch.nn.Embedding
    负对数似然(negative log-likelihood)
    Pytorch系列教程-使用Seq2Seq网络和注意力机制进行机器翻译
  • 原文地址:https://www.cnblogs.com/jiang2020/p/13507281.html
Copyright © 2011-2022 走看看