WebGIS开采教程lovebet体育官网,设置柑仔浏览器的newtab页面

难点讲述

lovebet体育官网 1

柑仔浏览器,也正是哈hao12三浏览器,私下认可的newtab(新标签)页面和艾德ge同样,整合了消息什么没用的,想艺术想把它去掉。

lovebet体育官网 2

作者:liuyl

思路

So,
F12查阅一下那几个文件所在的地方,只要把相应的html文件的行注释掉就足以了嘛

先看一下,展现的文件路线,

lovebet体育官网 3

再找到呼应的目录,但是发掘只可以找到AppData/Roaming/hao123JuziBroswer这里,上面包车型客车路线就从不了。

lovebet体育官网 4

所以见到,最终的是newtab.html的公文,而且以此相应在文虎文件夹中,SO
AppData\Roaming\hao123JuziBrowser\User_Data\Default\newtab恒定到了那么些文件夹下,不过未有newtab.html,唯有多少个newtab.datnewtab.zip三个公文。

查看newtab.zip文件

lovebet体育官网 5

有关小编:GIS从业者,重要在ArcGIS平台下做WebGIS开荒,最终有笔者的联系情势

解决

近来找到了,新标签页面正是以此newtab.zip文件,只是每一遍运营哈hao1二叁浏览器的时候就能被解压到有时目录,再突显。So,须求把这么些文件解压出来,修改了后头再压缩了,替换就好了。

lovebet体育官网 6

然后修改,jz.newtab.js文件,注释掉几个Ad的function,再有八个news的函数,重新包装替换就好了

版权全数:转发请保留小编名和原本链接

那是叁个多元教程,内容有早晚一而再性,可活动
目录篇 查看全部科目

课程示例代码下载

好几前言


那会是贰个略显复杂的 Hello World

做 Web
开拓,一上来将要面对至少三种程序语言(或协议),HTML、JavaScript、CSS

相较之下,上边这段 C 语言版 Hello World 确实是对初学者太过本人了~~

#include <stdio.h>
void main()  
{  
     printf("Hello World\n");
}

很遗憾,本学科不会非常探究 HTML、JavaScript、CSS
的基本语法,以致不会过多索求 jQuery、Bootstrap、ES6、lodash
等的语法或用法,以及浏览器调节和测试工具的应用格局。那么些将被默感觉读者已经调控的松开知识,不然那么些课程就无法将内容集中于
WebGIS
开荒了。因而,假使在翻阅本种类教程进度中,遭逢那多少个未做注明而让您认为纳闷的步子或代码,请先花时间查找资料补足相关文化,也可留言以得到小编和别的读者的增加援救。

本篇大家将选拔 HTML5
BOILERPLATE

Bootstrap
3
和 ArcGIS
API for JavaScript 做出一个 Hello World 页面,页面将安插在 nginx 中。

有关 nginx 和 ArcGIS API for JavaScript
的配备请阅读WebGIS开垦教程的第一篇和第壹篇,那一篇中大家将直接利用前面两篇中布局好的
nginx 和 API

上边是本文


应用 HTML5 BOILERPLATE 搭建起来页面

HTML5
BOILERPLATE

是3个 web
开采前端模版,模板的机能正是让大家以模板为底蕴初步进行支付,很多至关心注重要的却和要贯彻的功能非亲非故的做事早已由模板做好了。以至不太须要探求模板毕竟帮大家做了怎么,直接运用就能够了

假若想打听模板大约做了哪些,能够翻阅那篇小说 HTML5 Boilerplate –
让页面有个好的初步

平日状态下,开辟贰个新页面时,笔者都会从此间起步,而不是手动新建3个新的
html 文件。

下载

点击链接直接下载 v四.一.0 版本
html5-boilerplate

部署

将核减包内的公文夹解压到 lesson\1_Start\ 目录中,lesson
目录是放示例页面和代码的目录,该目录和 nginx-1.1叁.八同级,复制后将文件夹名称从h5bp-html5-boilerplate-3cd1967 更改为
4_HelloWorld

成就后目录结构应该是那般的

lovebet体育官网 7

目录结构

为 lesson 目录配置虚拟目录

修改 nginx 的安排文件 nginx-1.13.8\conf\nginx.conf ,增加名字为 lesson
的虚拟目录

server 段中增加如下配置

location ^~/lesson/ {
    alias   ..\\lesson\\;
}

修改后重启 nginx

访问页面

访问
http://localhost/lesson/1\_Start/4\_HelloWorld/index.html

恭贺,大家看看了第一个招待页面

lovebet体育官网 8

HTML5 Boilerplate 欢迎页

修改 index.html

在国内采取那套模板时,还亟需做一丝丝改变

替换 jQuery 的 CDN
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

讲授或删除 google 总结

<!--<script>-->
    <!--var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];-->
    <!--(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];-->
    <!--g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';-->
    <!--s.parentNode.insertBefore(g,s)}(document,'script'));-->
<!--</script>-->

刷新页面,即便页面未有转换,但调节和测试工具中曾经不会再升迁不恐怕获得
jquery.min.js 文件了

上述经过退换的 index.html 文件,能够在演示代码
lesson\1_Start\4_HelloWorld\index.html 路线下找到

引入 Bootstrap

Bootstrap
是最受接待的 HTML、CSS 和 JS 框架,用于开拓响应式布局、移动设备优先的
WEB 项目 (引自 Bootstrap 官方网站)

运用 Bootstrap
至少能够保险大家的以身作则页面在未经美术设计的气象下,不至于太过难看。在骨子里项目中本身一般也会引进Bootstrap
,在体制和响应式布局方面能够提供很好的基础和造福,官方提供的零件和插件也都很实用。别的,基于
Bootstrap 的第一方 jQuery 插件特别丰硕好用,比如Treeview、Table等,能够省下重复造轮子的时刻和生机。

这一个科目全数示例页面都会引进Bootstrap,且常常处境下,教程中不会筹划解释使用 Bootstrap
的连锁代码,请读者通过官方文书档案自行补充相关知识

成立新的 html 文件

复制粘贴上一小节修改后的 index.html 文件到均等目录中,重命名字为
bootstrap.html

修改 bootstrap.html 文件

注释对 normalize.cssmain.css 样式文件的引用,增添对 bootstrap
样式文件的引用。之所以要讲授掉原本的多少个,是因为 bootstrap.min.css
中已经席卷了那四个文件中的样式,无需再重复引用了

<!--<link rel="stylesheet" href="css/normalize.css">-->
<!--<link rel="stylesheet" href="css/main.css">-->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

在 jQuery 引用的末端增多 bootstrap 的 js 文件引用

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

修改页面展现的内容,替换
<p>Hello world! This is HTML5 Boilerplate.</p>

<div style="margin-top: 50px" class="container">
    <div class="jumbotron">
        <h1>Hello World</h1>
        <p>这是WebGIS开发教程的示例页面</p>
        <a class="btn btn-primary btn-lg" target="_blank" 
            href="https://www.jianshu.com/p/519dbc371575" role="button">前往 教程</a>
    </div>
</div>
做客页面

访问
http://localhost/lesson/1\_Start/4\_HelloWorld/bootstrap.html
查看修改后的页面

能够看来如下页面

lovebet体育官网 9

访问 bootstrap.html

上述经过修改的 bootstrap.html 文件,能够在示范代码
lesson\1_Start\4_HelloWorld\bootstrap.html 路线下找到

引入 ArcGIS API for JavaScript

复制粘贴上一小节修改后的 bootstrap.html 文件到平等目录中,重命名称叫
map.html

修改 map.html 文件

增添 main.css 文件的引用(那一个文件和底下的 init.js
文件都以在上1篇教程中布置的 API 文件)

<link rel="stylesheet" href="/arcgis_js_api/library/4.6/esri/css/main.css">

加多 init.js 文件的引用

<script src="/arcgis_js_api/library/4.6/init.js"></script>

修改页面 html ,将此前的

<div style="margin-top: 50px" class="container">
    ...
</div>

改为

<div style="margin-top: 50px" class="container">
    <div class="jumbotron">
        <div id="view-main" style="height:400px"></div>
    </div>
</div>

在最终八个 script 标签后增加新的 script 标签。这段代码取自 ArcGIS
API for JavaScript
官方文书档案中最基础的亲自过问,如需详细询问代码意义,请阅读官方文书档案 Intro to
MapView – Create a 2D
map

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
    ], function (Map, MapView) {
        var map = new Map({
            basemap: "streets",
        })
        var view = new MapView({
            container: "view-main",
            map: map,
            zoom: 3,
            center: [110, 40],
        })
    })
</script>

经过上述修改,最终大家的页面将是底下这个样子(去掉了一部分注释代码)

<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>4_HelloWorld</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="/arcgis_js_api/library/4.6/esri/css/main.css">
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to
    improve your experience.</p>
<![endif]-->

<!-- Add your site or application content here -->
<div style="margin-top: 50px" class="container">
    <div class="jumbotron">
        <div id="view-main" style="height:400px"></div>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/arcgis_js_api/library/4.6/init.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "dojo/domReady!"
    ], function (Map, MapView) {
        var map = new Map({
            basemap: "streets",
        })
        var view = new MapView({
            container: "view-main",
            map: map,
            zoom: 3,
            center: [110, 40],
        })
    })
</script>
</body>
</html>
做客页面

访问
http://localhost/lesson/1\_Start/4\_HelloWorld/map.html
查看修改后的页面

能够看看如下页面

lovebet体育官网 10

访问 map.html

如上经过修改的 map.html 文件,能够在示范代码
lesson\1_Start\4_HelloWorld\map.html 路线下找到

此处是最后


这篇教程讲述了须臾间从零开头,如何以 HTML五 BOILERPLATE 和 Bootstrap
为底蕴,编写3个地图页面。假若几年前,已经得以在 map.html
的底蕴上通过不停增添 html 和 js 代码来创设项目利用了,三个头眼昏花的
WebGIS
应用也只是正是在此基础上校代码分散到其它文件之中,并按某种逻辑或思维来组织这个文件和代码

但放于今,若仍如此就稍显脱离时流了。从下1篇起头,我们将一步步品尝利用
居尔p 和 Webpack 辅助我们实行 WebGIS
开采。那1篇中关系到的装有东西都不会被舍弃,但我们还要求学习应用更加多的工具和本事手艺重复看到这一篇教程中最后看到的页面

只是,只怕那1切都是值得的~

本学科是一个多元教程,能够到目录章查看全数科目

关系小编


  • 简书主页
    请优先关怀自作者的简书账号,并在简书对应小说下留言,有APP文告推送所以能及时看到,简书也是自己的篇章首发平台

  • Github主页
    教程和血脉相通代码在自个儿的Github里都能够找到

  • ArcGIS博客园主页
    文章会被一同到ArcGIS网易中,ArcGIS新浪是面向广大GISer的知识分享和问答平台,推荐我们经常去看望

  • 微信公众号 搜索 幻想GIS 或扫描二维码,小说会由此公众号实行推送

    lovebet体育官网 11

    请扫码关怀微信公众号 幻想GIS

  • QQMail
    liuyl89@qq.com

  • GMail
    liuyl.gisuni@gmail.com
    不太平静,提议邮件后在简书里留言告知本身眨眼之间间


相关文章